jQuery物件的鍊式運算用法分析

本文實例講述了jQuery物件的鍊式操作用法。分享給大家參考，具體如下：

jQuery物件的鍊式操作

先來看一個範例：

程式碼如下:

$("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good")

對一個jQuery物件先呼叫了css()函式修改樣式，然後再使用attr()函式修改屬性，這種呼叫方式像鏈一樣，所以稱為"鍊式操作"。

鍊式運算能讓程式碼變得簡潔，因為往往可以在一條語句中實作以往多條語句才能完成的任務。例如如果不使用鍊式操作，需要用兩個語句才能完成上面的任務：

$("#myphoto").css("border","solid 2px#FF0000");
$("#myphoto").arrt("alt","good");

除了增加了程式碼量，還呼叫了兩次選擇器，降低了速度。

在一個較短的鍊式運算中，往往語句比較清晰，可以分步驟地對jQuery物件實現各種操作。但是鍊式運算不應該太長，否則會造成語句難以理解，因為要查看jQuery物件目前的狀態並不是容易的事，尤其如果涉及jQuery物件中元素的增刪操作是更加難以判斷。

並不是所有的jQuery函數都可以使用鍊式運算。這與鍊式操作的原理有關，之所以可以實現鍊式操作是因為其中的每個函數回傳的都是jQuery物件本身。在jQuery類別函式庫的內部實作中，雖然很多的函數都傳回jQuery物件本身，但都是透過呼叫內部有限的幾個函數來實現的，例如attr()函數設定屬性石，實際上最後呼叫了"jQuery. each(object,callback,args)"方法。注意此方法不是jQuery物件方法，jQuery物件方法也有一個each()函數，為"jQuery.fn.each(callback,args)"，此函數最後同樣呼叫jQuery.each函數：

Each:function(callback,args){
  ReturnjQuery.each(this,callback,args);
}

下面看一看jQuery.each函數的回傳結果：

Each.function(object,callback,args){
  Retumobject;
}

Object是jQuery.fn對象，即jQuery物件。最後回傳的還是jQuery物件。

可以使用下面的原則判斷一個函數返回的時候是jQuery對象，也就是是否可以用於鍊式運算。

除了取得某些資料的函數，例如取得屬性值"attr(name)",取得集合大小"size()"這些函數明顯是傳回資料的。除了這些函數之外的jQuery函數都可以用於鍊式操作，例如設定屬性"attr(name.value)"。

"$"變數的使用

"$"變數是"jQuery"變數的引用。 "jQuery"變數是全域變量，jQuery物件是指"jQUery.fn"，不要混淆。 "jQuery"變數類似靜態類，上面的方法都是靜態方法，可以在任何時刻呼叫。如"jQuery.each"。 "jQuery.fn"是實例方法，只能在jQuery物件上呼叫。例如"jQuery.fn.each()"方法只能透過"$('#id').each"這種形式呼叫。

前面提到，可以使用"$"代替"jQuery"，因為在jQuery的內部有以下實現：

jQuery=window.jQuery=window.$

所以"$"變數和"jQuery"變數實際上是Window物件的屬性，也就是全域變數。可以在頁面上得任何地方調用。

希望本文所述對大家jquery程式設計有幫助。