有时候觉得这些内容都好简单，真想看看就算了。

事件绑定

bing(type [,data],fn)

第一个参数：事件类型包括：blur,focus,load,resize,scroll,unload,click,dbclick,

mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,

mouseleave,change,select,submit,keydow,keypress,keyup和error

第二个参数可选，作为event.data属性值传递给事件对象的额外数据对象。

第三个参数用来绑定处理函数

通过一个实例：

<h5 class="head">什么是jQuery?</h5>

    <div class="content">

        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

    </div>

实现随鼠标移动而显示的效果：

(function(){

    $("#panel h5.head").mouseover(function(){

        $(this).next("div.content").show();

    });

    $("#panel h5.head").mouseout(function(){

         $(this).next("div.content").hide();

    })

})

合成事件

1.hover()

语法为hover(enter,leave),上面的例子则可以写成：

$(function(){

    $(#panel h5.head).hover(function(){

        $(this).next("div.content").show();

    },function(){

        $(this).next("div,content").hiden();

    })

})

2.toggle()

语法为toggle(fn1,fn2,fn3..):

$(function(){

    $(#panel h5.head).toggle(function(){

        $(this).addClass("highlight");

        $(this).next("div.content").show();

    },function(){

        $(this).removeClass("highlight");

        $(this).next("div,content").hiden();

    })

})

冒泡事件

<script type="text/javascript">

$(function(){

    // 为span元素绑定click事件

    $('span').bind("click",function(){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";

        $('#msg').html(txt);

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

</script>

<body>

<div id="content">

    外层div元素

    <span>内层span元素</span>

    外层div元素

</div>

<div id="msg"></div>

</body>
<script type="text/javascript">

$(function(){

       // 为span元素绑定click事件

    $('span').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";

        $('#msg').html(txt);

        event.stopPropagation();    //  阻止事件冒泡

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

        event.stopPropagation();    //  阻止事件冒泡

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

</script>

<body>

<div id="content">

    外层div元素

    <span>内层span元素</span>

    外层div元素

</div>

<div id="msg"></div>

</body>

<script type="text/javascript">

$(function(){

   $("#sub").bind("click",function(event){

         var username = $("#username").val();  //获取元素的值

         if(username==""){     //判断值是否为空

             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息

             event.preventDefault();  //阻止默认行为 ( 表单提交 )

             //或者return false;

         }

   })

})

</script>

<body>

<form action="test.html">

用户名：<input type="text" id="username" />

<br/>

<input type="submit" value="提交" id="sub"/>

</form>

<div id="msg"></div>

</body>

事件对象属性

<script>

$(function(){

    $("a").click(function(event) {

      alert(event.type);//获取事件类型

      return false;//阻止链接跳转

    });

})

  </script>

<body>

<a href='http://google.com'>click me .</a>

</body>

"click"

event.preventDefault()方法

event.stopPropagation()方法

 <script>

$(function(){

    $("a[href=http://google.com]").click(function(event) {

      alert(event.target.href);//获取触发事件的<a>元素的href属性值

      return false;//阻止链接跳转

    });

})

  </script>

event.relatedTarget()：mouseover和mouseout所发生的元素可以通过event.relatedTarget()

锋利的JQuery-Jquery中的事件和动画的更多相关文章

  1. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  2. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  3. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  4. jquery ajax 中各个事件执行顺序

    jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...

  5. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  6. 锋利的jQuery中的事件与动画

    奋夜的奋斗  ----  事件与动画 ----  来自地狱的战镰 小小的单词难不倒我们哦!!!!!!!    bind:绑定     unbind:接触绑定    toggle:栓牢   fadeou ...

  7. 锋利的jQuery ——jQuery中的事件和动画（四）

    一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){}  方法内注册的事件, ...

  8. jQuery中的事件和动画效果

    刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...

  9. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  10. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

随机推荐

  1. DataGridView显示时间格式

    默认显示时间不显示秒yyyy-MM-dd HH:mm dataGridView.Columns["日期时间字段"].DefaultCellStyle.Format = " ...

  2. 关于canvas中的jquery

    关于h5,相比前端的同事们都很了解了吧!h5里面有个canvas,现在用的蛮火.但是canvas里面的代码确实是有点繁多,特别是要对于图形做什么操作的时候...我昨天无意间发现了一个canvas的插件 ...

  3. php 操作mongodb

    在这里首先说一下mongo 客户端安装完成有时会启动失败     这里解决办法就是 删除 D:\mongodb\db 下的 mongod.lock文件即可 再重新启动 首先下载mongodb php扩 ...

  4. [ Windows] [ OS ] [ Remote Desktop ] 開啟同一個帳號同時2的連線RDP的方式

    感謝同事 Allen 的Support :) 執行>gpedit.msc 電腦設定>Windows元件>遠端桌面服務>遠端桌面工作階段主機>連線>限制遠端桌面服務的 ...

  5. CorelDRAW 文件实用工具 CDRTools 2

    随着 CorelDRAW 更新脚步越来越频繁,版本之间兼容性问题越来越突出,特别是跨版本之间打开会有很多问题,比如:文字跑位.透镜变向.位图出错.颜色改变,甚至会造成文件损坏.最好的办法就是哪一个版本 ...

  6. 数据库中join的用法（on、left。right）

    Table A aid   adate 1      a1 2      a2 3      a3 TableB bid bdate 1    b1 2   b2 4    b4 两个表a,b相连接, ...

  7. python中执行javascript代码

    python中执行javascript代码: 1.安装相应的库,我使用的是PyV8 2.import PyV8 ctxt = PyV8.JSContext()     ctxt.enter()     ...

  8. wancms从apache迁移至nginx

    首先解决nginx1.2不支持pathinfo问题,见上一篇博文 其次是数据库的用户名变了之后,修改各种配置,wancms的,ucenter的,bbs的 还有一个是wacms的后台站点管理里面的uc配 ...

  9. C#基础及记忆概念

    在C#中,你给一个方法传输值类型参数时,实际上是使用的这个参数的一个副本,就是将原来的变量复制一份,然后传给一个方法,让其进行操作.所以在方法内部对参数的修改等不会对原来的参数造成影响(这个其实就是值 ...

  10. 【BZOJ 1085】 [SCOI2005]骑士精神

    Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者横坐标相差为2, ...