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

事件绑定

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. Excel导入功能

    一:前端 <t:dgToolBar title="Excel题库导入" icon="icon-search" onclick="question ...

  2. 热键HotKeys

    一:新建类HotKeys命名空间: using System.Runtime.InteropServices; 二:注册热键API [DllImport("user32")] pu ...

  3. 如何使用Git——（一）

    一.git与github git 是一款自由和开源的分布式版本控制系统,用于敏捷高效地处理任何或大或小的项目. github 是一个网站,给用户提供git仓库托管服务,是开源代码库以及版本控制系统.在 ...

  4. mac安装memcache

    1.wget http://blog.s135.com/soft/linux/nginx_php/memcache/memcache-2.2.5.tgz 2.tar zxvf memcache-2.2 ...

  5. Linux系统下ssh的相关配置详细解析

    Linux系统下ssh的相关配置进行了详细的分析介绍. ssh是大家常用的登录linux服务器的方式,但是为了安全考虑,有时候我们需要针对ssh做一些特殊处理,本文记录笔者曾经做过的一些修改,供大家参 ...

  6. 修改wamp的apache默认端口80以及www目录

    修改wamp的apache默认端口80以及www目录 以修改为8088端口和D:/workphp目录为例. 修改为8088端口 左键托盘图标,在“Apache”里可以直接打开httpd.conf,查找 ...

  7. php Zend Opcache,xcache,eAccelerator缓存优化详解及对比

    XCACHE XCache 是一个开源的 opcode 缓存器/优化器, 这意味着他能够提高您服务器上的 PHP 性能. 他通过把编译 PHP 后的数据缓冲到共享内存从而避免重复的编译过程, 能够直接 ...

  8. seo 优化 仅针对 来拍呀www.laipaiya.com（一）

    加入百度统计代码:http://tongji.baidu.com/ 查看百度统计优化分析->seo建议 对每个页面的meta标签做修改 首页 title :来拍呀 - | 折扣好房你就来拍呀 k ...

  9. ofbiz进阶之框架配置文件指导

    The Open For Business Project: Framework Configuration Guide 原文链接:http://ofbiz.apache.org/docs/corec ...

  10. UI事件监听的击穿

    什么是UI事件监听的击穿 在游戏视图中,有两个UI界面叠在一起的时候,单击一个空白处,却触发了被覆盖在下层了UI界面中的单击事件,这就是单击击穿了上层界面. 假设场景中放置了一个箱子,单击箱子会触发一 ...