1、150 个必备的实用 jQuery 代码段(1)2011-08-15 13:29 疯狂小强 我要评论(5) 字号：T | T本文会给你们展示 50 个 jquery 代码片段，这些代码能够给你的 Javascript 项目提供帮助。这些都是我尽量记住的有着最佳性能的代码段，我希望你在这一文章中能找到有帮助的东西。AD： 2013 大数据全球技术峰会低价抢票中本文会给你们展示 50 个 jquery 代码片段，这些代码能够给你的 javascript 项目提供帮助。其中的一些代码段是从 jQuery1.4.2 才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成
2、。这些都是我尽量记住的有着最佳性能的代码段，因此如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西。1. 如何创建嵌套的过滤器：1. /允许你减少集合中的匹配元素的过滤器， 2. /只剩下那些与给定的选择器匹配的部分。在这种情况下， 3. /查询删除了任何没（ :not）有（:has） 4. /包含 class 为“selected”（.selected）的子节点。 5. .filter(“:not(:has(.selected)“) 2. 如何重用元素搜索1. var allItems = $(“div.item“); 2. var k
3、eepList = $(“div#container1 div.item“); 3. /现在你可以继续使用这些 jQuery 对象来工作了。例如， 4. /基于复选框裁剪 “keep list”，复选框的名称 5. /符合 6. class names: 7. $(formToLookAt + “ input:checked“).each(function() 8. keepList = keepList.filter(“.“ + $(this).attr(“name“); 9. ); 10. 23. 任何使用 has()来检查某个元素是否包含某个类或是元素：1. /jQuery 1.4.*包
4、含了对这一 has 方法的支持。该方法找出 2. /某个元素是否包含了其他另一个元素类或是其他任何的 3. /你正在查找并要在其之上进行操作的东东。 4. $(“input“).has(“.email“).addClass(“email_icon“); 4. 如何使用 jQuery 来切换样式表1. /找出你希望切换的媒体类型（media-type ），然后把 href 设置成新的样式表。 2. $(linkmedia=screen).attr(href, Alternative.css); 5. 如何限制选择范围（基于优化目的）：1. /尽可能使用标签名来作为类名的前缀， 2. /这样 jQ
5、uery 就不需要花费更多的时间来搜索 3. /你想要的元素。还要记住的一点是， 4. /针对于你的页面上的元素的操作越具体化， 5. /就越能降低执行和搜索的时间。 6. var in_stock = $(#shopping_cart_items input.is_in_stock); Item XItem YItem Z6. 如何正确地使用 ToggleClass：1. /切换（toggle）类允许你根据某个类的 2. /是否存在来添加或是删除该类。 3. /这种情况下有些开发者使用： 4. a.hasClass(blueButton) ? a.removeClass(blueButton
6、) : a.addClass(blueButton); 5. /toggleClass 允许你使用下面的语句来很容易地做到这一点 6. a.toggleClass(blueButton); 37. 如何设置 IE 特有的功能：1. if ($.browser.msie) 2. / Internet Explorer 就是个虐待狂 3. 8. 如何使用 jQuery 来代替一个元素：1. $(#thatdiv).replaceWith(fnuh); 9. 如何验证某个元素是否为空：1. if ($(#keks).html() 2. /什么都没有找到 ; 3. 10. 如何从一个未排序的集合中找出
7、某个元素的索引号1. $(“ul li“).click(function () 2. var index = $(this).prevAll().length; 3. ); 50 个必备的实用 jQuery 代码段(2)2011-08-15 13:29 疯狂小强 我要评论(5) 字号：T | T本文会给你们展示 50 个 jquery 代码片段，这些代码能够给你的 Javascript 项目提供帮助。这些都是我尽量记住的有着最佳性能的代码段，我希望你在这一文章中能找到有帮助的东西。AD： 2013 大数据全球技术峰会低价抢票中11. 如何把函数绑定到事件上：1. $(#foo).bind(c
8、lick, function() 2. alert(User clicked on “foo.“); 3. ); 412. 如何追加或是添加 html 到元素中：1. $(#lal).append(sometext); 13. 在创建元素时，如何使用对象字面量（literal）来定义属性1. var e = $(“, href: “#“, class: “a-class another-class“, title: “.“ ); 14. 如何使用多个属性来进行过滤1. /在使用许多相类似的有着不同类型的 input 元素时， 2. /这种基于精确度的方法很有用 3. var elements
9、= $(#someid inputtype=sometypevalue=somevalue).get(); 15. 如何使用 jQuery 来预加载图像：1. jQuery.preloadImages = function() 2. for(var i = 0; i “).attr(src, argumentsi); 4. 5. ; 6. /用法 7. $.preloadImages(image1.gif, /path/to/image2.png, some/image3.jpg); 16. 如何为任何与选择器相匹配的元素设置事件处理程序：1. $(button.someClass).live
10、(click, someFunction); 2. /注意，在 jQuery 1.4.2 中，delegate 和 undelegate 选项 3. /被引入代替 live，因为它们提供了更好的上下文支持 4. /例如，就 table 来说，以前你会用 5. /.live() 6. $(“table“).each(function() 7. $(“td“, this).live(“hover“, function() 8. $(this).toggleClass(“hover“); 9. ); 10. ); 511. /现在用 12. $(“table“).delegate(“td“, “ho
11、ver“, function() 13. $(this).toggleClass(“hover“); 14. ); 17. 如何找到一个已经被选中的 option 元素：1. $(#someElement).find(option:selected); 18. 如何隐藏一个包含了某个值文本的元素：1. $(“p.value:contains(thetextvalue)“).hide(); 19. 如果自动滚动到页面中的某区域1. jQuery.fn.autoscroll = function(selector) 2. $(html,body).animate( 3. scrollTop: $(
12、selector).offset().top, 4. 500 5. ; 6. 7. /然后像这样来滚动到你希望去到的 class/area 上。 8. $(.area_name).autoscroll(); 20. 如何检测各种浏览器：1. 检测 Safari (if( $.browser.safari), 2. 检测 IE6 及之后版本 (if ($.browser.msie 2. el.html(el.html().replace(/word/ig, ); 22. 如何禁用右键单击上下文菜单：1. $(document).bind(contextmenu,function(e) 2. re
13、turn false; 3. ); 23. 如何定义一个定制的选择器1. $.expr:.mycustomselector = function(element, index, meta, stack) 2. / element- 一个 DOM 元素 3. / index 栈中的当前循环索引 4. / meta 有关选择器的元数据 5. / stack 要循环的所有元素的栈 6. / 如果包含了当前元素就返回 true 7. / 如果不包含当前元素就返回 false ; 8. / 定制选择器的用法： 9. $(.someClasses:test).doSomething(); 24. 如何检查
14、某个元素是否存在1. if ($(#someDiv).length) 2. /万岁！它存在 3. 25. 如何使用 jQuery 来检测右键和左键的鼠标单击两种情况：1. $(“#someelement“).live(click, function(e) 2. if( (!$.browser.msie 4. else if(e.button = 2) 5. alert(“Right Mouse Button Clicked“); 6. 77. ); 26. 如何显示或是删除 input 域中的默认值1. /这段代码展示了在用户未输入值时， 2. /如何在文本类型的 input 域中保留 3.
15、/一个默认值 4. wap_val = ; 5. $(“.swap“).each(function(i) 6. wap_vali = $(this).val(); 7. $(this).focusin(function() 8. if ($(this).val() = swap_vali) 9. $(this).val(“); 10. 11. ).focusout(function() 12. if ($.trim($(this).val() = “) 13. $(this).val(swap_vali); 14. 15. ); 16. ); 27. 如何在一段时间之后自动隐藏或关闭元素（支持
16、 1.4 版本）：1. /这是 1.3.2 中我们使用 setTimeout 来实现的方式 2. setTimeout(function() 3. $(.mydiv).hide(blind, , 500) 4. , 5000); 5. /而这是在 1.4 中可以使用 delay()这一功能来实现的方式（这很像是休眠） 6. $(“.mydiv“).delay(5000).hide(blind, , 500); 28. 如何把已创建的元素动态地添加到 DOM 中：1. var newDiv = $(); 2. newDiv.attr(id,myNewDiv).appendTo(body); 29
17、. 如何限制 “Text-Area”域中的字符的个数：1. jQuery.fn.maxLength = function(max) 2. this.each(function() 3. var type = this.tagName.toLowerCase(); 84. var inputType = this.type? this.type.toLowerCase() : null; 5. if(type = “input“ 8. 9. else if(type = “textarea“) 10. this.onkeypress = function(e) 11. var ob = e |
18、event; 12. var keyCode = ob.keyCode; 13. var hasSelection = document.selection? document.selection.createRange().text.length 0 : this.selectionStart != this.selectionEnd; 14. return !(this.value.length = max 15. ; 16. this.onkeyup = function() 17. if(this.value.length max) 18. this.value = this.valu
19、e.substring(0,max); 19. 20. ; 21. 22. ); 23. ; 24. /用法 25. $(#mytextarea).maxLength(500); 30. 如何为函数创建一个基本的测试1. /把测试单独放在模块中 2. module(“Module B“); 3. test(“some other test“, function() 4. /指明测试内部预期有多少要运行的断言 5. expect(2); 6. /一个比较断言，相当于 JUnit 的 assertEquals 7. equals( true, false, “failing test“ ); 8.
20、 equals( true, true, “passing test“ ); 9. ); 50 个必备的实用 jQuery 代码段(4)2011-08-15 13:29 疯狂小强 我要评论(5) 字号：T | T9本文会给你们展示 50 个 jquery 代码片段，这些代码能够给你的 Javascript 项目提供帮助。这些都是我尽量记住的有着最佳性能的代码段，我希望你在这一文章中能找到有帮助的东西。AD： 2013 大数据全球技术峰会低价抢票中31. 如何在 jQuery 中克隆一个元素：1. var cloned = $(#somediv).clone(); 32. 在 jQuery 中
21、如何测试某个元素是否可见1. if($(element).is(:visible) = true) 2. /该元素是可见的 3. 33. 如何把一个元素放在屏幕的中心位置：1. jQuery.fn.center = function () 2. this.css(position,absolute); 3. this.css(top, ( $(window).height() -this.height() ) / +$(window).scrollTop() + px); 4. this.css(left, ( $(window).width() -this.width() ) / 2+$(w
22、indow).scrollLeft() + px); 5. return this; 6. 7. /这样来使用上面的函数： 8. $(element).center(); 34. 如何把有着某个特定名称的所有元素的值都放到一个数组中：1. var arrInputValues = new Array(); 2. $(“inputname=table“).each(function() 3. arrInputValues.push($(this).val(); 4. ); 1035. 如何从元素中除去 HTML1. (function($) 2. $.fn.stripHtml = functio
23、n() 3. var regexp = /)*/gi; 4. this.each(function() 5. $(this).html( $(this).html().replace(regexp,”“) ); 6. ); 7. return $(this); 8. 9. )(jQuery); 10. /用法： 11. $(p).stripHtml(); 36. 如何使用 closest 来取得父元素：1. $(#searchBox).closest(div); 37. 如何使用 Firebug 和 Firefox 来记录 jQuery 事件日志：1. / 允许链式日志记录 2. / 用法：
24、3. $(#someDiv).hide().log(div hidden).addClass(someClass); 4. jQuery.log = jQuery.fn.log = function (msg) 5. if (console) 6. console.log(“%s: %o“, msg, this); 7. 8. return this; 9. ; 38. 如何强制在弹出窗口中打开链接：1. jQuery(a.popup).live(click, function() 2. newwindow=window.open($(this).attr(href),height=200,w
25、idth=150); 3. if (window.focus) 4. newwindow.focus(); 5. 6. return false; 7. ); 1139. 如何强制在新的选项卡中打开链接：1. jQuery(a.newTab).live(click, function() 2. newwindow=window.open($(this).href); 3. jQuery(this).target = “_blank“; 4. return false; 5. ); 40. 在 jQuery 中如何使用.siblings()来选择同辈元素1. / 不这样做 2. $(#nav l
26、i).click(function() 3. $(#nav li).removeClass(active); 4. $(this).addClass(active); 5. ); 6. /替代做法是 7. $(#nav li).click(function() 8. $(this).addClass(active).siblings().removeClass(active); 9. ); 50 个必备的实用 jQuery 代码段(5)2011-08-15 13:29 疯狂小强 我要评论(5) 字号：T | T本文会给你们展示 50 个 jquery 代码片段，这些代码能够给你的 Javas
27、cript 项目提供帮助。这些都是我尽量记住的有着最佳性能的代码段，我希望你在这一文章中能找到有帮助的东西。AD： 2013 大数据全球技术峰会低价抢票中41. 如何切换页面上的所有复选框：1. var tog = false; 2. / 或者为 true，如果它们在加载时为被选中状态的话 3. $(a).click(function() 4. $(“inputtype=checkbox“).attr(“checked“,!tog); 5. tog = !tog; 6. ); 1242. 如何基于一些输入文本来过滤一个元素列表：1. /如果元素的值和输入的文本相匹配的话 2. /该元素将被返回
28、 3. $(.someClass).filter(function() 4. return $(this).attr(value) = $(input#someId).val(); 5. ) 43. 如何获得鼠标垫光标位置 x 和 y1. $(document).ready(function() 2. $(document).mousemove(function(e) 3. $(#XY).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);4. ); 5. ); 44. 如何把整个的列表元素（List Element，LI ）变成可点击的1
29、. $(“ul li“).click(function() 2. window.location=$(this).find(“a“).attr(“href“); 3. return false; 4. ); 1. 2. Link 1 3. Link 2 4. Link 3 5. Link 4 6. 45. 如何使用 jQuery 来解析 XML（基本的例子）：1. function parseXml(xml) 2. /找到每个 Tutorial 并打印出 author 3. $(xml).find(“Tutorial“).each(function() 4. $(“#output“).appe
30、nd($(this).attr(“author“) + “); 5. ); 6. 1346. 如何检查图像是否已经被完全加载进来1. $(#theImage).attr(src, image.jpg).load(function() 2. alert(This Image Has Been Loaded); 3. ); 47. 如何使用 jQuery 来为事件指定命名空间：1. /事件可以这样绑定命名空间 2. $(input).bind(blur.validation, function(e) 3. / . 4. ); 5. /data 方法也接受命名空间 6. $(input).data(
31、validation.isValid, true); 48. 如何检查 cookie 是否启用1. var dt = new Date(); 2. dt.setSeconds(dt.getSeconds() + 60); 3. document.cookie = “cookietest=1; expires=“ + dt.toGMTString(); 4. var cookiesEnabled = document.cookie.indexOf(“cookietest=“) != -1; 5. if(!cookiesEnabled) 6. /没有启用 cookie 7. 49. 如何让 coo
32、kie 过期：1. var date = new Date(); 2. date.setTime(date.getTime() + (x * 60 * 1000); 3. $.cookie(example, foo, expires: date ); 50. 如何使用一个可点击的链接来替换页面中任何的 URL1. $.fn.replaceUrl = function() 2. var regexp = /(ftp|http|https):/(w+:0,1w*)?(S+)(:0-9+)?(/|/(w#!:.?+= 3. this.each(function() 4. $(this).html( 5. $(this).html().replace(regexp,$1) 6. ); 7. ); 148. return $(this); 9. 10. /用法 11. $(p).replaceUrl(); 原文：http:/
