jQuery()函數
在jQuery類庫中,最重要的方法是jQuery()方法,(也就是$())。它的功能很強大,有四種不同的調用方式。
第一種也是最常用的調用方式是傳遞CSS選擇器(字符串)給$()方法。當通過這種方式調用時,$()方法會返回當前文檔中匹配該選擇器的元素集。jQuery支持大部分css3選擇器語法,還支持一些自己的擴展語法。8小節i節將闡述jQuery選擇器的語法。還可以將一個元素或jQuery對象作為第二個參數傳遞給$()方法,這時返回的是該特定元素或元素的子元素中匹配選擇器的部分。第二個參數是可選的,定義了元素的查詢的起點,經常稱為上下文(context)。
第二種調用方式是傳遞一個Element、Document或window對象給$()方法。在這種情況下,$()方法只須簡單地將Element、Document或window對象封裝成jQuery對象並返回。這樣可以使得能用jQuery方法來操作這些元素而不使用原生的DOM方法。例如,在jQuery程序中,經常可以看見$(document)或$(this)。jQuery對象可以表示文檔中多個元素,也可以傳遞一個元素數組給$()方法。在這種情況下,返回的jQuery對象表示該數組中的元素集。
第三種調用方式是傳遞HTML文本字符串給$()方法。這這種情況下,jQuery會根據傳入的文本創建好HTML元素並封裝為jQuery對象返回。jQuery不會將剛創建的元素自動插入文檔中,可以使用第3節描述的jQuery方法將元素插入到想要的地方。注意,在這種調用下,不可傳入純文本,因為jQuery會把純文本當做是CSS選擇器來解析。當使用這種調運風格時,傳遞給$()字符串必須至少包含一個帶尖括號的HTML標簽。
通過第三種方式調用時,$()接受可選的第二參數。可以傳遞Document對象來指定與所創建關聯的文檔。(比如,當創建的元素要插入iframe裡時,需要顯式的指定iframe的對象。)第二參數還可以是object對象。此時。假設該對象的屬性表示HTML屬性的鍵/值對,這些屬性將設置到所創建的對象上。當第二參數對象的屬性名是css,html,text,width,heigeht,offset,val,data或者屬性名是jQuery事件處理程序注冊方法名時,jQuery將調用新創建元素上的同名方法,並傳入屬性值。(css(),html(),text()等方法將在第2節講述,事件處理程序注冊方法將在第4節講述),例如:
var img = $("<img>", //新建一個<img>元素
{
src: url, //具有html屬性
css: {borderWidth: 5}, //css樣式
click: handClick //和事件處理程序
});
第四種調用方式是傳入一個函數給$()方法。此時,當文檔加載完且DOM程序可以操作時,傳入函數將被調用。這是常見onLoad()函數的jQuery版本。在jQuery程序中,在jQuery()裡定義一個匿名函數非常常見:
jQuery(function(){//文檔加載完畢時調用
//所有的代碼放在這裡
});
有時候我們還可以看見老式的寫法$(f)和完整的寫法
$(document).ready(f)
傳遞給jQuery()的函數在被調用時,this指向document對象,唯一的的參數指向jQuery函數 。這意味這可以釋放全局的$()函數,但在內部依舊可以延續該習慣:
jQuery.noConflict();//還原$()為初始值
jQuery(function($){ //讓$()成為jQuery對象的局部別名
//jQuery代碼
});
通過$注冊的函數將在DOMContentLoaded事件觸發時由jQuery觸發。當浏覽器不支持該事件時,會在load事件觸發時由jquery觸發。這意味這文檔已經完畢,但圖片等外部資源還有可能未加載完。如果DOM准備就緒後再傳遞函數給$(),傳遞的函數會在$()返回之前立刻調用。
jQuery類庫還使用jQuery()函數作為其命名空間,在下面定義了不少的工具函數和屬性。比如jQuery.noConflict();就是其中的一個工具函數。還包括遍歷的jQuery.each(),以及用來解析JSON文本的jQuery.parseJSON()。第7節例舉了這些通用函數,jQuery的其它函數在本章中都會提及。