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

事件绑定

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. C# and Redis,安装作为服务

    本文主要讲述的是如何使用C#语言来进行Redis分布式缓存的程序编写.首先,需要从github下载最新的32/64位安装(下载地址),解压后根据自己机器的实际情况选择32位或者64位,例如:我机器是6 ...

  2. Discuz 哪些文件和文件夹需要777权限

    Discuz有强大的缓存能力,当然要想建立这些缓存,就需要对需要的文件和文件夹进行读写,因此给需要的文件和文件夹777权限(Linux服务器)是必不可少的,下面就列出了需要给777权限的文件和文件夹, ...

  3. V9任何页面GET调用内容分页的说明

    如标题,很多人想要在网站首页或其他的页面实现分页效果,说明如下: 一般特殊页面实现分页是通过GET语句的(论坛很多牛人用修改PHPCMS系统函数来实现,个人不推荐,因为你改了系统文件,不利于官方下一步 ...

  4. google map api 学习笔记

    (1)地图的缩放监听函数 google.maps.event.addlistener(map,"zoom_change",function(){ 缩放级别变化后的函数. }); ( ...

  5. ThinkPHP I方法

    ThinkPHP的I方法是3.1.3版本新增的,如果你是之前的3.*版本的话,可以直接参考使用3.1快速入门教程系列的变量部分. 概述 正如你所见到的一样,I方法是ThinkPHP众多单字母函数中的新 ...

  6. OOP三类继承的区别

    OOP继承的区别提纲: 1. 普通类继承,并非一定要重写父类方法.2. 抽象类继承,如果子类也是一个抽象类,并不要求一定重写父类方法.如果子类不是抽象类,则要求子类一定要实现父类中的抽象方法.3. 接 ...

  7. Redis之七种武器

    长生剑.孔雀翎.碧玉刀.多情环.离别钩.霸王枪.拳头是古龙笔下的七种武器,而本文打算将Redis的几种使用方式 Strings.Hashs.Lists.Sets.Sorted Sets.Pub/Sub ...

  8. C# Windows - TabControl

    TabControl控件的属性 - 一般用于控制TabPages对象容器的外观,特别是显示的选项卡的外观 属性 说明 Alignment 控制选项卡在选项卡控件的什么位置显示 Appearance 控 ...

  9. 实时数据处理环境搭建flume+kafka+storm：2.flume 安装

    1.  解压  tar -zxvf     2.配置       拷贝配置文件 :cp flume-conf.properties.template flume-conf.properties     ...

  10. php+mysql分页类的入门实例

    php+mysql分页类的简单代码 时间:2016-02-25 06:16:26来源:网络 导读:php+mysql分页类的简单代码,二个php分页类代码,对商品进行分页展示,当前页面数,每个页面展示 ...