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