本文收集整理(lǐ)了14個(gè)很(hěn)有(yǒu)用的jQuery技(jì)巧，與大(dà)家(jiā)分享。1.通(tōng)過方法返回Jquery對象實例。用 var someDiv = $(‘#someDiv’).hide(); 代替 var someDiv = $(‘#someDiv’); someDiv.hide();

1.通(tōng)過方法返回Jquery對象實例

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

2.使用find來(lái)查找

用 $(’#someDiv’).find(’p.someClass’).hide(); 代替 $(’#someDiv p.someClass’).hide();因為(wèi)可(kě)以不必觸發Jquery的Sizzle引擎，同時(shí)在寫選擇符的時(shí)候盡量讓您的選擇符簡單同時(shí)優化最右邊的選擇符

3.不要濫用$(this)

用 $(’#someAnchor’).click(function() { alert( this.id ); }); 代替 $(’#someAnchor’).click(function() {alert($(this).attr(’id’));});

4.ready的簡寫形式

用 $(function() { }); 代替 $(document).ready(function() {});

5.讓你(nǐ)的代碼安全

方法1（使用noConflict）

var j = jQuery.noConflict();
j(’#someDiv’).hide();
// The line below will reference some other library’s $ function.
$(’someDiv’).style.display = ‘none’;

方法2（傳入參數(shù)Jquery）

(function($) {
// Within this function, $ will always refer to jQuery
})(jQuery);

方法3（通(tōng)過ready方法）

jQuery(document).ready(function($) {
// $ refers to jQuery
});

6.簡化代碼

用each代替for，使用數(shù)組保存臨時(shí)變量，使用document fragment，這其實和(hé)寫原生(shēng)的Javascript需要注意的一樣。

7.使用Ajax的方法

Jquery提供了get getJSON post ajax這些(xiē)有(yǒu)用的ajax方法。

8.訪問原生(shēng)的屬性和(hé)方法

比如獲取元素id的方法有(yǒu)

// 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來(lái)檢查Ajax請(qǐng)求

通(tōng)過使用xhr.setRequestHeader(”X-Requested-With”, “XMLHttpRequest”); 服務器(qì)端如PHP就可(kě)以通(tōng)過

function isXhr() {
   return $_SERVER['HTTP_X_REQUESTED_WITH'] === ‘XMLHttpRequest’;
}

來(lái)檢查是不是Ajax請(qǐng)求，在一些(xiē)禁用Javascript的情況下可(kě)能會(huì)用到。

10.Jquery和(hé)$的關系

在Jquery代碼的最下面，可(kě)以看到下面的代碼

window.jQuery = window.$ = jQuery; $其實就是Jquery的一個(gè)shortcut

11.條件加載Jquery

如果CDN沒有(yǒu)下載到Jquery，則從本地讀取。

12.Jquery Filters

$(’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”

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

13.hover方法

$(’#someElement’).hover(function() {
//在這裏可(kě)以使用toggle方法來(lái)實現滑過和(hé)滑出的效果
});

14.傳入屬性對象

當創建一個(gè)元素的時(shí)候，Jquery1.4可(kě)以傳入一個(gè)屬性對象

$(’’, {
  id : ’someId’,
  className : ’someClass’,
  href : ’somePath.html’
});

	甚至是Jquery指定的屬性或事件如text, click。