50个jQuery代码段帮你成为更好的JavaScript开发者

今天的帖子会给你们展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成。这些都是我尽量记住的有着最佳性能的代码段，因此如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中！我希望你在这一文章中能找到有帮助的东西。1.如何创建嵌套的过滤器：?12345//允许你减少集合中的匹配元素的过滤器，//只剩下那些与给定的选择器匹配的部分。在这种情况下，//查询删除了任何没（:not）有（:has）//包含class为“selected”（.selected）的子节点。.filter(:not(:has(.selected)))2.如何重用元素搜索?12345678910varallItems=$(div.item);varkeepList=$(div#container1div.item);//现在你可以继续使用这些jQuery对象来工作了。例如，//基于复选框裁剪“keeplist”，复选框的名称//符合DIVclassnames:$(formToLookAt+input:checked).each(function(){keepList=keepList.filter(.+$(this).attr(name));});/DIV3.任何使用has()来检查某个元素是否包含某个类或是元素：?1234//jQuery1.4.*包含了对这一has方法的支持。该方法找出//某个元素是否包含了其他另一个元素类或是其他任何的//你正在查找并要在其之上进行操作的东东。$(input).has(.email).addClass(email_icon);4.如何使用jQuery来切换样式表?12//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。$('link[media='screen']').attr('href','Alternative.css');5.如何限制选择范围（基于优化目的）：?123456//尽可能使用标签名来作为类名的前缀，//这样jQuery就不需要花费更多的时间来搜索//你想要的元素。还要记住的一点是，//针对于你的页面上的元素的操作越具体化，//就越能降低执行和搜索的时间。varin_stock=$('#shopping_cart_itemsinput.is_in_stock');?12345ulid=shopping_cart_itemsliinputtype=radiovalue=Item-Xname=itemclass=is_in_stock/ItemX/liliinputtype=radiovalue=Item-Yname=itemclass=3-5_days/ItemY/liliinputtype=radiovalue=Item-Zname=itemclass=unknown/ItemZ/li/ul6.如何正确地使用ToggleClass：?1234//切换（toggle）类允许你根据某个类的//是否存在来添加或是删除该类。//这种情况下有些开发者使用：a.hasClass('blueButton')?a.removeClass('blueButton'):a.addClass('blueButton');56//toggleClass允许你使用下面的语句来很容易地做到这一点a.toggleClass('blueButton');7.如何设置IE特有的功能：?123if($.browser.msie){//InternetExplorer就是个虐待狂}8.如何使用jQuery来代替一个元素：?1$('#thatdiv').replaceWith('fnuh');9.如何验证某个元素是否为空：?123if($('#keks').html()){//什么都没有找到;}10.如何从一个未排序的集合中找出某个元素的索引号?123$(ulli).click(function(){varindex=$(this).prevAll().length;});11.如何把函数绑定到事件上：?123$('#foo').bind('click',function(){alert('Userclickedonfoo.');});12.如何追加或是添加html到元素中：?1$('#lal').append('sometext');13.在创建元素时，如何使用对象字面量（literal）来定义属性?1vare=$(,{href:#,class:a-classanother-class,title:...});14.如何使用多个属性来进行过滤?123//在使用许多相类似的有着不同类型的input元素时，//这种基于精确度的方法很有用varelements=$('#someidinput[type=sometype][value=somevalue]').get();15.如何使用jQuery来预加载图像：?123456jQuery.preloadImages=function(){for(vari=0;iarguments.length;i++){$(img/).attr('src',arguments[i]);}};//用法7$.preloadImages('image1.gif','/path/to/image2.png','some/image3.jpg');16.如何为任何与选择器相匹配的元素设置事件处理程序：?1234567891011121314$('button.someClass').live('click',someFunction);//注意，在jQuery1.4.2中，delegate和undelegate选项//被引入代替live，因为它们提供了更好的上下文支持//例如，就table来说，以前你会用//.live()$(table).each(function(){$(td,this).live(hover,function(){$(this).toggleClass(hover);});});//现在用$(table).delegate(td,hover,function(){$(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};}//然后像这样来滚动到你希望去到的class/area上。$('.area_name').autoscroll();20.如何检测各种浏览器：?1234检测Safari(if($.browser.safari)),检测IE6及之后版本(if($.browser.msie&&$.browser.version6)),检测IE6及之前版本(if($.browser.msie&&$.browser.version=6)),检测FireFox2及之后版本(if($.browser.mozilla&&$.browser.version='1.8'))21.如何替换串中的词?12varel=$('#id');el.html(el.html().replace(/word/ig,''));22.如何禁用右键单击上下文菜单：?123$(document).bind('contextmenu',function(e){returnfalse;});23.如何定义一个定制的选择器?123456789$.expr[':'].mycustomselector=function(element,index,meta,stack){//element-一个DOM元素//index–栈中的当前循环索引//meta–有关选择器的元数据//stack–要循环的所有元素的栈//如果包含了当前元素就返回true//如果不包含当前元素就返回false};//定制选择器的用法：$('.someClasses:test').doSomething();24.如何检查某个元素是否存在?123if($('#someDiv').length){//万岁！！！它存在……}25.如何使用jQuery来检测右键和左键的鼠标单击两种情况：?1234567$(#someelement).live('click',function(e){if((!$.browser.msie&&e.button==0)||($.browser.msie&&e.button==1)){alert(LeftMouseButtonClicked);}elseif(e.button==2){alert(RightMouseButtonClicked);}});26.如何显示或是删除input域中的默认值?12345//这段代码展示了在用户未输入值时，//如何在文本类型的input域中保留//一个默认值wap_val=[];$(.swap).each(function(i){678910111213141516wap_val[i]=$(this).val();$(this).focusin(function(){if($(this).val()==swap_val[i]){$(this).val();}}).focusout(function(){if($.trim($(this).val())==){$(this).val(swap_val[i]);}});});?1inputtype=textvalue=EnterUsernamehere..class=swap/27.如何在一段时间之后自动隐藏或关闭元素（支持1.4版本）：?123456//这是1.3.2中我们使用setTimeout来实现的方式setTimeout(function(){$('.mydiv').hide('blind',{},500)},5000);//而这是在1.4中可以使用delay()这一功能来实现的方式（这很像是休眠）$(.mydiv).delay(5000).hide('blind',{},500);28.如何把已创建的元素动态地添加到DOM中：?12varnewDiv=$('');newDiv.attr('id','myNewDiv').appendTo('body');29.如何限制“Text-Area”域中的字符的个数：?12345678910111213141516171819202122232425jQuery.fn.maxLength=function(max){this.each(function(){vartype=this.tagName.toLowerCase();varinputType=this.type?this.type.toLowerCase():null;if(type==input&&inputType==text||inputType==password){//ApplythestandardmaxLengththis.maxLength=max;}elseif(type==textarea){this.onkeypress=function(e){varob=e||event;varkeyCode=ob.keyCode;varhasSelect