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

事件绑定

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. Nhibernate的log4net和系统的log4net使用技巧

    NHibernate定义了两个logger:NHibernate和NHibernate.SQL.我们可以分别配置这两个logger.在App.config文件中<root>标签前边添加如下 ...

  2. C#利用开源软件ffMpeg截取视频图片

    #region 从视频画面中截取一帧画面为图片 /// <summary> /// 从视频画面中截取一帧画面为图片 /// </summary> /// <param n ...

  3. [转]Linux/Unix系统镜像/备份/恢复 (dd 命令使用)

    ref: http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=22561912&id=156879 开源系统默认安装了一个d ...

  4. CCNP第二天 帧中继综合实验

    实验题如图所示: 要求全网可达 R5为帧中继交换机 R6 和 R1之间为快速以太网接口 所使用的拓扑为CCNA标准版拓扑图,如下所示: -------------------------------- ...

  5. Spark Streaming揭秘 Day35 Spark core思考

    Spark Streaming揭秘 Day35 Spark core思考 Spark上的子框架,都是后来加上去的.都是在Spark core上完成的,所有框架一切的实现最终还是由Spark core来 ...

  6. js中的计时器

    在JS中做二级菜单时,被一个鼠标移出时隐藏的小问题困扰了很久. <script> function Menu(id){ var _this=this; this.obj=document. ...

  7. vim中编写python代码使用python-mode和syntastic插件时警告(Warning)的消除

    问题: 在Vim使用了syntastic后,编写代码时,可以对代码错误和警告进行相对实时的了解,对编写代码有很大的帮助.同时这个插件和python-mode一起工作时,可以对python代码的编写提供 ...

  8. 滚珠菜单动效－b

    原型从网上找的,动效使用了CAAnimation和UIDynamic物理引擎.  gitHub  :https://github.com/BearRan/FlowMenuAnimation 大致步骤如 ...

  9. 100 doors

    Question There are 100 doors in a row that are all initially closed. You make 100 passes by the door ...

  10. 一个好用且方便的FastCgi C++库 - FastCgi++

    不知道你是不是曾经发愁过使用FastCgi库来使用C++开发Fastcgi程序繁琐而且会与C++ STL代码产生冲突的地方,或者你还是习惯了cout而不是pringf,那这篇文章就可以了解到一个使用的 ...