60个实用的jQuery代码片段

60个实用的jQuery代码片段目录1.创建一个嵌套的过滤器2.重用你的元素查询3.使用has()来判断一个元素是否包含特定的class或者元素4.使用jQuery切换样式5.限制选择的区域6.如何正确使用ToggleClass7.设置IE指定的功能8.使用jQuery来替换一个元素9.验证一个元素是否为空10.在无序的set中查找一个元素的索引11.绑定一个函数到一个事件12.添加HTML到一个元素13.创建元素时使用对象来定义属性14.使用过滤器过滤多属性15.使用jQuery预加载图片16.设置任何匹配一个选择器的事件处理程序17.找到被选择到的选项(option)元素18.隐藏包含特定值的元素19.自动的滚动到页面特定区域20.检测各种浏览器21.替换字符串中的单词22.关闭右键的菜单23.定义一个定制的选择器24.判断一个元素是否存在25.使用jQuery判断鼠标的左右键点击26.显示或者删除输入框的缺省值27.指定时间后自动隐藏或者关闭元素(1.4支持）28.动态创建元素到DOM29.限制textarea的字符数量30.为函数创建一个基本测试用例31.使用jQuery克隆元素32.测试一个元素在jQuery中是否可见34.使用特定名字的元素对应的值生成一个数组35.剔除元素中的HTML36.使用closest来得到父元素37.使用firebug来记录jQuery事件38.点击链接强制弹出新窗口39.点击链接强制打开新标签页40.使用siblings()来处理同类元素41.选择或者不选页面上全部复选框42.基于输入文字过滤页面元素43.取得鼠标的X和Y坐标44.使得整个列表元素(LI)可点击45.使用jQuery来解析XML46.判断一个图片是否加载完全47.使用jQuery命名事件48.判断cookie是否激活或者关闭49.强制过期cookie50.使用一个可点击的链接替换页面中所有URL51:在表单中禁用“回车键”52:清除所有的表单数据53:将表单中的按钮禁用54:输入内容后启用递交按钮55:禁止多次递交表单56:高亮显示目前聚焦的输入框标示57:动态方式添加表单元素58:自动将数据导入selectbox中59:判断一个复选框是否被选中60:使用代码来递交表单偶然在网上看到这些不错的jQuery代码开发技巧。原文收集了30个，另外查找的时候发现了还有20个。加上另外十个实用的jQuery代码片段，共60个代码技巧，收集在一起分享给大家。60个很实用的jQuery代码开发技巧收集这些jQuery代码实用性比较强，有些忘了的地方可以现学现用。现在暂时没有用到以后应该会用到，觉得不错可以收藏一下。当然，觉得还不过瘾的可以去看看：20款2014年最佳的免费jQuery插件分享30个非常精美的jQueryLightbox图片效果插件如何用CSS3和jQuery创建一个动态的粘性头部(stickyheader)1.创建一个嵌套的过滤器1.filter(:not(:has(.selected)))//去掉所有不包含class为.selected的元素2.重用你的元素查询12345678varallItems=$(div.item);varkeepList=$(div#container1div.item);divclassnames:$(formToLookAt+input:checked).each(function(){keepListkeepList=keepList.filter(.+$(this).attr(name));});/div3.使用has()来判断一个元素是否包含特定的class或者元素1234//jQuery1.4.*includessupportforthehasmethod.Thismethodwillfind//ifaanelementcontainsacertainotherelementclassorwhateveritis//youarelookingforanddoanythingyouwanttothem.$(input).has(.email).addClass(email_icon);4.使用jQuery切换样式12//Lookforthemedia-typeyouwishtoswitchthensetthehreftoyournewstylesheet$('link[media='screen']').attr('href','Alternative.css');5.限制选择的区域1234567891011//Wherepossible,pre-fixyourclassnameswithatagname//sothatjQuerydoesn'thavetospendmoretimesearching//fortheelementyou'reafter.Alsorememberthatanything//youcandotobemorespecificaboutwheretheelementis//onyourpagewillcutdownonexecution/searchtimesvarin_stock=$('#shopping_cart_itemsinput.is_in_stock');ulid=shopping_cart_itemsliinputclass=is_in_stockname=itemtype=radiovalue=Item-X/ItemX/liliinputclass=3-5_daysname=itemtype=radiovalue=Item-Y/ItemY/liliinputclass=unknownname=itemtype=radiovalue=Item-Z/ItemZ/li/ul6.如何正确使用ToggleClass1234//Toggleclassallowsyoutoaddorremoveaclass//fromanelementdependingonthepresenceofthat//class.Wheresomedeveloperswoulduse:a.hasClass('blueButton')?a.removeClass('blueButton'):a.addClass('blueButton');56//toggleClassallowsyoutoeasilydothisusinga.toggleClass('blueButton');7.设置IE指定的功能1if($.browser.msie){//InternetExplorerisasadist.}8.使用jQuery来替换一个元素1$('#thatdiv').replaceWith('fnuh');9.验证一个元素是否为空1if($('#keks').html()){//Nothingfound;}10.在无序的set中查找一个元素的索引123$(ul>li).click(function(){varindex=$(this).prevAll().length;});11.绑定一个函数到一个事件123$('#foo').bind('click',function(){alert('Userclickedonfoo.');});12.添加HTML到一个元素1$('#lal').append('sometext');13.创建元素时使用对象来定义属性1vare=$(,{href:#,class:a-classanother-class,title:...});14.使用过滤器过滤多属性123//Thisprecision-basedapproachedcanbeusefulwhenyouuse//lotsofsimilarinputelementswhichhavedifferenttypesvarelements=$('#someidinput[type=sometype][value=somevalue]').get();15.使用jQuery预加载图片12jQuery.preloadImages=function(){for(vari=0;i').attr('src',arguments[i]);}};//Usage$.preloadImages('image1.gif','/path/to/image2.png','some/image3.jpg');16.设置任何匹配一个选择器的事件处理程序123456789101112$('button.someClass').live('click',someFunction);//NotethatinjQuery1.4.2,thedelegateandundelegateoptionshavebeen//introducedtoreplaceliveastheyofferbettersupportforcontext//Forexample,intermsofatablewherebeforeyouwoulduse..//.live()$(table).each(function(){$(td,this).live(hover,function(){$(this).toggleClass(hover);});});//Nowuse..$(table).delegate(td,hover,function(){1314$(this).toggleClass(hover);});17.找到被选择到的选项(option)元素1$('#someElement').find('option:selected');18.隐藏包含特定值的元素1$(p.value:contains('thetextvalue')).hide();19.自动的滚动到页面特定区域12345678jQuery.fn.autoscroll=function(selector){$('html,body').animate({scrollTop:$(selector).offset().top},500);}//Thentoscrolltotheclass/areayouwishtogettolikethis:$('.area_name').autoscroll();20.检测各种浏览器1234DetectSafari(if($.browser.safari)),DetectIE6andover(if($.browser.msie&&$.browser.version>6)),DetectIE6andbelow(if($.browser.msie&&$.browser.version<=6)),DetectFireFox2andabove(if($.browser.mozilla&&$.browser.version>='1.8'))21.替换字符串中的单词12varel=$('#id');el.html(el.html().replace(/word/ig,''));22.关闭右键的菜单1$(document).bind('contextmenu',function(e){returnfalse;});23.定义一个定制的选择器12345678910$.expr[':'].mycustomselector=function(element,index,meta,stack){//element-isaDOMelement//index-thecurrentloopindexinstack//meta-metadataaboutyourselector//stack-stackofallelementstoloop//Returntruetoincludecurrentelement//Returnfalsetoexpludecurre