jquery 事件机制

jquery 事件机制

ID:1483491

大小:35.52 KB

页数:12页

时间:2017-11-11

上传者:U-998
jquery 事件机制_第1页
jquery 事件机制_第2页
jquery 事件机制_第3页
jquery 事件机制_第4页
jquery 事件机制_第5页
资源描述:

《jquery 事件机制》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库

2010年12月19日jquery事件机制【转】在介绍方法之前,我觉得有必要描述一下响应事件的两种策略,一种是事件捕获(Eventcapturing),一种是事件冒泡(Eventbubble),这两种策略是相对立的,它们是在浏览器大战中分别由Netscape和微软提出的完全相反的两种事件传播模型。事件冒泡定义为在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层。而事件捕获则与事件冒泡则恰好相反,处理事件是从对象的最外层往里传播,直到终止。W3C标注是支持两种事件处理策略的,但是却更偏向于事件冒泡,因为事件捕获Bug较多,目前IE是不支持事件捕获的,其他浏览器基本两种都支持。下面我给一个事件冒泡的例子,自己试一下就明白了,至于事件捕获就算了..... 事件冒泡JavaScript事件冒泡#box{width:200px;height:100px;border:2pxsolidred}#boxh5{margin:0;padding:2px5px;font-size:18px;text-align:right;background:red;cursor:move}#boxh5a{text-decoration:none;color:#FFF}#boxdiv{white-space:inherit;}关闭

functionstartDrag(){document.getElementById('testInfo').innerHTML+='层事件';}functioncloseBox(e){ document.getElementById('testInfo').innerHTML+='关闭事件';//将下面一段注释去掉则可以阻止冒泡//if(e&&e.stopPropagation)//e.stopPropagation();//else//window.event.cancelBubble=true;}  那么在JQuery中阻止事件策略的方法有event.preventDefault();(阻止默认行为)、event.stopPropagation();event.stopImmediatePropagation();(阻止事件冒泡)、直接返回returnfalse;(阻止默认行为和时间冒泡)。  事件处理包括bind(type,[data],fn)、bind(map)、one(type,[data],fn)、trigger(type,[data])、triggerHandler(type,[data])、unbind([type],[data])这几个方法。  1、bind(type,[data],fn)用于为指定元素绑定指定的事件处理函数,[data]代表可选的传递的参数,它的写法为:  代码//带参数的绑定方式$("#text").bind('click',{result:"yes"},function(event){alert(event.data.result);})//不带参数并且阻止冒泡$("#text").bind('click',function(e){//自定义处理行为e.stopPropagation();})  其实bind(type,[data],fn)这种绑定事件的方式我们还有一种简写的方式,但是他们的区别在于简写方式不能如bind一样指定参数[data],他的写法就是直接将bind中type参数执行,如下:$("#text").click(function(e){//自定义处理行为alert("简写方式");})  2、bind(map)就是一次性为元素绑定多个事件处理函数,写法如下:   代码$('#text').bind({click:function(){alert("bind(map)绑定的click事件");},mouseenter:function(){alert("bind(map)绑定的mouseenter事件");}});  3、one(type,[data],fn)指定事件只执行一次,写法与bind()方法一样,在此就不做示范。  4、trigger(type,[data])、triggerHandler(type,[data])其实作用是一样的,都是在每一个匹配的元素上触发某类事件,唯一的区别就是前者是执行事件冒泡事件的,而后者只执行指定元素的事件。下面做个比较:  代码//HTML代码:trigger()triggerHandler()

//JQuery代码$("#triggerdiv").click(function(){alert("DIV触发");});$("#trigger").click(function(){$("#tri").trigger("click");});$("#triggerHandler").click(function(){$("#tri").triggerHandler("click");});$("#tri").click(function(){alert("子集DIV触发");});  5、unbind([type],[data])就再简单不过了,删除指定元素的绑定事件,如果指定type参数则删除指定的事件,如果没有指定则删除该指定元素的所有事件。   在这些事情机制中我最常用到的还是bind方法,再常用的就是它的简写方式。当然这些事件机制是可以结合起来用的,关键看业务需求而定jQuery选择器总结 viewsourceprint?001jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 002  003$("#myELement")   选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 004$("div")          选择所有的div标签元素,返回div元素数组 005$(".myClass")     选择使用myClass类的css的所有元素 006$("*")            选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass") 007  008层叠选择器: 009$("forminput")        选择所有的form元素中的input元素 010$("#main>*")         选择id值为main的所有的子元素 011$("label+input")    选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 012$("#prev~div")      同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 013  014基本过滤选择器:  015$("tr:first")              选择所有tr元素的第一个 016$("tr:last")               选择所有tr元素的最后一个 017$("input:not(:checked)+span")   018  019过滤掉:checked的选择器的所有的input元素 020  021$("tr:even")              选择所有的tr元素的第0,2,4......个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) 022  023$("tr:odd")               选择所有的tr元素的第1,3,5......个元素 024$("td:eq(2)")            选择所有的td元素中序号为2的那个td元素 025$("td:gt(4)")            选择td元素中序号大于4的所有td元素 026$("td:ll(4)")             选择td元素中序号小于4的所有的td元素 027$(":header") 028$("div:animated") 029内容过滤选择器: 030  031$("div:contains('John')")选择所有div中含有John文本的元素 032$("td:empty")          选择所有的为空(也不包括文本节点)的td元素的数组  033$("div:has(p)")       选择所有含有p标签的div元素 034$("td:parent")         选择所有的以td为父节点的元素数组 035可视化过滤选择器: 036  037$("div:hidden")       选择所有的被hidden的div元素 038$("div:visible")       选择所有的可视化的div元素 039属性过滤选择器: 040  041$("div[id]")             选择所有含有id属性的div元素 042$("input[name='newsletter']")   选择所有的name属性等于'newsletter'的input元素 043  044$("input[name!='newsletter']")选择所有的name属性不等于'newsletter'的input元素 045  046$("input[name^='news']")        选择所有的name属性以'news'开头的input元素 047$("input[name$='news']")        选择所有的name属性以'news'结尾的input元素 048$("input[name*='man']")         选择所有的name属性包含'news'的input元素 049  050$("input[id][name$='man']")   可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 051   052子元素过滤选择器: 053  054$("ulli:nth-child(2)"),$("ulli:nth-child(odd)"),$("ulli:nth-child(3n+1)") 055  056$("divspan:first-child")         返回所有的div元素的第一个子节点的数组 057$("divspan:last-child")          返回所有的div元素的最后一个节点的数组 058$("divbutton:only-child")      返回所有的div中只有唯一一个子节点的所有子节点的数组 059  060表单元素选择器: 061  062$(":input")                 选择所有的表单输入元素,包括input,textarea,select和button 063  064$(":text")                    选择所有的textinput元素 065$(":password")          选择所有的passwordinput元素 066$(":radio")                  选择所有的radioinput元素 067$(":checkbox")           选择所有的checkboxinput元素 068$(":submit")              选择所有的submitinput元素 069$(":image")                选择所有的imageinput元素 070$(":reset")                   选择所有的resetinput元素 071$(":button")               选择所有的buttoninput元素 072$(":file")                    选择所有的fileinput元素 073$(":hidden")              选择所有类型为hidden的input元素或表单的隐藏域 074  075表单元素过滤选择器: 076  077$(":enabled")            选择所有的可操作的表单元素 078$(":disabled")           选择所有的不可操作的表单元素 079$(":checked")           选择所有的被checked的表单元素 080$("selectoption:selected")选择所有的select的子元素中被selected的元素 081  082   083  084选取一个name为”S_03_22″的inputtext框的上一个td的text值085$(”input[@name=S_03_22]“).parent().prev().text() 086  087名字以”S_”开始,并且不是以”_R”结尾的088$(”input[@name^='S_']“).not(”[@name$='_R']“) 089  090一个名为radio_01的radio所选的值091$(”input[@name=radio_01][@checked]“).val();  092  093   094  095   096  097$("AB")查找A元素下面的所有子节点,包括非直接子节点098$("A>B")查找A元素下面的直接子节点099$("A+B")查找A元素后面的兄弟节点,包括非直接子节点100$("A~B")查找A元素后面的兄弟节点,不包括非直接子节点 101  1021.$("AB")查找A元素下面的所有子节点,包括非直接子节点 103  104例子:找到表单中所有的input元素 105  106HTML代码: 107  108
109110111
112      113      114
115 116 117jQuery代码: 118  119$("forminput") 120结果: 121  122[,] 123  1242.$("A>B")查找A元素下面的直接子节点 125例子:匹配表单中所有的子级input元素。 126  127HTML代码: 128  129
130131132
133      134      135
136137 138jQuery代码: 139  140$("form>input") 141 结果: 142  143[] 144  1453.$("A+B")查找A元素后面的兄弟节点,包括非直接子节点 146例子:匹配所有跟在label后面的input元素 147  148HTML代码: 149  150
151152153
154      155      156
157158 159jQuery代码: 160  161$("label+input") 162结果: 163  164[,] 165   166  1674.$("A~B")查找A元素后面的兄弟节点,不包括非直接子节点 168例子:找到所有与表单同辈的input元素 169  170HTML代码: 171  172
173174175
176      177      178
179180 181jQuery代码: 182  183$("form~input") 184结果: 185  186[

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
关闭