50个必备的实用jQuery代码段（转载）

雨点打透心脏的1/2处 2022-05-16 05:08 126阅读 0赞

**0. 如何创建嵌套的过滤器：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>//允许你减少集合中的匹配元素的过滤器，</code> <code>//只剩下那些与给定的选择器匹配的部分。在这种情况下，</code> <code>//查询删除了任何没（:not）有（:has）</code> <code>//包含class为“selected”（.selected）的子节点。</code> <code>.filter(</code><code>":not(:has(.selected))"</code><code>)</code> </td> 
 </tr> 
 </tbody> 
</table>

**1. 如何重用元素搜索**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>var</code> <code>allItems = $(</code><code>"div.item"</code><code>);</code> <code>var</code> <code>keepList = $(</code><code>"div#container1 div.item"</code><code>);</code> <code>//现在你可以继续使用这些jQuery对象来工作了。例如，</code> <code>//基于复选框裁剪“keep list”，复选框的名称</code> <code>//符合</code> <code>&lt; DIV &gt;class names:</code> <code>$(formToLookAt + </code><code>" input:checked"</code><code>).each(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>keepList = keepList.filter(</code><code>"."</code> <code>+ $(</code><code>this</code><code>).attr(</code><code>"name"</code><code>));</code> <code>});</code> <code>&lt; /DIV&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**2. 任何使用has()来检查某个元素是否包含某个类或是元素：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>//jQuery 1.4.*包含了对这一has方法的支持。该方法找出</code> <code>//某个元素是否包含了其他另一个元素类或是其他任何的</code> <code>//你正在查找并要在其之上进行操作的东东。</code> <code>$(</code><code>"input"</code><code>).has(</code><code>".email"</code><code>).addClass(</code><code>"email_icon"</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**3. 如何使用jQuery来切换样式表**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。</code> <code>$(</code><code>'link[media='</code><code>screen</code><code>']'</code><code>).attr(</code><code>'href'</code><code>, </code><code>'Alternative.css'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**4. 如何限制选择范围（基于优化目的）：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>//尽可能使用标签名来作为类名的前缀，</code> <code>//这样jQuery就不需要花费更多的时间来搜索</code> <code>//你想要的元素。还要记住的一点是，</code> <code>//针对于你的页面上的元素的操作越具体化，</code> <code>//就越能降低执行和搜索的时间。</code> <code>var</code> <code>in_stock = $(</code><code>'#shopping_cart_items input.is_in_stock'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>&lt;</code><code>ul</code> <code>id</code><code>=</code><code>"shopping_cart_items"</code><code>&gt;</code> <code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>value</code><code>=</code><code>"Item-X"</code> <code>name</code><code>=</code><code>"item"</code> <code>class</code><code>=</code><code>"is_in_stock"</code> <code>/&gt; Item X&lt;/</code><code>li</code><code>&gt;</code> <code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>value</code><code>=</code><code>"Item-Y"</code> <code>name</code><code>=</code><code>"item"</code> <code>class</code><code>=</code><code>"3-5_days"</code> <code>/&gt; Item Y&lt;/</code><code>li</code><code>&gt;</code> <code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>value</code><code>=</code><code>"Item-Z"</code> <code>name</code><code>=</code><code>"item"</code> <code>class</code><code>=</code><code>"unknown"</code> <code>/&gt; Item Z&lt;/</code><code>li</code><code>&gt;</code> <code>&lt;/</code><code>ul</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**5. 如何正确地使用ToggleClass：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>//切换（toggle）类允许你根据某个类的</code> <code>//是否存在来添加或是删除该类。</code> <code>//这种情况下有些开发者使用：</code> <code>a.hasClass(</code><code>'blueButton'</code><code>) ? a.removeClass(</code><code>'blueButton'</code><code>) : a.addClass(</code><code>'blueButton'</code><code>);</code> <code>//toggleClass允许你使用下面的语句来很容易地做到这一点</code> <code>a.toggleClass(</code><code>'blueButton'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**6. 如何设置IE特有的功能：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>if</code> <code>($.browser.msie) { </code> <code>// Internet Explorer就是个虐待狂</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**7. 如何使用jQuery来代替一个元素：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>$(</code><code>'#thatdiv'</code><code>).replaceWith(</code><code>'fnuh'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**8. 如何验证某个元素是否为空：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>if</code> <code>($(</code><code>'#keks'</code><code>).html()) { </code> <code>//什么都没有找到;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**9. 如何从一个未排序的集合中找出某个元素的索引号**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>$(</code><code>"ul &gt; li"</code><code>).click(</code><code>function</code> <code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>index = $(</code><code>this</code><code>).prevAll().length;</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**10. 如何把函数绑定到事件上：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>$(</code><code>'#foo'</code><code>).bind(</code><code>'click'</code><code>, </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>'User clicked on "foo."'</code><code>);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**11. 如何追加或是添加html到元素中：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>$(</code><code>'#lal'</code><code>).append(</code><code>'sometext'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**12. 在创建元素时，如何使用对象字面量（literal）来定义属性**

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>var</code> <code>e = $(</code><code>""</code><code>, { href: </code><code>"#"</code><code>, class: </code><code>"a-class another-class"</code><code>, title: </code><code>"..."</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**13. 如何使用多个属性来进行过滤**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>//在使用许多相类似的有着不同类型的input元素时，</code> <code>//这种基于精确度的方法很有用</code> <code>var</code> <code>elements = $(</code><code>'#someid input[type=sometype][value=somevalue]'</code><code>).get();</code> </td> 
 </tr> 
 </tbody> 
</table>

**14. 如何使用jQuery来预加载图像：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>jQuery.preloadImages = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(</code><code>var</code> <code>i = 0; i &lt; arguments.length; i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"&lt;img /&gt;"</code><code>).attr(</code><code>'src'</code><code>, arguments[i]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>};</code> <code>//用法</code> <code>$.preloadImages(</code><code>'image1.gif'</code><code>, </code><code>'/path/to/image2.png'</code><code>, </code><code>'some/image3.jpg'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**15. 如何为任何与选择器相匹配的元素设置事件处理程序：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>$(</code><code>'button.someClass'</code><code>).live(</code><code>'click'</code><code>, someFunction);</code> <code>//注意，在jQuery 1.4.2中，delegate和undelegate选项</code> <code>//被引入代替live，因为它们提供了更好的上下文支持</code> <code>//例如，就table来说，以前你会用</code> <code>//.live()</code> <code>$(</code><code>"table"</code><code>).each(</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"td"</code><code>, </code><code>this</code><code>).live(</code><code>"hover"</code><code>, </code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>this</code><code>).toggleClass(</code><code>"hover"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>});</code> <code>//现在用</code> <code>$(</code><code>"table"</code><code>).delegate(</code><code>"td"</code><code>, </code><code>"hover"</code><code>, </code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>this</code><code>).toggleClass(</code><code>"hover"</code><code>);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**16. 如何找到一个已经被选中的option元素：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>$(</code><code>'#someElement'</code><code>).find(</code><code>'option:selected'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**17. 如何隐藏一个包含了某个值文本的元素：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>$(</code><code>"p.value:contains('thetextvalue')"</code><code>).hide();</code> </td> 
 </tr> 
 </tbody> 
</table>

**18. 如何自动滚动到页面中的某区域**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>jQuery.fn.autoscroll = </code><code>function</code><code>(selector) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>'html,body'</code><code>).animate(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{scrollTop: $(selector).offset().top},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>500</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>}</code> <code>//然后像这样来滚动到你希望去到的class/area上。</code> <code>$(</code><code>'.area_name'</code><code>).autoscroll();</code> </td> 
 </tr> 
 </tbody> 
</table>

**19. 如何检测各种浏览器：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>检测Safari (</code><code>if</code><code>( $.browser.safari)),</code> <code>检测IE6及之后版本 (</code><code>if</code> <code>($.browser.msie &amp;&amp; $.browser.version &gt; 6 )),</code> <code>检测IE6及之前版本 (</code><code>if</code> <code>($.browser.msie &amp;&amp; $.browser.version &lt;= 6 )),</code> <code>检测FireFox 2及之后版本 (</code><code>if</code> <code>($.browser.mozilla &amp;&amp; $.browser.version &gt;= </code><code>'1.8'</code> <code>))</code> </td> 
 </tr> 
 </tbody> 
</table>

**20. 如何替换串中的词**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>var</code> <code>el = $(</code><code>'#id'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>el.html(el.html().replace(/word/ig, </code><code>''</code><code>));</code> </td> 
 </tr> 
 </tbody> 
</table>

### 21. 如何禁用右键单击上下文菜单： ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>$(document).bind(</code><code>'contextmenu'</code><code>,</code><code>function</code><code>(e){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>false</code><code>;</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**22. 如何定义一个定制的选择器**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>$.expr[</code><code>':'</code><code>].mycustomselector = </code><code>function</code><code>(element, index, meta, stack){ </code> <code>// element- 一个DOM元素</code> <code>// index – 栈中的当前循环索引</code> <code>// meta – 有关选择器的元数据</code> <code>// stack – 要循环的所有元素的栈</code> <code>// 如果包含了当前元素就返回true</code> <code>// 如果不包含当前元素就返回false };</code> <code>// 定制选择器的用法：</code> <code>$(</code><code>'.someClasses:test'</code><code>).doSomething();</code> </td> 
 </tr> 
 </tbody> 
</table>

**23. 如何检查某个元素是否存在**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>if</code> <code>($(</code><code>'#someDiv'</code><code>).length) { </code> <code>//万岁！！！它存在……</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**24. 如何使用jQuery来检测右键和左键的鼠标单击两种情况：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>$(</code><code>"#someelement"</code><code>).live(</code><code>'click'</code><code>, </code><code>function</code><code>(e) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>( (!$.browser.msie &amp;&amp; e.button == 0) || ($.browser.msie &amp;&amp; e.button == 1) ) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"Left Mouse Button Clicked"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>if</code><code>(e.button == 2) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"Right Mouse Button Clicked"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**25. 如何显示或是删除input域中的默认值**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>//这段代码展示了在用户未输入值时，</code> <code>//如何在文本类型的input域中保留</code> <code>//一个默认值</code> <code>wap_val = [];</code> <code>$(</code><code>".swap"</code><code>).</code><code>each</code><code>(</code><code>function</code><code>(i){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>wap_val[i] = $(</code><code>this</code><code>).val();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>this</code><code>).focusin(</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>($(</code><code>this</code><code>).val() == swap_val[i]) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>this</code><code>).val(</code><code>""</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}).focusout(</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>($.trim($(</code><code>this</code><code>).val()) == </code><code>""</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>this</code><code>).val(swap_val[i]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;input type=</code><code>"text"</code> <code>value=</code><code>"Enter Username here.."</code> <code>class</code><code>=</code><code>"swap"</code> <code>/&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**26. 如何在一段时间之后自动隐藏或关闭元素（支持1.4版本）：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>//这是1.3.2中我们使用setTimeout来实现的方式</code> <code>setTimeout(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;</code><code>$(</code><code>'.mydiv'</code><code>).hide(</code><code>'blind'</code><code>, {}, 500)</code> <code>}, 5000);</code> <code>//而这是在1.4中可以使用delay()这一功能来实现的方式（这很像是休眠）</code> <code>$(</code><code>".mydiv"</code><code>).delay(5000).hide(</code><code>'blind'</code><code>, {}, 500);</code> </td> 
 </tr> 
 </tbody> 
</table>

**27. 如何把已创建的元素动态地添加到DOM中：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>var</code> <code>newDiv = $(</code><code>''</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>newDiv.attr(</code><code>'id'</code><code>,</code><code>'myNewDiv'</code><code>).appendTo(</code><code>'body'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**28. 如何限制“Text-Area”域中的字符的个数：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </td> 
 <td> <code>jQuery.fn.maxLength = </code><code>function</code><code>(max){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.each(</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>type = </code><code>this</code><code>.tagName.toLowerCase();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>inputType = </code><code>this</code><code>.type? </code><code>this</code><code>.type.toLowerCase() : </code><code>null</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(type == </code><code>"input"</code> <code>&amp;&amp; inputType == </code><code>"text"</code> <code>|| inputType == </code><code>"password"</code><code>){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//Apply the standard maxLength</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.maxLength = max;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>else</code> <code>if</code><code>(type == </code><code>"textarea"</code><code>){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.onkeypress = </code><code>function</code><code>(e){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>ob = e || event;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>keyCode = ob.keyCode;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>hasSelection = document.selection? document.selection.createRange().text.length &gt; 0 : </code><code>this</code><code>.selectionStart != </code><code>this</code><code>.selectionEnd;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>!(</code><code>this</code><code>.value.length &gt;= max &amp;&amp; (keyCode &gt; 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) &amp;&amp; !ob.ctrlKey &amp;&amp; !ob.altKey &amp;&amp; !hasSelection);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.onkeyup = </code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(</code><code>this</code><code>.value.length &gt; max){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.value = </code><code>this</code><code>.value.substring(0,max);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>};</code> <code>//用法</code> <code>$(</code><code>'#mytextarea'</code><code>).maxLength(500);</code> </td> 
 </tr> 
 </tbody> 
</table>

**29. 如何为函数创建一个基本的测试**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>//把测试单独放在模块中</code> <code>module(</code><code>"Module B"</code><code>);</code> <code>test(</code><code>"some other test"</code><code>, </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//指明测试内部预期有多少要运行的断言</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>expect(2);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//一个比较断言，相当于JUnit的assertEquals</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>equals( </code><code>true</code><code>, </code><code>false</code><code>, </code><code>"failing test"</code> <code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>equals( </code><code>true</code><code>, </code><code>true</code><code>, </code><code>"passing test"</code> <code>);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**30. 如何在jQuery中克隆一个元素：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>var</code> <code>cloned = $(</code><code>'#somediv'</code><code>).clone();</code> </td> 
 </tr> 
 </tbody> 
</table>

**31. 在jQuery中如何测试某个元素是否可见**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>if</code><code>($(element).is(</code><code>':visible'</code><code>) == </code><code>'true'</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//该元素是可见的</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**32. 如何把一个元素放在屏幕的中心位置：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>jQuery.fn.center = </code><code>function</code> <code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.css(</code><code>'position'</code><code>,</code><code>'absolute'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.css(</code><code>'top'</code><code>, ( $(window).height() - </code><code>this</code><code>.height() ) / +$(window).scrollTop() + </code><code>'px'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.css(</code><code>'left'</code><code>, ( $(window).width() - </code><code>this</code><code>.width() ) / 2+$(window).scrollLeft() + </code><code>'px'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>;</code> <code>}</code> <code>//这样来使用上面的函数：</code> <code>$(element).center();</code> </td> 
 </tr> 
 </tbody> 
</table>

**33. 如何把有着某个特定名称的所有元素的值都放到一个数组中：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>var</code> <code>arrInputValues = </code><code>new</code> <code>Array();</code> <code>$(</code><code>"input[name='table[]']"</code><code>).each(</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>arrInputValues.push($(</code><code>this</code><code>).val());</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**34. 如何从元素中除去html**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>(</code><code>function</code><code>($) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.fn.stripHtml = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>regexp = /&lt;(</code><code>"[^"</code><code>]*</code><code>"|'[^']*'|[^'"</code><code>&gt;])*&gt;/gi;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.each(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>this</code><code>).html( $(</code><code>this</code><code>).html().replace(regexp,”") );</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>$(</code><code>this</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>})(jQuery);</code> <code>//用法：</code> <code>$(</code><code>'p'</code><code>).stripHtml();</code> </td> 
 </tr> 
 </tbody> 
</table>

**35. 如何使用closest来取得父元素：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>$(</code><code>'#searchBox'</code><code>).closest(</code><code>'div'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**36. 如何使用Firebug和Firefox来记录jQuery事件日志：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>// 允许链式日志记录</code> <code>// 用法：</code> <code>$(</code><code>'#someDiv'</code><code>).hide().log(</code><code>'div hidden'</code><code>).addClass(</code><code>'someClass'</code><code>);</code> <code>jQuery.log = jQuery.fn.log = </code><code>function</code> <code>(msg) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(console){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"%s: %o"</code><code>, msg, </code><code>this</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>;</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

**37. 如何强制在弹出窗口中打开链接：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>jQuery(</code><code>'a.popup'</code><code>).live(</code><code>'click'</code><code>, </code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>newwindow=window.open($(</code><code>this</code><code>).attr(</code><code>'href'</code><code>),</code><code>''</code><code>,</code><code>'height=200,width=150'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(window.focus) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>newwindow.focus();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>false</code><code>;</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**38. 如何强制在新的选项卡中打开链接：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>jQuery(</code><code>'a.newTab'</code><code>).live(</code><code>'click'</code><code>, </code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>newwindow=window.open($(</code><code>this</code><code>).href);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>jQuery(</code><code>this</code><code>).target = </code><code>"_blank"</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>false</code><code>;</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**39. 在jQuery中如何使用.siblings()来选择同辈元素**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>// 不这样做</code> <code>$(</code><code>'#nav li'</code><code>).click(</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>'#nav li'</code><code>).removeClass(</code><code>'active'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>this</code><code>).addClass(</code><code>'active'</code><code>);</code> <code>});</code> <code>//替代做法是</code> <code>$(</code><code>'#nav li'</code><code>).click(</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>this</code><code>).addClass(</code><code>'active'</code><code>).siblings().removeClass(</code><code>'active'</code><code>);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**40. 如何切换页面上的所有复选框：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>var</code> <code>tog = </code><code>false</code><code>;</code> <code>// 或者为true，如果它们在加载时为被选中状态的话</code> <code>$(</code><code>'a'</code><code>).click(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"input[type=checkbox]"</code><code>).attr(</code><code>"checked"</code><code>,!tog);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>tog = !tog;</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**41. 如何基于一些输入文本来过滤一个元素列表：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>//如果元素的值和输入的文本相匹配的话</code> <code>//该元素将被返回</code> <code>$(</code><code>'.someClass'</code><code>).filter(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>$(</code><code>this</code><code>).attr(</code><code>'value'</code><code>) == $(</code><code>'input#someId'</code><code>).val();</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

**42. 如何获得鼠标垫光标位置x和y**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>$(document).ready(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(document).mousemove(</code><code>function</code><code>(e){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(’</code><code>#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**43. 如何把整个的列表元素（List Element，LI）变成可点击的**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>$(</code><code>"ul li"</code><code>).click(</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;</code><code>window.location=$(</code><code>this</code><code>).find(</code><code>"a"</code><code>).attr(</code><code>"href"</code><code>);</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>false</code><code>;</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**44. 如何使用jQuery来解析XML（基本的例子）：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>function</code> <code>parseXml(xml) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//找到每个Tutorial并打印出author</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(xml).find(</code><code>"Tutorial"</code><code>).each(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"#output"</code><code>).append($(</code><code>this</code><code>).attr(</code><code>"author"</code><code>) + </code><code>""</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**45. 如何检查图像是否已经被完全加载进来**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>$(</code><code>'#theImage'</code><code>).attr(</code><code>'src'</code><code>, </code><code>'image.jpg'</code><code>).load(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>'This Image Has Been Loaded'</code><code>);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**46. 如何使用jQuery来为事件指定命名空间：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>//事件可以这样绑定命名空间</code> <code>$(</code><code>'input'</code><code>).bind(</code><code>'blur.validation'</code><code>, </code><code>function</code><code>(e){ </code> <code>// ...</code> <code>});</code> <code>//data方法也接受命名空间</code> <code>$(</code><code>'input'</code><code>).data(</code><code>'validation.isValid'</code><code>, </code><code>true</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**47. 如何检查cookie是否启用**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>var</code> <code>dt = </code><code>new</code> <code>Date();</code> <code>dt.setSeconds(dt.getSeconds() + 60);</code> <code>document.cookie = </code><code>"cookietest=1; expires="</code> <code>+ dt.toGMTString();</code> <code>var</code> <code>cookiesEnabled = document.cookie.indexOf(</code><code>"cookietest="</code><code>) != -1;</code> <code>if</code><code>(!cookiesEnabled) { </code> <code>//没有启用cookie</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**48. 如何让cookie过期：**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>var</code> <code>date = </code><code>new</code> <code>Date();</code> <code>date.setTime(date.getTime() + (x * 60 * 1000));</code> <code>$.cookie(</code><code>'example'</code><code>, </code><code>'foo'</code><code>, { expires: date });</code> </td> 
 </tr> 
 </tbody> 
</table>

**49. 如何使用一个可点击的链接来替换页面中任何的URL**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>$.fn.replaceUrl = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w</code><code>#!:.?+=&amp;%@!\-\/]))?)/gi;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.each(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>this</code><code>).html(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>this</code><code>).html().replace(regexp,</code><code>'&lt;a href="$1"&gt;$1&lt;/a&gt;‘)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return $(this);</code> <code>}</code> <code>//用法　</code> <code>$('</code><code>p').replaceUrl();</code> </td> 
 </tr> 
 </tbody> 
</table>

英文原文: [50 jQuery Snippets That Will Help You Become A Better JavaScript Developer][]

[50 jQuery Snippets That Will Help You Become A Better JavaScript Developer]: http://addyosmani.com/blog/50-jquery-snippets-for-developers/