1.通过方法返回Jquery对象实例
用 var someDiv = $(‘#someDiv’).hide(); 代替 var someDiv = $(‘#someDiv’); someDiv.hide();
2.使用find来查找
用 $(’#someDiv’).find(’p.someClass’).hide(); 代替 $(’#someDiv p.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)
var j = jQuery.noConflict();
j(’#someDiv’).hide();
// The line below will reference some other library’s $ function.
$(’someDiv’).style.display = ‘none’;
方法2(传入参数Jquery)
(function($) {
// Within this function, $ will always refer to jQuery
})(jQuery);
方法3(通过ready方法)
jQuery(document).ready(function($) {
// $ refers to jQuery
});
6.简化代码
用each代替for,使用数组保存临时变量,使用document fragment,这其实和写原生的Javascript需要注意的一样。
7.使用Ajax的方法
Jquery提供了get getJSON post ajax这些有用的ajax方法
8.访问原生的属性和方法
比如获取元素id的方法有
// OPTION 1 – Use jQuery
var id = $(’#someAnchor’).attr(’id’);
// OPTION 2 – Access the DOM element
var id = $(’#someAnchor’)[0].id;
// OPTION 3 – Use jQuery’s get method
var id = $(’#someAnchor’).get(0).id;
// OPTION 3b – Don’t pass an index to get
anchorsArray = $(’.someAnchors’).get();
var thirdId = anchorsArray[2].id;
9.使用PHP来检查Ajax请求
通过使用xhr.setRequestHeader(”X-Requested-With”, “XMLHttpRequest”); 服务器端如PHP就可以通过
function isXhr() {
return $_SERVER['HTTP_X_REQUESTED_WITH'] === ‘XMLHttpRequest’;
}
来检查是不是Ajax请求,在一些禁用Javascript的情况下可能会用到
10.Jquery和$的关系
在Jquery代码的最下面,可以看到下面的代码
window.jQuery = window.$ = jQuery; $其实就是Jquery的一个shortcut
11.条件加载Jquery
<!– Grab Google CDN jQuery. fall back to local if necessary –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script>!window.jQuery && document.write(’<script src=”js/jquery-1.4.2.min.js”><\/script>’)</script>
如果CDN没有下载到Jquery,则从本地读取
12.Jquery Filters
<script>
$(’p:first’).data(’info’, ‘value’); // populates $’s data object to have something to work with
$.extend(
jQuery.expr[":"], {
block: function(elem) {
return $(elem).css(”display”) === “block”;
},
hasData : function(elem) {
return !$.isEmptyObject( $(elem).data() );
}
}
);
$(”p:hasData”).text(”has data”); // grabs paras that have data attached
$(”p:block”).text(”are block level”); // grabs only paragraphs that have a display of “block”
</script>
注:$.expr[":"]等价于$.expr.filters
13.hover方法
$(’#someElement’).hover(function() {
//在这里可以使用toggle方法来实现滑过和滑出的效果
});
14.传入属性对象
当创建一个元素的时候,Jquery1.4可以传入一个属性对象
$(’</a>’, {
id : ’someId’,
className : ’someClass’,
href : ’somePath.html’
});
甚至是Jquery指定的属性或事件如text, click
分享到:
相关推荐
jQuery教程14个实用的jQuery技巧
jQuery技巧总结.pdf jQuery jQuery技巧
jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送
jquery 心得 技巧,希望对使用jquery框架者有用
jQuery 技巧总结 jQuery 技巧总结 jQuery 技巧总结 jQuery 技巧总结 jQuery 技巧总结
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
jQuery技巧,比较经典的几种用法总结。
jquery技巧总结
这是10个非常有用又炫的jquery插件
jQuery 技巧总结,是经验的系统总结,对新手很有帮助,如果你是老手就不要下了,句句实话。jQuery 技巧总结,是经验的系统总结,对新手很有帮助,如果你是老手就不要下了,句句实话。jQuery 技巧总结,是经验的系统总结...
主要介绍了14个有用的Jquery技巧分享,本文有一些性能优化技巧、编码优化技巧、简洁方法等,需要的朋友可以参考下
jQuery 技巧大放送,多个使用技巧,推荐参考文档。
jQuery技巧总结.docjQuery技巧总结.docjQuery技巧总结.docjQuery技巧总结.docjQuery技巧总结.docjQuery技巧总结.doc
jquery技巧大全、jquery技巧大全、jquery技巧大全
25个实用的jQuery技巧和解决方案 前端开发不得不知道的事
jQuery应用技巧大全modified 猜想表白