14个有用的Jquery技巧分享
1.通过方法返回Jquery对象实例
用varsomeDiv=$(‘#someDiv").hide(); 代替varsomeDiv=$(‘#someDiv"); someDiv.hide();
2.使用find来查找
用$(‘#someDiv").find(‘p.someClass").hide(); 代替$(‘#someDivp.someClass").hide();因为可以不必触发Jquery的Sizzle引擎，同时在写选择符的时候尽量让您的选择符简单同时优化最右边的选择符
3.不要滥用$(this)
用$(‘#someAnchor").click(function(){ alert(this.id); });代替$(‘#someAnchor").click(function(){alert($(this).attr(‘id"));});
4.ready的简写形式
用$(function(){});代替$(document).ready(function(){});
5.让你的代码安全
方法1（使用noConflict）
varj=jQuery.noConflict();
j(‘#someDiv").hide();
//Thelinebelowwillreferencesomeotherlibrary"s$function.
$(‘someDiv").style.display=‘none";
方法2（传入参数Jquery）
(function($){
//Withinthisfunction,$willalwaysrefertojQuery
})(jQuery);
方法3（通过ready方法）
jQuery(document).ready(function($){
//$referstojQuery
});
6.简化代码
用each代替for，使用数组保存临时变量，使用documentfragment，这其实和写原生的Javascript需要注意的一样。
7.使用Ajax的方法
Jquery提供了getgetJSONpostajax这些有用的ajax方法
8.访问原生的属性和方法
比如获取元素id的方法有
//OPTION1?UsejQuery
varid=$(‘#someAnchor").attr(‘id");
//OPTION2?AccesstheDOMelement
varid=$(‘#someAnchor")[0].id;
//OPTION3?UsejQuery"sgetmethod
varid=$(‘#someAnchor").get(0).id;
//OPTION3b?Don"tpassanindextoget
anchorsArray=$(‘.someAnchors").get();
varthirdId=anchorsArray[2].id;
9.使用PHP来检查Ajax请求
通过使用xhr.setRequestHeader(“X-Requested-With”,“XMLHttpRequest”); 服务器端如PHP就可以通过
functionisXhr(){
return$_SERVER["HTTP_X_REQUESTED_WITH"]===‘XMLHttpRequest";
}
来检查是不是Ajax请求，在一些禁用Javascript的情况下可能会用到
10.Jquery和$的关系
在Jquery代码的最下面，可以看到下面的代码
window.jQuery=window.$=jQuery; $其实就是Jquery的一个shortcut
11.条件加载Jquery
<!?GrabGoogleCDNjQuery.fallbacktolocalifnecessary?>
<scriptsrc=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script>!window.jQuery&&document.write(‘<scriptsrc=”js/jquery-1.4.2.min.js”><\/script>")</script>
如果CDN没有下载到Jquery，则从本地读取
12.JqueryFilters
<script>
$(‘p:first").data(‘info",‘value");//populates$"sdataobjecttohavesomethingtoworkwith
$.extend(
jQuery.expr[":"],{
block:function(elem){
return$(elem).css(“display”)===“block”;
},
hasData:function(elem){
return!$.isEmptyObject($(elem).data());
}
}
);
$(“p:hasData”).text(“hasdata”);//grabsparasthathavedataattached
$(“p:block”).text(“areblocklevel”);//grabsonlyparagraphsthathaveadisplayof“block”
</script>
注：$.expr[":"]等价于$.expr.filters
13.hover方法
14.传入属性对象 当创建一个元素的时候，Jquery1.4可以传入一个属性对象
$(‘#someElement").hover(function(){
//在这里可以使用toggle方法来实现滑过和滑出的效果
});
$(‘</a>",{
id:‘someId",
className:‘someClass",
href:‘somePath.html"
});
甚至是Jquery指定的属性或事件如text,click
相关文章