資源描述:
《回頭重看jQuery——核心及工具》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、第12章回頭重看jQuery——核心及工具到現(xiàn)在為止,讀者已經(jīng)看到了jQuery中的大部分內(nèi)容,包括選擇器、動畫、AJAX支持等??鬃釉f,“學(xué)而時習(xí)之,不亦樂乎”。因此,時常回頭看看已經(jīng)學(xué)過的東西,可以讓我們更加深刻的理解。本章將較為系統(tǒng)的介紹前面章節(jié)中多次使用的jQuery核心函數(shù),并對jQuery中較常用的工具類函數(shù)進(jìn)行介紹。12.1核心函數(shù)jQuery核心函數(shù)可以說是jQuery中最重要的一種函數(shù)了,jQuery的核心功能都是通過這個函數(shù)實現(xiàn)的。jQuery中的一切都基于這個函數(shù),或者說都是在以某種方式使用這個函數(shù)。本節(jié)將詳細(xì)介紹jQuery核心函數(shù)的各種形式
2、以及使用方法。12.1.1核心函數(shù)形式j(luò)Query核心函數(shù)的默認(rèn)形式如表所示,其最基本的用法就是向它傳遞一個表達(dá)式(例如可以是一個CSS選擇器表達(dá)式),然后根據(jù)這個表達(dá)式來查找所有匹配的元素。函數(shù)名jQuery(parameter,[context])作用這個函數(shù)接收一個字符串,然后用這個字符串去匹配一組元素返回值jQuery參數(shù)parameter(String):用來查找的字符串context(Element,jQuery):(可選)作為待查找的DOM元素集、文檔或jQuery對象12.1.2使用核心函數(shù)jQuery核心函數(shù)jQuery(expression,[co
3、ntext])的最簡單的使用方式就是只帶一個參數(shù)。這個參數(shù)可以是一個表達(dá)式(通常由CSS選擇器組成),也可以為XML文檔或Window對象,甚至還可以為一段HTML代碼。它還可以有第二個參數(shù),用來設(shè)置其作用范圍。1.參數(shù)為表達(dá)式使用12.1.1節(jié)的測試頁面,現(xiàn)希望修改頁面上class為first的
標(biāo)簽元素的顯示樣式,可以有如下代碼。$(".first").addClass("indianred");/*核心函數(shù)使用*/12.1.2使用核心函數(shù)2.參數(shù)為XML文檔或Window對象jQu
4、ery核心函數(shù)的參數(shù)還可以為XML文檔或Window對象,如有下面的代碼。$(document.body).css("background","white");/*核心函數(shù)使用*/該段代碼將設(shè)置頁面的背景色為白色,document.body用來定位到頁面上的標(biāo)簽。12.1.2使用核心函數(shù)3.參數(shù)為HTML代碼jQuery核心函數(shù)還可以根據(jù)提供的原始HTML標(biāo)記字符串,動態(tài)創(chuàng)建由jQuery對象包裝的DOM元素??梢詡鬟f一個手寫的HTML字符串,或者由某些模板引擎或插件創(chuàng)建的字符串
5、,也可以是通過AJAX加載過來的字符串。如針對下面的代碼。/*核心函數(shù)使用*/$(“
我是剛被添加的
").appendTo("#div1");12.1.2使用核心函數(shù)12.2jQuery對象訪問使用jQuery可以很容易地得到頁面上的元素,并可以使用相應(yīng)的API獲得元素的屬性。前面章節(jié)中已經(jīng)介紹了jQuery選擇器以及過濾器的使用,本節(jié)將介紹幾個jQuery中較常用的進(jìn)行對象訪問及操作的方法和屬性,分別用來獲得jQuery對象的長度,
6、獲得頁面中某個對象或者迭代某個對象集。12.2.1獲得長度所謂jQuery對象的長度即是指該頁面上能夠匹配該jQuery對象的元素的個數(shù)。在jQuery中,有兩種方式用來獲得jQuery對象的長度,一種是使用length屬性直接獲得,還有一種是使用size()函數(shù)。使用本章的測試頁面。12.2.2獲得其中某個對象jQuery中用于獲得頁面中某個對象的方法有兩個,get()函數(shù)以及index函數(shù),下面將結(jié)合實例介紹。1.get()函數(shù)get()函數(shù)可以帶有一個參數(shù)或者不帶參數(shù),不帶參數(shù)時將返回一個DOM元素的集合,帶有一個參數(shù)的時候,參數(shù)表示匹配的DOM元素集合中的索引
7、,函數(shù)原型如表12.2所示。函數(shù)名get([index])作用不帶參數(shù)時取得所有匹配的DOM元素集合。參數(shù)index表示取得第幾個匹配的元素,此時函數(shù)用于取得其中一個匹配的元素返回值jQuery參數(shù)index(Number):取得第index個位置上的元素2.index()函數(shù)使用get(index)函數(shù)可以根據(jù)已有的index定位匹配的元素位置,同樣,如果在已經(jīng)得到元素的情況下也可以查詢其在某DOM元素數(shù)組中的位置,這就需要使用jQuery的index(subject)函數(shù)。函數(shù)名index(subject)作用搜索與參數(shù)表示的對象匹配的元素,并返