14个非常有用的jquery技巧，注意事项和最佳实践

1. Methods Return the jQuery Object 通过方法返回Jquery对象实例

jquery大多数方法返回的都是jquery对象，这非常的有用，而且jquery允许链式调用

$someDiv.attr(‘class’, ’someClass’).hide().html(‘new stuff’);

因为返回的总是jquery对象，所以我们有时可以移除不必要的代码。比如，考虑下面的代码：

var someDiv = $(‘#someDiv’);
someDiv.hide();

上边的代码非常的好，但是你可以很容易的把两句合成一句，而得到相同的结果。如下所示：

var someDiv = $(‘#someDiv’).hide();

通过这种方法我们同样可以隐藏someDiv元素，返回的是someDiv变量的引用

2. The Find Selector使用find来查找

jQuery有非常强大的Sizzle引擎来实现选择器，只要你写的选择器不是很差，jQuery都会做出优化，你一般不必担心太多。然而，我们可以稍微做一些改进，这可以使你的脚本性能略有提高。

一般在jquery中能不要用Sizzle引擎就不要用，当然只要有可能，就尽量使用.find()方法。当然有些时候这是不可能的。

// Fine in modern browsers, though Sizzle does begin “running”
$(‘#someDiv p.someClass’).hide();
// Better for all browsers, and Sizzle never inits.
$(‘#someDiv’).find(‘p.someClass’).hide();

上面两行代码执行的结果是完全一样的，但是下面一句的效率要比上面一句的执行效率高。

现代浏览器（除IE6，IE7）都有QuerySelectorAll支持，能允许你像CSS选择器一样获取对象，而不需要用到jQuery中的Sizzle引擎。jQuery会在使用自己的引擎之前检查是否存在这个函数。

对于IE6/IE7，就需要jQuery使用Sizzle引擎，jQuery会把你的选择器转化成一个数组，并且通过从右往左来迭代匹配。通过正则 表达式匹配页面每一个元素，所以你的可以尽量减少选择器的层级，尽可能的使用最右边的选择器，比如使用ID选择器等；这个规则和我们的css的查找规则是 一致的，如果你要优化css选择器也要知道这个规则：从右往左来迭代匹配！

尺度把握：
1.保持代码简单
2.尽可能的使用find()查找，使用浏览器的原生查找函数
3.尽可能使用最右边的选择器，比如ID等
Context Instead?
我们还可以给你的选择器添加一个选择环境（限制范围）。例如：

$(‘.someElements’, ‘#someContainer’).hide();

这段代码用来获取#someContainer对象下的所有someElements类对象。这种方法可以有效地限制DOM遍历的范围，可是在jquery的实现机制用用的是find()方法。
$(‘#someContainer’)
.find(‘.someElements’)
.hide();
证明：
// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return jQuery( context ).find( selector );
}

3. Don’t Abuse $(this) 不要滥用$(this)

如果我们不知道DOM各种各样的属性和方法，就会滥用jquery对象
$(‘#someAnchor’).click(function() {
alert( $(this).attr(‘id’) );
});

$(‘#someAnchor’).click(function() {
alert( this.id );
});
上边两段代码，下边的方法性能会更好。

请注意，下面的三个属性应该是经常通过jquery访问的，”src”,”href”和”style”。这些属性在旧版本的IE浏览器当中需要使用getAttribute方法来实现。

证明：
// jQuery Source
var rspecialurl = /href|src|style/;
// …
var special = rspecialurl.test( name );
// …
var attr = !jQuery.support.hrefNormalized && notxml && special ?
// Some attributes require a special call on IE
elem.getAttribute( name, 2 ) :
elem.getAttribute( name );
更糟糕的是反复的查询DOM和创建jquery对象。例如：
$(‘#elem’).hide();
$(‘#elem’).html(‘bla’);
$(‘#elem’).otherStuff();
希望你知道这段代码的效率是多么的低和改进它的方法，如果不知道，没有关系，我们这里可以使用jquery链或者缓存#elem对象。

// This works better
$(‘#elem’).hide().html(‘bla’).otherStuff();

// Or this, if you prefer for some reason.
var elem = $(‘#elem’);
elem.hide();
elem.html(‘bla’);
elem.otherStuff();

4. jQuery’s Shorthand Ready Methodready的简写形式

对jquery来说，监听document是否加载完毕非常容易。
$(document).ready(function() {
// let’s get up in heeya
});
虽然，这是非常可能的，但是你可能碰到一个不同的，更令人困惑的功能来包装。
$(function() {
// let’s get up in heeya
});
虽然后者的可读性不如前者，但是却是完全相同的。可以查看一下jquery的源代码
// HANDLE: $(function)
// Shortcut for document ready
if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}

5.Keep your Code Safe 让你的代码安全

方法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.Be Smart 简化代码

用each代替for，使用数组保存临时变量，使用document fragment，这其实和写原生的Javascript需要注意的一样。

7.AJAX Methods 使用Ajax的方法

Jquery提供了get getJSON post ajax这些有用的ajax方法

8.Accessing Native Properties and Methods 访问原生的属性和方法

比如获取元素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.Detect AJAX Requests with PHP 使用PHP来检查Ajax请求

通过使用xhr.setRequestHeader(”X-Requested-With”, “XMLHttpRequest”); 服务器端如PHP就可以通过
function isXhr() {
return $_SERVER['HTTP_X_REQUESTED_WITH'] === ‘XMLHttpRequest’;
}
来检查是不是Ajax请求，在一些禁用Javascript的情况下可能会用到

10.jQuery and $ Jquery和$的关系

在Jquery代码的最下面，可以看到下面的代码
window.jQuery = window.$ = jQuery; $其实就是Jquery的一个shortcut

11.Conditionally Loading jQuery 条件加载Jquery

如果CDN没有下载到Jquery，则从本地读取

12.jQuery Filters Jquery Filters

注：$.expr[":"]等价于$.expr.filters

13.A Single Hover Function hover方法

$(’#someElement’).hover(function() {
//在这里可以使用toggle方法来实现滑过和滑出的效果
});

14.Passing an Attribute Object 传入属性对象

当创建一个元素的时候，Jquery1.4可以传入一个属性对象
$(’’, {
id : ’someId’,
className : ’someClass’,
href : ’somePath.html’
});
甚至是Jquery指定的属性或事件如text, click

连接：http://www.iciniao.com/?p=285 ,

转载请保留.