jquery事件

jQuery 是目前使用最广泛的javascript函数库。 据 统计 ，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。 对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。 虽然jQuery上手简单，比其他库容易学会，但是要全面掌握，却不轻松。因为它涉及到网页开发的方方面面，提供的各种方法和内部变化有上千种之多。初学者常常感到，入门很方便，提高很困难。 目前，互联网上最好的jQuery入门教材，是 Rebecca Murphey 写的 《jQuery基础》 （jQuery Fundamentals）。在Google里搜索"jQuery 培训"，此书排在第一位。jQuery官方团队已经 同意 ，把此书作为官方教程的基础。 这本书虽然是入门教材，但也足足有100多页。我对它做了一个详细的笔记，试图理清jQuery的设计思想，找出学习的脉络。我的目标是全面掌握jQuery，遇到问题的时候，心里有底，基本知道使用它的哪一个功能，然后可以迅速从 手册 中找到具体的写法。 下面就是我的笔记，它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识，就能看懂它，在最短的时间里

1.问题的起源 linkbutton 是 easyui 中常用的一个控件，我们可以使用它创建按钮。用法很简单，使用 a 元素，标记上 easyui-linkbutton 的类就可以看到按钮了。 <a id="btn" class="easyui-linkbutton">这是一个按钮</a> 看起来就是这个样子 或者使用代码方式。 $("#btn").linkbutton(); 不过，点了也没有作用，如果希望有作用，那么，再为它添加一个事件处理吧。通常你会使用 jQuery 的方式添加事件处理函数。结果可能是这样。 脚本中的事件注册。 $("#btn").click(function () { alert("我被点到了！"); }); 看起来一切正常。很快你发现一个新的需求，需要暂时禁用这个按钮，太简单了，easyui 中已经提供了禁用按钮的方法 disable，来让我们禁用一下。 直接调用linkbutton的"disable"属性,代码变成了这样。 $("#btn").linkbutton("disable"); 按钮则变成了这样。 再点击一下，傻眼了吧！提示框照样弹了出来！。 2. linkbutton 是如何禁用按钮的 easyui 提供了 linkbutton 的源代码，所以，我们可以很方便地看一下，内部是如何实现禁用按钮的。 function setButtonState

很久没有关注jQuery了，最近重新看了一下，看到一些不错的文章，转来坐一下笔记。 其内容和一些新提供的方法还是很多有值得学习的地方。 1. 使用最新版本的jQuery jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。 下面就来看看，不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句： $('.elem') $('.elem', context) context.find('.elem') 我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试，看看浏览器在1秒内能够执行多少次。结果如下： 可以看到，1.6.2版本的运行次数，远远超过两个老版本。尤其是第一条语句，性能有数倍的提高。 其他语句的测试，比如.attr("value")和.val()，也是新版本的jQuery表现好于老版本。 2. 用对选择器 在jquery中，你可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，你应该了解它们的性能差异。 （1）最快的选择器：id选择器和元素标签选择器 举例来说，下面的语句性能最佳： $('#id') $('form') $('input') 遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。 （2）较慢的选择器

很久没有关注jQuery了，最近重新看了一下，看到一些不错的文章，转来坐一下笔记。 其内容和一些新提供的方法还是很多有值得学习的地方。 1. 使用最新版本的jQuery jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。 下面就来看看，不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句： $('.elem') $('.elem', context) context.find('.elem') 我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试，看看浏览器在1秒内能够执行多少次。结果如下： 可以看到，1.6.2版本的运行次数，远远超过两个老版本。尤其是第一条语句，性能有数倍的提高。 其他语句的测试，比如.attr("value")和.val()，也是新版本的jQuery表现好于老版本。 2. 用对选择器 在jquery中，你可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，你应该了解它们的性能差异。 （1）最快的选择器：id选择器和元素标签选择器 举例来说，下面的语句性能最佳： $('#id') $('form') $('input') 遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。 （2）较慢的选择器

这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。 <script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("click", function(){ $('#test').append("<p>我的绑定函数2</p>"); }).bind("click", function(){ $('#test').append("<p>我的绑定函数3</p>"); }); $('#btn').trigger("click"); }) </script> 这里面会自动触发一次click事件。也就是页面加载后，就会自动触发一次。 <script type="text/javascript"> $(function(){ $('#btn').bind("myClick", function(){ $('#test').append("<p>我的自定义事件.</p>"); }); $('#btn').click(function(){ $(this).trigger("myClick");

jQuery——一个快速，简介的javaScrip框架 作用：将我们的页面的js代码和HTML页面代码进行分离 　　　提供工作效率 引入jQuery的库 <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> jQuery函数创建：文档加载完成的事件 jQuery(document).ready(function(){ }); $(document).read(function(){ }); $(function(){ }); 三种方式都可以 window.onload = function(){ 　　//文档加载事件 } jq绑定事件例子 $("选择器").click(function(){ }); 事件： .html("文本内容")——替换两个尖括号里面的内容 js和jq对象互换： var div = $("选择器")，日常开发通常在di对象名前面加个$，标识为jq转成js的对象 var $div = $("id选择器"); var jsDiv = $div.get(0); var jsDiv = $div[0]; $(jq对象).事件()——直接将js对象放到$里面 jq开发步骤： 　　1、导入jq的相关文件 　　2、文档加载完成事件： 　　　　$(function(){});页面初始化的操作

1.补充：each 描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。 .each(function(index, Element))： 描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。 . each () 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素 　　 $.each() 是调用jQuery中的each方法 用法 如 $.each($(':checkbox'),function( ){ 注意function(i,v) 里边可以加这两个参数，代表索引，对象 　　与 $(selector).each() 这个是调用这和个对象的each()方法 如 $(':checkbox').each(function () { 用each 方法完成反选 $('#x2').on('click',function () { $.each($(':checkbox'),function(){ //each方法，从checkbox列表中依次取出每个checkbox对象，然后对其进行操作

常用模拟 有时候，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。 在JQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。 $('#btn').trigger("click"); 这样，当页面加载完毕后，就会立刻输出想要的效果。也可以直接简写click()，来达到同样的效果： $('#btn').click(); 触发自定义事件 trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件，JQuery代码如下： $('#btn').bind("myClick", function(){ $('#test').append("<p>我的自定义事件.</p>"); }); 想要触发这个事件，可以使用以下代码来实现： $('#btn').trigger("myClick"); 传递数据 trigger(type[，data])方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。 下面是一个传递数据的例子。 $(function(){ $('#btn')

8.完善的事件处理功能 jquery已经为我们提供了各种时间处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。 如：$("#msg").click(function(){alert("good")}) //为元素添加了单击事件 jquery中有几个自定义的事件： （1）hover(fn1,fn2):当鼠标移到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个函数时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over,离开时置为out。 $("tr").hover(function(){ $(this).addClass("over"); }, function(){ $(this).addClass("out"); }); （2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 （3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的 第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 （4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。 例如： $("p").trigger("click"); //触发所有p元素的click事件 （5

jQuery中的事件冒泡捕获阻止冒泡 事件冒泡 IE中的事件流叫做事件冒泡，就是又最开始的时间接收到逐级向上传播较为不具体的节点。IE9、谷歌浏览器、Safari、Opera等等都是将事件一直冒泡到windwo对象上。 事件捕获 事件捕获从最根本上的Document到下级的元素逐级的向下传递捕获。 IE9、谷歌浏览器、Safari、Opera等 阻止事件冒泡 jQuery 提供了两种方式来阻止事件冒泡。 **方式一: **event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); }); **方式二：**return false; $("#div1").mousedown(function(event){ return false; }); 但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。 来源： CSDN 作者： 编程者联盟 链接： https://blog.csdn.net/limm33/article/details/70340178