30个经典的jQuery代码开发技巧
本文实例总结了30个经典的jQuery代码开发技巧。分享给大家供大家参考。具体如下：
1.创建一个嵌套的过滤器
.filter(":not(:has(.selected))")//去掉所有不包含class为.selected的元素
2.重用你的元素查询
varallItems=$("div.item");
varkeepList=$("div#container1div.item");
<div>classnames:$(formToLookAt+"input:checked").each(function(){keepListkeepList=keepList.filter("."+$(this).attr("name"));
});
</div>
3.使用has()来判断一个元素是否包含特定的class或者元素
//jQuery1.4.*includessupportforthehasmethod.Thismethodwillfind
//ifaanelementcontainsacertainotherelementclassorwhateveritis
//youarelookingforanddoanythingyouwanttothem.
$("input").has(".email").addClass("email_icon");
4.使用jQuery切换样式
//Lookforthemedia-typeyouwishtoswitchthensetthehreftoyournewstylesheet
$('link[media='screen']').attr('href','Alternative.css');
5.限制选择的区域
//Wherepossible,pre-fixyourclassnameswithatagname
//sothatjQuerydoesn'thavetospendmoretimesearching
//fortheelementyou'reafter.Alsorememberthatanything
//youcandotobemorespecificaboutwheretheelementis
//onyourpagewillcutdownonexecution/searchtimes
varin_stock=$('#shopping_cart_itemsinput.is_in_stock');
<ulid="shopping_cart_items">
<li><inputvalue="Item-X"name="item"type="radio">ItemX</li>
<li><inputvalue="Item-Y"name="item"type="radio">ItemY</li>
<li><inputvalue="Item-Z"name="item"type="radio">ItemZ</li>
</ul>
6.如何正确使用ToggleClass
//Toggleclassallowsyoutoaddorremoveaclass
//fromanelementdependingonthepresenceofthat
//class.Wheresomedeveloperswoulduse:
a.hasClass('blueButton')?a.removeClass('blueButton'):a.addClass('blueButton');
//toggleClassallowsyoutoeasilydothisusinga.toggleClass('blueButton');
7.设置IE指定的功能
if($.browser.msie){
//InternetExplorerisasadist.
}
8.使用jQuery来替换一个元素
$('#thatdiv').replaceWith('fnuh');
9.验证一个元素是否为空
if($('#keks').html()){
//Nothingfound;
}
10.在无序的set中查找一个元素的索引
$("ul>li").click(function(){varindex=$(this).prevAll().length;});
11.绑定一个函数到一个事件
$('#foo').bind('click',function(){alert('Userclickedon"foo."');});
12.添加HTML到一个元素
$('#lal').append('sometext');
13.创建元素时使用对象来定义属性
vare=$("",{href:"#",class:"a-classanother-class",title:"..."});
14.使用过滤器过滤多属性
//Thisprecision-basedapproachedcanbeusefulwhenyouuse
//lotsofsimilarinputelementswhichhavedifferenttypes
varelements=$('#someidinput[type=sometype][value=somevalue]').get();
15.使用jQuery预加载图片
jQuery.preloadImages=function(){for(vari=0;i').attr('src',arguments[i]);}};
//Usage$.preloadImages('image1.gif','/path/to/image2.png','some/image3.jpg');
16.设置任何匹配一个选择器的事件处理程序 [code]$('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(){$(this).toggleClass("hover");});