﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>IT博客-asfman-文章分类-jquery</title><link>http://www.cnitblog.com/asfman/category/6665.html</link><description>有些事，我们明知道是错的，也要去坚持，因为不甘心；有些人，我们明知道是爱的，也要去放弃，因为没结局；有时候，我们明知道没路了，却还在前行，因为习惯了。</description><language>zh-cn</language><lastBuildDate>Mon, 26 Sep 2011 05:36:01 GMT</lastBuildDate><pubDate>Mon, 26 Sep 2011 05:36:01 GMT</pubDate><ttl>60</ttl><item><title>jq evalScript</title><link>http://www.cnitblog.com/asfman/articles/59773.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Thu, 02 Jul 2009 00:40:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/59773.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/59773.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/59773.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/59773.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/59773.html</trackback:ping><description><![CDATA[<p>function evalScript( i, elem ) {<br>&nbsp;if ( elem.src )<br>&nbsp;&nbsp;jQuery.ajax({<br>&nbsp;&nbsp;&nbsp;url: elem.src,<br>&nbsp;&nbsp;&nbsp;async: false,<br>&nbsp;&nbsp;&nbsp;dataType: "script"<br>&nbsp;&nbsp;});</p>
<p>&nbsp;else<br>&nbsp;&nbsp;jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );</p>
<p>&nbsp;if ( elem.parentNode )<br>&nbsp;&nbsp;elem.parentNode.removeChild( elem );<br>}</p>
<p>如果是&lt;script src="xxxx.js"&gt;&lt;/script&gt;则用ajax同步去读，否则用globalEval<br>&nbsp;// Evalulates a script in a global context<br>&nbsp;globalEval: function( data ) {<br>&nbsp;&nbsp;if ( data &amp;&amp; /\S/.test(data) ) {<br>&nbsp;&nbsp;&nbsp;// Inspired by code by Andrea Giammarchi<br>&nbsp;&nbsp;&nbsp;// <a href="http://webreflection.blogspot.com/2007/08/global-scope-evaluation-and-dom.html">http://webreflection.blogspot.com/2007/08/global-scope-evaluation-and-dom.html</a><br>&nbsp;&nbsp;&nbsp;var head = document.getElementsByTagName("head")[0] || document.documentElement,<br>&nbsp;&nbsp;&nbsp;&nbsp;script = document.createElement("script");</p>
<p>&nbsp;&nbsp;&nbsp;script.type = "text/javascript";<br>&nbsp;&nbsp;&nbsp;if ( jQuery.support.scriptEval )<br>&nbsp;&nbsp;&nbsp;&nbsp;script.appendChild( document.createTextNode( data ) );<br>&nbsp;&nbsp;&nbsp;else<br>&nbsp;&nbsp;&nbsp;&nbsp;script.text = data;</p>
<p>&nbsp;&nbsp;&nbsp;// Use insertBefore instead of appendChild&nbsp; to circumvent an IE6 bug.<br>&nbsp;&nbsp;&nbsp;// This arises when a base node is used (#2709).<br>&nbsp;&nbsp;&nbsp;head.insertBefore( script, head.firstChild );<br>&nbsp;&nbsp;&nbsp;head.removeChild( script );<br>&nbsp;&nbsp;}<br>&nbsp;},</p>
<img src ="http://www.cnitblog.com/asfman/aggbug/59773.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2009-07-02 08:40 <a href="http://www.cnitblog.com/asfman/articles/59773.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>jq之拖动(by asfman)</title><link>http://www.cnitblog.com/asfman/articles/50952.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Sat, 01 Nov 2008 14:13:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/50952.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/50952.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/50952.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/50952.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/50952.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp; $.fn.extend({<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; drag: function(limit, sFunc, mFunc, eFunc){//limit range, start handler, moving handler, end handler<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return this.each(function(){<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var _this = this;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if($.browser.msie) {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.onselectstart = function(){return false};<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if(this.style.background == "") this.style.background = "#fff";<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if($.browser.mozilla) this.style.MozUserSelect = 'none';<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.style.cursor = "move";<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(this).mousedown(function(e){<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sFunc &amp;&amp; sFunc.call(this);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var offset = $(this).offset();&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var screenX = e.screenX, screenY = e.screenY, w = this.offsetWidth, h = this.offsetHeight;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(document).mousemove(function(e2){<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if($.browser.msie &amp;&amp; e.which != 1)&nbsp;&nbsp; return ($(document).unbind(), eFunc.call(_this));<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var curLeft = offset.left + e2.screenX - screenX, curTop = offset.top + e2.screenY - screenY;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if(!limit) limit = {minX: -20000, maxX: 20000, minY: -20000, maxY : 20000};<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; curLeft = curLeft &lt; limit.minX ? limit.minX : ((curLeft + w) &gt; limit.maxX ? (limit.maxX - w) : curLeft);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; curTop = curTop &lt; limit.minY ? limit.minY : ((curTop + h) &gt; limit.maxY ? (limit.maxY - h) : curTop);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(_this).css({position: "absolute", left: curLeft, top: curTop});<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; if($.browser.msie &amp;&amp; _this.tagName == "IMG") e2.preventDefault();<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; mFunc &amp;&amp; mFunc.call(_this);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(document).mouseup(function(){<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; $(document).unbind();<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;eFunc &amp;&amp; eFunc.call(_this);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(this.tagName == "IMG") e.preventDefault();<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; });<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; });<br><img src ="http://www.cnitblog.com/asfman/aggbug/50952.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2008-11-01 22:13 <a href="http://www.cnitblog.com/asfman/articles/50952.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>jquery event add分析</title><link>http://www.cnitblog.com/asfman/articles/50108.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Sat, 11 Oct 2008 11:38:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/50108.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/50108.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/50108.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/50108.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/50108.html</trackback:ping><description><![CDATA[&nbsp;prk/彭仁夔&nbsp;&nbsp; 08-08-26<br>Jquery提供了一些来进行regist,remove,fire事件的方法。<br>6.2.1 Register<br>对于注册事件，jquery提供了bind、one、toggle、hover四种注册事件的方法， bind是最基本的方法。One是注册只运行一次的方法，toggle注册交替运行的方法。Hover是注册鼠标浮过的方法。<br>bind : function(type, data, fn) {<br>&nbsp;&nbsp;&nbsp; return type == "unload" ? this.one(type, data, fn) : this<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; .each(function() {// fn || data, fn &amp;&amp; data实现了data参数可有可无<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jQuery.event.add(this, type, fn || data, fn &amp;&amp; data);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp; },<br>Bind中对于unload的事件，只能运行一次，其它的就采用默认的注册方式。<br>// 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。<br>// 在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。<br>// 这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。<br>// 如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。<br>&nbsp;&nbsp;&nbsp; one : function(type, data, fn) {<br>&nbsp;&nbsp;&nbsp; &nbsp; var one = jQuery.event.proxy(fn || data, function(event) {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jQuery(this).unbind(event, one);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return (fn || data).apply(this, arguments);/this-&gt;当前的元素<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return this.each(function() {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jQuery.event.add(this, type, one, fn &amp;&amp; data);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; },<br>One与bind基本上差不多，不同的在调用jQuery.event.add时，把注册的事件处理的函数做了一个小小的调整。One调用了jQuery.event.proxy进行了代理传入的事件处理函数。在事件触发调用这个代理的函数时，先把事件从cache中删除，再执行注册的事件函数。这里就是闭包的应用，通过闭包得到fn注册的事件函数的引用。<br>//一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。<br>//这是一个自定义的方法，它为频繁使用的任务提供了一种&#8220;保持在其中&#8221;的状态。<br>&nbsp;//当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，<br>/会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），<br>&nbsp; //如果是，则会继续保持&#8220;悬停&#8221;状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; hover : function(fnOver, fnOut) {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return this.bind('mouseenter', fnOver).bind('mouseleave', fnOut);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; },<br>Hover则是建立在bind的基础之上。<br>//每次点击后依次调用函数。<br>toggle : function(fn) {&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>var args = arguments, i = 1;<br>while (i &lt; args.length)//每个函数分配GUID<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jQuery.event.proxy(fn, args[i++]);//修改后的还在args中<br>return this.click(jQuery.event.proxy(fn, function(event) {//分配GUID&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.lastToggle = (this.lastToggle || 0) % i;//上一个函数&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; event.preventDefault();//阻止缺省动作<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //执行参数中的第几个函数，apply可以采用array-like的参数<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return args[this.lastToggle++].apply(this,arguments)||false;<br>&nbsp;&nbsp;&nbsp; }));<br>&nbsp;&nbsp;&nbsp; },<br>Toggle中参数可以是多个fn。先把它们代码生成UUID。之后调用click的方法来注册再次进行代理的callback。这个函数在事件触发时运行，它先计算上一次是执行了参数中的那个函数。之后阻止缺省动作。之后找到下一个函数运行。<br>//为jquery对象增加常用的事件方法<br>jQuery.each(<br>&nbsp;&nbsp;&nbsp; ("blur,focus,load,resize,scroll,unload,click,dblclick,"<br>&nbsp;&nbsp;&nbsp; + "mousedown,mouseup,mousemove,mouseover,mouseout,change,select," <br>+ "submit,keydown,keypress,keyup,error").split(","), <br>function(i, name) {jQuery.fn[name] = function(fn) {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return fn ? this.bind(name, fn) : this.trigger(name);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; };});<br>Jquery增加了一个常用的事件处理方法，包含上面调用的click。这里可以看出这里还是调用bind进行注册。当然这里还可以通过程序实现去触发事件。<br><br>上面的众多方法都是注册事件，其最终都落在jQuery.event.add();来完成注册的功能。如果我们采用Dom0或DOM1的事件方法，我们会采用elem.onclick=function(){}来为元素的某一种事件来注册处理函数。这个最大的缺点就是每个一个事件只是一个处理函数。在dom1的方式中有改进，我们可以采用elem.addEventListener(type, handle, false)为元素的事件注册多个处理函数。<br>这样的处理方式还不是很完美，如果我们只这个事件运行一次就有点麻烦了。我们要在事件的处理函数中最后进行elem.removeEventListener来取消事件的监听。这样做可能会有事务上的问题。如果第一个事件处理函数在没有取消事件监听之前，就再次触发了怎么办？<br>还有采用浏览器的方式，它不支持自定义事件的注册和处理，还不能为多个事件注册同一个处理函数。<br>jQuery.event = {// add 事件到一个元素上。<br>add : function(elem, types, handler, data) {<br>if (elem.nodeType == 3 || elem.nodeType == 8) return;// 空白节点或注释<br>&nbsp;&nbsp;&nbsp; // IE不能传入window,先复制一下。<br>if (jQuery.browser.msie &amp;&amp; elem.setInterval) elem = window;<br>// 为handler分配一个全局唯一的Id<br>if (!handler.guid)&nbsp;&nbsp;&nbsp; handler.guid = this.guid++;<br>// 把data附到handler.data中<br>if (data != undefined) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ①<br>var fn = handler;<br>handler =this.proxy(fn,function(){return fn.apply(this,arguments);});<br>handler.data = data;<br>&nbsp;&nbsp;&nbsp; }<br>// 初始化元素的events。如果没有取到events中值，就初始化data: {}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ②<br>var events =jQuery.data(elem,"events")||jQuery.data(elem,"events",{}),<br>// 如果没有取到handle中值，就初始化data: function() {....}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ③<br>handle = jQuery.data(elem, "handle")|| jQuery.data(elem, "handle",<br>function() {//处理一个触发器的第二个事件和当page已经unload之后调用一个事件。<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (typeof jQuery != "undefined"&amp;&amp; !jQuery.event.triggered)<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return jQuery.event.handle.apply(//callee.elem=handle.elem<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arguments.callee.elem, arguments);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br>// 增加elem做为handle属性，防止IE由于没有本地Event而内存泄露。<br>handle.elem = elem;<br>// 处理采用空格分隔多个事件名，如jQuery(...).bind("mouseover mouseout", fn);<br>jQuery.each(types.split(/\s+/), function(index, type) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ④<br>&nbsp;&nbsp;&nbsp; // 命名空间的事件，一般不会用到。<br>var parts = type.split(".");type = parts[0];handler.type = parts[1];<br>&nbsp;&nbsp;&nbsp; // 捆绑到本元素type事件的所有处理函数<br>var handlers = events[type];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⑤<br>if (!handlers) {// 没有找到处理函数列表就初始化事件队列<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; handlers = events[type] = {};<br>&nbsp;&nbsp;&nbsp; // 如果type不是ready，或ready的setup执行返回false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⑥<br>if (!jQuery.event.special[type]|| jQuery.event.special[type].setup<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; .call(elem, data) === false) {// 调用系统的事件函数来注册事件<br>if(elem.addEventListener)elem.addEventListener(type,handle,false);<br>else if (elem.attachEvent)elem.attachEvent("on" + type, handle);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; }<br>}<br>// 把处理器的id和handler形式属性对的形式保存在handlers列表中，<br>// 也存在events[type][handler.guid]中。<br>handlers[handler.guid] = handler;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⑦<br>// 全局缓存这个事件的使用标识<br>jQuery.event.global[type] = true;<br>});<br><br>&nbsp;&nbsp;&nbsp; elem = null; // 防止IE内存泄露。<br>&nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp; guid : 1,<br>&nbsp;&nbsp;&nbsp; global : {},<br>jQuery.event.add通过jQuery.data把事件相关的事件名和处理函数有机有序地组合起存放在jQuery.cache中与该元素对应的空间里。我们就一个例子分析一下add的过程中：假如我们招待下面jQuery(e1).bind("mouseover mouseout", fn0);jQuery(e1).bind("mouseover mouseout", fn1)的语句。<br>在jQuery(e1).bind("mouseover mouseout", fn0);时，②③都不可能从cache取到数，先初始化。此时的cache:{e1_uuid:{events:{},handle:fn}}。接着在⑤会为mouseover mouseout名初始化。此时的cache: {e1_uuid:{events:{ mouseover:{}, mouseout:{}},handle:fn}}。在⑥处向浏览器的事件中注册处理函数。接着⑦会把处理函数到事件名中。此时的cache: {e1_uuid:{events:{mouseover:{fn0_uuid:fn0},mouseout:{ fn0_uuid:fn0}},handle:fn}}。这里可以看出为采用proxy为函数生成uuid的作用了。<br>在jQuery(e1).bind("mouseover mouseout", fn1)时，②③都从cache取到数据{e1_uuid:{events:{mouseover:{fn0_uuid:fn0},mouseout:{ fn0_uuid:fn0}},接着在⑤取到mouseover:{fn0_uuid:fn0},mouseout:{ fn0_uuid:fn0}的引用。接着⑦会把处理函数注册到事件名中。此时的cache: {e1_uuid:{events:{mouseover:{fn0_uuid:fn0, fn1_uuid:fn1,},mouseout:{ fn0_uuid:fn0, fn1_uuid:fn1}},handle:fn}}。<br>jQuery.event.add很重要的任务就是把注册的事件函数有序地存放起来。以便remove和fire事件的函数能找到。<br>//{elem_uuid_1:{events:{mouseover:{fn_uuid:fn1,fn_uuid1:fn2},<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //mouseout:{fn_uuid:fn1,fn_uuid1:fn2}},handle:fn}}<br><img src ="http://www.cnitblog.com/asfman/aggbug/50108.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2008-10-11 19:38 <a href="http://www.cnitblog.com/asfman/articles/50108.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>jquery event trigger 分析</title><link>http://www.cnitblog.com/asfman/articles/50107.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Sat, 11 Oct 2008 11:36:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/50107.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/50107.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/50107.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/50107.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/50107.html</trackback:ping><description><![CDATA[prk/彭仁夔&nbsp; 08-08-26<br>注册了事件，如onclick。那么当用户点击这个元素时，就会自动触发这个事件的已经注册的事件处理函数。但是我们有的时候要采用程序来模拟事件的触发就得采用强迫触发某个事件。在IE中我们可以采用.fireEvent()来实现。如：&lt;form onsubmit="a()" &gt;中，如果button的form.submit()的方式提交表单，是不会主动触发onsumbit事件的，如果必须的话，就要在submit前$(&#8220;:form&#8221;)[0].fireEvent("onsubmit&#8221;,)，这样就会触发该事件。<br>在mozilla中有三个步骤：&nbsp;&nbsp;&nbsp; var&nbsp;&nbsp; evt&nbsp;&nbsp; =&nbsp;&nbsp; document.createEvent('HTMLEvents');<br>&nbsp;evt.initEvent('change',true,true);&nbsp;&nbsp;&nbsp; t.dispatchEvent(&nbsp; evt );<br>在prototype是采用这样的方式来实现的。那么jquery中呢，它的实现方式有一点不一样。<br>trigger : function(type, data, fn) {<br>return this.each(function() {<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;jQuery.event.trigger(type, data, this, true, fn);<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});&nbsp;&nbsp; &nbsp;},<br>Trigger有三个参数，data参数是为了注册的事件函数提供了实传。如果data[0]中preventDefault存在，data[0]就可以做为用户自定义的包裹事件的空间。Fn是可以为事件提供一个即时即用的事件处理方法。也就是在没有注册事件的情况下也可以通过传入处理函数来处理事件。如果已经注册了，那就是在原来的事件处理函数之后执行。<br>&nbsp; &nbsp;&nbsp; &nbsp;//这个方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作.<br>triggerHandler : function(type, data, fn) {<br>return this[0]&amp;&amp; jQuery.event.trigger(type,data,this[0],false,fn);<br>&nbsp;&nbsp; &nbsp;},<br>triggerHandle通过把jQuery.event.trigger的donative参数设为false，来阻止执行浏览器默处理方法。它与trigger不现的一点，还在于它只是处理jquery对象的第一个元素。<br>上面两个方法都调用了jQuery.event.trigger来完成任务：<br>trigger : function(type, data, elem, donative, extra) {<br>&nbsp;&nbsp; &nbsp;data = jQuery.makeArray(data);//data可以为{xx:yy}<br>&nbsp;&nbsp;&nbsp; //支持getData!这样的形式，exclusive = true表现会对add的注册的<br>&nbsp;&nbsp; &nbsp;//事件的所有函数进行命名空间的分种类的来执行。<br>if (type.indexOf("!") &gt;= 0) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ①<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;type = type.slice(0, -1);var exclusive = true;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br>if (!elem) {// 处理全局的fire事件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ②<br>&nbsp;&nbsp; &nbsp;if (this.global[type])<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;jQuery.each(jQuery.cache, function() {<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; // 从cache中找到所有注册该事件的元素，触发改事件的处理函数<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if (this.events &amp;&amp; this.events[type])<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;jQuery.event.trigger(type, data, this.handle.elem);<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});<br>&nbsp;&nbsp; &nbsp;} else {// 处理单个元素事件的fire事件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ③<br>&nbsp;&nbsp; &nbsp; if (elem.nodeType == 3 || elem.nodeType == 8)&nbsp;&nbsp; &nbsp;return undefined;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var val, ret, fn = jQuery.isFunction(elem[type] || null),<br>&nbsp;&nbsp; &nbsp; // 如果data参数传进入的不是浏览器的event对象的话，event变量为true.<br>&nbsp;&nbsp; &nbsp;//如果data参数本身是娄组，那么第一个元素不是浏览器的event对象时为true.<br>&nbsp;&nbsp; &nbsp;//对于event为true。即没有event传进入，先构建一个伪造的event对象存在data[0]。<br>&nbsp;&nbsp; &nbsp;event = !data[0] || !data[0].preventDefault;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;// 在没有传入event对象的情况下，构建伪造event对象。<br>&nbsp;&nbsp; &nbsp;if (event) {//存到数组中的第一个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ④<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;data.unshift( { type : type,target : elem,<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; preventDefault : function() {},stopPropagation : <br>function() {}, timeStamp : now()&nbsp;&nbsp; &nbsp;});<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; data[0][expando] = true; // 不需要修正伪造的event对象<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br>&nbsp;&nbsp; &nbsp; data[0].type = type; //防止事件名出错<br>&nbsp;&nbsp; &nbsp;//表现会进行事件注册函数的分类（命名空间）执行。不是所有的。<br>&nbsp;&nbsp; &nbsp; if (exclusive) data[0].exclusive = true;<br><br>&nbsp;&nbsp; &nbsp;//与prototype等传统的处理方式不一样，没有采用fireEvent来<br>&nbsp;&nbsp; &nbsp;//来fire通过注册到浏览器事件中的事件处理方法。<br>&nbsp;&nbsp; &nbsp;//这里分了三步，先fire通过jQuery.event.add来注册的事件，这个事件<br>&nbsp;&nbsp; &nbsp;//有可能是自定义的事件（没有注册到浏览器事件中）。<br>&nbsp;&nbsp; &nbsp;//第二步是fire通过elem.onclick方式注册的事件的本地处理函数<br>&nbsp;&nbsp;&nbsp;&nbsp; //第三步是fire默认的事件处理方式（在本地的onclick的方式注册<br>&nbsp;&nbsp; &nbsp; //不存在的情况下）。&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;<br>// 这里是触发通过jQuery.event.add来注册的事件，<br>&nbsp;&nbsp; &nbsp;&nbsp; var handle = jQuery.data(elem, "handle");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⑤<br>&nbsp;&nbsp; &nbsp;&nbsp; if (handle)val = handle.apply(elem, data); //这里data分成多个参数<br>&nbsp;&nbsp; &nbsp;//处理触发通过elem.onfoo=function()这样的注册本地处理方法，<br>&nbsp;&nbsp; &nbsp;//但是是对于links 's .click()不触发,这个不会执行通过addEvent<br>&nbsp;&nbsp; &nbsp;//方式注册的事件处理方式。&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;if ((!fn || (jQuery.nodeName(elem, 'a') &amp;&amp; type == "click")) ⑥<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&amp;&amp; elem["on"+ type]&amp;&amp; elem["on"+type].apply(elem,data) === false)<br>&nbsp;&nbsp; &nbsp;&nbsp; val = false;<br>//额外的函数参数的开始几个是通过data给定的。这里会把伪造加上的event给去掉。<br>//它的最后一个参数是一系列的事件处理函数返回的结果，一般为bool值<br>//这个函数可以根据这个结果来处理一个扫尾的工作。<br>&nbsp;&nbsp; &nbsp;if (event)&nbsp;&nbsp; &nbsp;data.shift();<br>// 处理触发extra给定的函数处理。<br>&nbsp;&nbsp; &nbsp;if (extra &amp;&amp; jQuery.isFunction(extra)) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⑦<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; ret = extra.apply(elem, val == null ? data : data.concat(val));<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //如果这个函数有返回值，那么trigger的返回值就是它的返回值<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //没有的话就是串连的事件处理函数的最后一个返回值。一般为bool<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if (ret !== undefined)&nbsp;&nbsp; &nbsp;val = ret;<br>&nbsp;&nbsp; &nbsp; }<br>&nbsp;&nbsp; &nbsp;// 触发默认本地事件方法，它是在没有如.onclick注册事件<br>&nbsp;&nbsp; &nbsp;//加上前面的执行事件处理函数返回值都不为false的情况下，才会执行。<br>&nbsp;&nbsp; &nbsp;//它还可以通donative来控制是否执行。<br>&nbsp;&nbsp; &nbsp;//如form中可以采用this.submit()来提交form.<br>&nbsp;&nbsp; &nbsp;if (fn &amp;&amp; donative !== false &amp;&amp; val !== false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⑧<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&amp;&amp; !(jQuery.nodeName(elem, 'a') &amp;&amp; type == "click")) {<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;this.triggered = true;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;try {elem[type]();&nbsp;&nbsp; &nbsp;//对于一些hidden的元素，IE会报错<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} catch (e) {}<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br>&nbsp;&nbsp; &nbsp;this.triggered = false;<br>&nbsp;&nbsp; &nbsp;}<br>return val;<br>},<br>Jquery的fire事件的方法与prototype中实现是完全不一样的。Ext、YUI没有提供强迫触发事件的方法。对于一般的思维，程序来触发浏览器的事件就应该采用fireEvent或dispatchEvent方法来运行。<br>但是jquery采用一种不同的方法。对于通过jquery.event.add来注册的事件（不管是自定义的还是注册到浏览器事件），它保存在一个与元素及事件名相对应的cache中。在浏览器的触发中，这个是没有什么作用。但是它是为了通过等程序来强迫触发时，从cache中取到对应的事件处理函数。这个时候就抛开了浏览器的事件。在这里还可以执行一些自定义的事件函数。如⑤处。<br>对于通过html的标签中如click或elem.onclick=function(){}形式注册的事件函数。在⑥处它采用执行元素的如onclick形式的回调函数就可以。通过这种dom0的方式只能注册一个函数。<br>有的时候，如果没有onclick这样的事件处理函数，浏览器会执行默认的处理函数。如form.submit()。⑧处可以看出对于这样的默认的事件处理，还可以通过参数donative来控制。<br>程序手动强迫触发事件，有一点问题就是event是怎么生成，就是没有浏览器生成event传入到函数中。Prototype采用了是新生成的dataavailable的事件。这样的事件也没有什么作用。Jquery也采用fake的方式伪造一个一个事件，如④，它比prototype的事件好处在于它能通过trigger的函数的参数来传入需要的event。Prototype则不能。<br>通过上面的分析，隐隐可以看出Jquery是通过模拟浏览器的触发事件的执行过程来构建这个trigger的函数的。先执行dom1方式（addEvent）注册的事件，再执行dom0方式注册的事件，最后看看要不要执行默认的事件处理。<br>在⑦处，我们可以看出trigger还可能通过传入回调函数和参数来完成对执行的事件处理函数的结果进行判断处理，形成新结果通过trigger的函数返回。这在有的时候是很有用的。<br>除了这些，它还能对于事件的处理函数进行分类（namespace），可以在合适的时候调用事件的不同分类的的处理函数（通过jquery.event.add来注册）。这个分类的处理在handle实现。<br>&nbsp;&nbsp; &nbsp;handle : function(event) {<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;// 返回 undefined or false<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var val, ret, namespace, all, handlers;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //修改了传入的参数，这里是引用。<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event = arguments[0] = jQuery.event.fix(event || window.event);<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;// 命名空间处理<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;namespace = event.type.split(".");<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event.type = namespace[0];<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;namespace = namespace[1];<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;// all = true 表明任何 handler,namespace不存在，同时<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//event.exclusive不存在或为假时，all=true.<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;all = !namespace &amp;&amp; !event.exclusive;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;// 找到元素的events中缓存的事件名的处理函数列表<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;handlers = (jQuery.data(this, "events") || {})[event.type];<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;for (var j in handlers) {// 每个处理函数执行<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var handler = handlers[j];<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;// Filter the functions by class<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if (all || handler.type == namespace) {<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;// 传入引用，为了之后删除它们<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event.handler = handler;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event.data = handler.data;//add的时候加上的<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;ret = handler.apply(this, arguments);// 执行事件处理函数<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; if (val !== false)<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; val = ret;// 只要有一个处理函数返回false，本函数就返回false.<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if (ret === false) {// 不执行浏览器默认的动作<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event.preventDefault();<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event.stopPropagation();<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return val;&nbsp;&nbsp; &nbsp;},<br>handle的主要功能是就是分类且有序地执行事件的所有的注册的处理函数。<img src ="http://www.cnitblog.com/asfman/aggbug/50107.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2008-10-11 19:36 <a href="http://www.cnitblog.com/asfman/articles/50107.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>selectors</title><link>http://www.cnitblog.com/asfman/articles/37848.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Tue, 18 Dec 2007 14:44:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/37848.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/37848.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/37848.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/37848.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/37848.html</trackback:ping><description><![CDATA[E&gt;F表示匹配所有子元素，所有儿子<br>E F表示匹配所有子孙<br>E+F如果一个元素 E 直接在元素 F 之前，则匹配元素 F div+p p是div的直接兄弟<br>E~F E的所有兄弟F
<img src ="http://www.cnitblog.com/asfman/aggbug/37848.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2007-12-18 22:44 <a href="http://www.cnitblog.com/asfman/articles/37848.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>load news</title><link>http://www.cnitblog.com/asfman/articles/37734.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Sat, 15 Dec 2007 08:19:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/37734.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/37734.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/37734.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/37734.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/37734.html</trackback:ping><description><![CDATA[<p>$("#test").click(GetNews);<br>function GetNews() <br>{ <br>　$(this).html("Loading News......"); <br>　$.ajax({ <br>　type:"post", <br>　<a href="http://www.cnitblog.com/asfman/admin/%22load.htm">url:"load.htm</a>", <br>　dataType:"html", <br>　data:"", <br>&nbsp; ifModified:true,<br>　success:function(result) <br>　{<br>　&nbsp;$("#test").html(result); <br>　} <br>}</p>
<img src ="http://www.cnitblog.com/asfman/aggbug/37734.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2007-12-15 16:19 <a href="http://www.cnitblog.com/asfman/articles/37734.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>关于泄漏</title><link>http://www.cnitblog.com/asfman/articles/37683.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Fri, 14 Dec 2007 00:54:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/37683.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/37683.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/37683.html#Feedback</comments><slash:comments>2</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/37683.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/37683.html</trackback:ping><description><![CDATA[<p>经ie7测试 <br>function myButton()<br>{<br>&nbsp;&nbsp;&nbsp; var container=document.createElement("button");<br>&nbsp;&nbsp;&nbsp; /*container.style......*/<br>&nbsp;&nbsp;&nbsp; var text=document.createElement("button");<br>&nbsp;&nbsp;&nbsp; /*text.style......text.innerText......*/</p>
<p>&nbsp;&nbsp;&nbsp; text.onclick=EventBuilder(container);<br>&nbsp;&nbsp;&nbsp; //在这里无论是上面这种写法还是直接写function(){}结果占用内存都一样<br>&nbsp;&nbsp;&nbsp; //只有直接引用外部函数如text.onclick=EventBuilder才能释放button对象,减少内存<br>&nbsp;&nbsp;&nbsp; document.body.appendChild(container);<br>&nbsp;&nbsp;&nbsp; document.body.appendChild(text);<br>&nbsp;&nbsp;&nbsp; //如果onmouseover中我没有用到container 当然可以用 text=null container=null来打破循环引用<br>&nbsp;&nbsp;&nbsp; //经测试用null打不破循环<br>} </p>
<p>function EventBuilder(container)<br>{<br>&nbsp;&nbsp;&nbsp; return function(e)<br>&nbsp;&nbsp;&nbsp; {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(container)//这里container可访问<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text=this;//用this访问自身<br>&nbsp;&nbsp;&nbsp; }<br>} <br>for(var i =0;i&lt;5000;i++)<br>myButton()<br>//conclusion<br>闭包使返回的内部函数持有私有变量，所以此私有变量持有的dom对象不能被回收。<br>（被回收的条件：1。 没有context 2。没有被引用 ）<br>不内部写function。把内部变量传递给外部函数闭包返回不能解决问题。<br>所以唯一的方法是直接引用外部函数，如text.onclick = outFunc;</p>
<img src ="http://www.cnitblog.com/asfman/aggbug/37683.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2007-12-14 08:54 <a href="http://www.cnitblog.com/asfman/articles/37683.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>css selector</title><link>http://www.cnitblog.com/asfman/articles/37659.html</link><dc:creator>汪杰</dc:creator><author>汪杰</author><pubDate>Thu, 13 Dec 2007 02:33:00 GMT</pubDate><guid>http://www.cnitblog.com/asfman/articles/37659.html</guid><wfw:comment>http://www.cnitblog.com/asfman/comments/37659.html</wfw:comment><comments>http://www.cnitblog.com/asfman/articles/37659.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/asfman/comments/commentRss/37659.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/asfman/services/trackbacks/37659.html</trackback:ping><description><![CDATA[<h2>CSS Selectors </h2>
<p>jQuery has full CSS 1-2 support and partial CSS 3 support, along with some custom CSS-like functionality (and XPath), as part of it's expression. </p>
<p>For info on how CSS works feel free to read the various links: </p>
<ul lastCheckbox="null">
    <li><a class="external text" title=http://www.w3.org/TR/REC-CSS1#basic-concepts href="http://www.w3.org/TR/REC-CSS1#basic-concepts"><u><font color=#0000ff>CSS 1</font></u></a>
    <li><a class="external text" title=http://www.w3.org/TR/REC-CSS2/selector.html href="http://www.w3.org/TR/REC-CSS2/selector.html"><u><font color=#0000ff>CSS 2</font></u></a>
    <li><a class="external text" title=http://www.w3.org/TR/2005/WD-css3-selectors-20051215/ href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/"><u><font color=#0000ff>CSS 3</font></u></a> </li>
</ul>
<p>What follows is a list of supported CSS Selector expressions. </p>
<ul lastCheckbox="null">
    <li><strong>*</strong> any element
    <li><strong>E</strong> an element of type E
    <li><strong>E:nth-child(n)</strong> an E element, the n-th child of its parent
    <li><strong>E:first-child</strong> an E element, first child of its parent
    <li><strong>E:last-child</strong> an E element, last child of its parent
    <li><strong>E:only-child</strong> an E element, only child of its parent
    <li><strong>E:empty</strong> an E element that has no children (including text nodes)
    <li><strong>E:enabled</strong> a user interface element E which is not disabled
    <li><strong>E:disabled</strong> a user interface element E which is disabled
    <li><strong>E:checked</strong> a user interface element E which is checked (for instance a radio-button or checkbox)
    <li><strong>E:selected</strong> a user interface element E which is selected (one or more option elements inside a select) - not in the CSS spec, but nonetheless supported by jQuery
    <li><strong>E.warning</strong> an E element whose class is "warning"
    <li><strong>E#myid</strong> an E element with ID equal to "myid". (Will only match, at most, one element.)
    <li><strong>E:not(s)</strong> an E element that does not match simple selector s
    <li><strong>E F</strong> an F element descendant of an E element
    <li><strong>E &gt; F</strong> an F element child of an E element
    <li><strong>E + F</strong> an F element immediately preceded by an E element
    <li><strong>E ~ F</strong> an F element preceded by an E element
    <li><strong>E,F,G</strong> select all E elements, F elements, and G elements </li>
</ul>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Supported, but different" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=4"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Supported.2C_but_different></a>
<h3>Supported, but different </h3>
<p>All attribute selectors are written like their XPath counter-parts (in that all attributes should begin with an <strong>@</strong> symbol). </p>
<ul lastCheckbox="null">
    <li><strong>E[@foo]</strong> an E element with a "foo" attribute
    <li><strong>E[@foo=bar]</strong> an E element whose "foo" attribute value is exactly equal to "bar"
    <li><strong>E[@foo^=bar]</strong> an E element whose "foo" attribute value begins exactly with the string "bar"
    <li><strong>E[@foo$=bar]</strong> an E element whose "foo" attribute value ends exactly with the string "bar"
    <li><strong>E[@foo*=bar]</strong> an E element whose "foo" attribute value contains the substring "bar"
    <li><strong>E[@foo=bar][@baz=bop]</strong> an E element whose "foo" attribute value is exactly equal to "bar" and whose "baz" attribute is exactly equal to "bop" </li>
</ul>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Not supported" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=5"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Not_supported></a>
<h3>Not supported </h3>
<p>jQuery only supports selectors that actually select DOM elements - everything else is ignored. </p>
<ul lastCheckbox="null">
    <li><strong>E:link</strong>
    <li><strong>E:visited</strong> an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
    <li><strong>E:active</strong>
    <li><strong>E:hover</strong>
    <li><strong>E:focus</strong> an E element during certain user actions
    <li><strong>E:target</strong> an E element being the target of the referring URI
    <li><strong>E::first-line</strong> the first formatted line of an E element
    <li><strong>E::first-letter</strong> the first formatted letter of an E element
    <li><strong>E::selection</strong> the portion of an E element that is currently selected/highlighted by the user
    <li><strong>E::before</strong> generated content before an E element
    <li><strong>E::after</strong> generated content after an E element </li>
</ul>
<p>jQuery doesn't support the following selectors due to their lack of real-world usefulness: </p>
<ul lastCheckbox="null">
    <li><strong>E:nth-last-child(n)</strong> an E element, the n-th child of its parent, counting from the last one
    <li><strong>E:nth-of-type(n)</strong> an E element, the n-th sibling of its type
    <li><strong>E:nth-last-of-type(n)</strong> an E element, the n-th sibling of its type, counting from the last one
    <li><strong>E:first-of-type</strong> an E element, first sibling of its type
    <li><strong>E:last-of-type</strong> an E element, last sibling of its type
    <li><strong>E:only-of-type</strong> an E element, only sibling of its type
    <li><strong>E:lang(fr)</strong> an element of type E in language "fr"
    <li><strong>E[foo~="test"]</strong> an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "test"
    <li><strong>E[hreflang|="en"]</strong> an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en" </li>
</ul>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Context and Anchoring" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=6"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Context_and_Anchoring></a>
<h3>Context and Anchoring </h3>
<p>In jQuery, unlike real CSS, a selector expression may have a context other than the entire document, for instance with the function <code>$(expr, context)</code>. You can anchor a CSS-like expression to the context root by starting it with one of the selectors <code>&gt;</code>, <code>+</code>, or <code>~</code>. </p>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: XPath Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=7"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=XPath_Selectors></a>
<h2>XPath Selectors </h2>
<p>One of the selector languages that jQuery supports, as a part of its expression language is XPath. jQuery supports basic <a class="external text" title=http://www.w3.org/TR/xpath href="http://www.w3.org/TR/xpath"><u><font color=#0000ff>XPath expressions</font></u></a>, in addition to CSS 1-3. Here are some samples: </p>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Location Paths" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=8"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Location_Paths></a>
<h3>Location Paths </h3>
<ul>
    <li>Relative to the entire HTML document </li>
</ul>
<pre> $("/html/body//p")
$("body//p")
$("p/../div")
</pre>
<ul>
    <li>Relative to the context node <code>this</code> </li>
</ul>
<pre> $("p/*", this)
$("/p//a", this)
</pre>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Supported Axis Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=9"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Supported_Axis_Selectors></a>
<h3>Supported Axis Selectors </h3>
<ul>
    <li><strong>Descendant</strong> Element has a descendant element </li>
</ul>
<pre> $("//div//p")
</pre>
<ul>
    <li><strong>Child</strong> Element has a child element </li>
</ul>
<pre> $("//div/p")
</pre>
<ul>
    <li><strong>Preceding Sibling</strong> Element has an element before it, on the same axes </li>
</ul>
<pre> $("//div ~ form")
</pre>
<ul>
    <li><strong>Parent</strong> Selects the parent element of the element </li>
</ul>
<pre> $("//div/../p")
</pre>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Supported Predicates" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=10"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Supported_Predicates></a>
<h3>Supported Predicates </h3>
<ul>
    <li><strong>[@foo]</strong> Has an attribute of foo </li>
</ul>
<pre> $("//input[@checked]")
</pre>
<ul>
    <li><strong>[@foo='test']</strong> Attribute foo is equal to test </li>
</ul>
<pre> $("//a[@ref='nofollow']")
</pre>
<ul>
    <li><strong>[Nodelist]</strong> Element contains a node list, for example: </li>
</ul>
<pre> $("//div[p]")
$("//div[p/a]")
</pre>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Supported Predicates, but differently" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=11"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Supported_Predicates.2C_but_differently></a>
<h3>Supported Predicates, but differently </h3>
<ul>
    <li><strong>[last()] or [position()=last()]</strong> becomes <strong>:last</strong> </li>
</ul>
<pre> $("p:last")
</pre>
<ul>
    <li><strong>[0] or [position()=0]</strong> becomes <strong>:eq(0) or&nbsp;:first</strong> </li>
</ul>
<pre> $("p:first")
$("p:eq(0)")
</pre>
<ul>
    <li><strong>[position() &lt; 5]</strong> becomes <strong>:lt(5)</strong> </li>
</ul>
<pre> $("p:lt(5)")
</pre>
<ul>
    <li><strong>[position() &gt; 2]</strong> becomes <strong>:gt(2)</strong> </li>
</ul>
<pre> $("p:gt(2)")
</pre>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Custom Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=12"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Custom_Selectors></a>
<h2>Custom Selectors </h2>
<p>jQuery includes some expressions that aren't available in either CSS or XPath, but were found to be very handy, so were included. </p>
<p>The following expressions' syntax is based upon the various CSS selectors, of similar names. </p>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Custom Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=13"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Custom_Selectors_2></a>
<h3>Custom Selectors </h3>
<ul lastCheckbox="null">
    <li><strong>:even</strong> Selects every other (even) element from the matched element set.
    <li><strong>:odd</strong> Selects every other (odd) element from the matched element set.
    <li><strong>:eq(0) and&nbsp;:nth(0)</strong> Selects the Nth element from the matched element set
    <li><strong>:gt(N)</strong> Selects all matched elements whose index is greater than N.
    <li><strong>:lt(N)</strong> Selects all matched elements whose index is less than N.
    <li><strong>:first</strong> Equivalent to <strong>:eq(0)</strong>
    <li><strong>:last</strong> Selects the last matched element.
    <li><strong>:parent</strong> Selects all elements which have child elements (including text).
    <li><strong>:contains('test')</strong> Selects all elements which contain the specified text.
    <li><strong>:visible</strong> Selects all visible elements (this includes items that have a display of block or inline, a visibility of visible, and aren't form elements of type hidden)
    <li><strong>:hidden</strong> Selects all hidden elements (this includes items that have a display of none, or a visibility of hidden, or are form elements of type hidden) </li>
</ul>
<p>Some examples: </p>
<pre> $("p:first").css("fontWeight","bold");
$("div:hidden").show();
$("/div:contains('test')", this).hide();
</pre>
<div class=editsection style="FLOAT: right; MARGIN-LEFT: 5px">[<a title="Edit section: Form Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=14"><u><font color=#0000ff>edit</font></u></a>]</div>
<a name=Form_Selectors></a>
<h3>Form Selectors </h3>
<p>There are a few selectors for form elements: </p>
<ul lastCheckbox="null">
    <li><strong>:input</strong> Selects all form elements (input, select, textarea, button).
    <li><strong>:text</strong> Selects all text fields (type="text").
    <li><strong>:password</strong> Selects all password fields (type="password").
    <li><strong>:radio</strong> Selects all radio fields (type="radio").
    <li><strong>:checkbox</strong> Selects all checkbox fields (type="checkbox").
    <li><strong>:submit</strong> Selects all submit buttons (type="submit").
    <li><strong>:image</strong> Selects all form images (type="image").
    <li><strong>:reset</strong> Selects all reset buttons (type="reset").
    <li><strong>:button</strong> Selects all other buttons (type="button").
    <li><strong>:file</strong> Selects all &lt;input type="file"&gt;. </li>
</ul>
<p>Also available is <strong>:hidden</strong>, see the description above for details. </p>
<p>It is recommended to provide a context when using the above: </p>
<pre> $('#myForm&nbsp;:input')
</pre>
<p>Or, if you have already a reference to your form: </p>
<pre> $('input:radio', myForm)
</pre>
<p>This would select all input elements of type radio inside myForm. Using&nbsp;:radio is mostly the same as [@type=radio], but should be slightly faster. Good to know when working with large forms</p>
<img src ="http://www.cnitblog.com/asfman/aggbug/37659.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/asfman/" target="_blank">汪杰</a> 2007-12-13 10:33 <a href="http://www.cnitblog.com/asfman/articles/37659.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>