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

事件绑定

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. webuploader上传插件

    一:官网 http://fex.baidu.com/webuploader/ 二:示例

  2. 一些dos命令

    MS DOS 命令大全 一.基础命令 1 dir 无参数:查看当前所在目录的文件和文件夹. /s:查看当前目录已经其所有子目录的文件和文件夹. /a:查看包括隐含文件的所有文件. /ah:只显示出隐含 ...

  3. 常用mysql命令大全

    常用的MySQL命令大全 一.连接MySQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1.例1:连接到本机上的MYSQL. 首先在打开DOS窗口,然后进入目录 mysqlbin,再 ...

  4. 菜鸟聊：PHP

    学习PHP已经有2个月时间了,从一开始的一片空白,到现在的刚刚入门,我对PHP的了解也有更多的认知,希望通过我对PHP的理解,能帮助到更多像我一样的新手更早的认识PHP.(PS:以下内容的一部分是摘自 ...

  5. .Net IE10 _doPostBack 未定义

    问题描述:用.Net写的LinkButton触发后台是js报错:_doPostBack 未定义 网上资料显示这种情况是当前framework不能识别IE10版本,把该浏览器做降级处理导致JS错误,解决 ...

  6. iOS 跳转到系统的设置界面-b

    在项目中,我们经常会碰到使用位置的需求.当用户设置app不允许使用位置的时候,最好的用户体验就是直接调转到系统的位置设置界面,进行设置. 本人已经测试,在5c iOS8.3系统 和 5s iOS7.1 ...

  7. bnuoj 20838 Item-Based Recommendation （模拟）

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=20838 [题意]: 有点长,略. [code]: #include <iostream> ...

  8. React Native Android配置部署踩坑日记

    万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...

  9. 2328: [HNOI2011]赛车游戏 - BZOJ

    先把一定要减的费用先减掉,就是b*s*len(上坡路),下坡路就设一个初速度,使耗油为0,如果没油了,就无法到达 然后考虑加速 对于长度为len的路,增加v的速度需要len*a*v的油,与len成正比 ...

  10. 3.4 spring- lookup-method 子元素的使用与解析

    1. lookup-method的应用: 1.1 子元素lookup-method 似乎不是很常用,但是在某些时候他的确是非常有用的属性,通常我们称它为 "获取器注入" . 引用 ...