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 ,

轉載請保留.

轉載于:https://www.cnblogs.com/leelike/archive/2011/01/20/1940465.html