jQuery培訓(xùn)課程第一課時(shí)(共68張)

1、jQuery 基礎(chǔ)教程基礎(chǔ)教程基于基于WebWeb標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)與制作配套課件標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)與制作配套課件 V1.0 V1.0 內(nèi)容簡(jiǎn)介內(nèi)容簡(jiǎn)介jQuery的原理的原理一一jQuery對(duì)象和對(duì)象和DOM對(duì)象對(duì)象二二jQuery選擇器選擇器三三三三jQueryjQuery的原理的原理jQuery的歷史的歷史v jQuery是由美國(guó)人是由美國(guó)人 John Resig 創(chuàng)建，它是輕量級(jí)創(chuàng)建，它是輕量級(jí)js庫(kù)這是庫(kù)這是其他的其他的js庫(kù)所不及的。庫(kù)所不及的。 2005年年8月月22日，日，John Resig提出提出Behaviour框架的三種框架的三種改良建議（支持層級(jí)選擇符、支持事件綁定、消除冗改

2、良建議（支持層級(jí)選擇符、支持事件綁定、消除冗余關(guān)鍵字）余關(guān)鍵字） 2006年年1月月14日日jQuery正式發(fā)布正式發(fā)布 2006年年1月月25日，首個(gè)日，首個(gè)jQuery插件發(fā)布插件發(fā)布 2006年年2月月26日，日，jQuery AJAX插件發(fā)布插件發(fā)布v jQuery是一種新的是一種新的JavaScript庫(kù)。庫(kù)。 jQuery是繼是繼prototype只有又一個(gè)優(yōu)秀的只有又一個(gè)優(yōu)秀的js框架框架 其宗旨是：其宗旨是：WRITE LESS, DO MORE,(寫更少的寫更少的代碼，做更多的事情。代碼，做更多的事情。)jQuery的原理的原理v jQuery是為了改變是為了改變javasc

3、ript的編碼方式而設(shè)計(jì)的，它把的編碼方式而設(shè)計(jì)的，它把面向?qū)ο竺嫦驅(qū)ο笏枷氚l(fā)揮的淋漓盡致思想發(fā)揮的淋漓盡致v 它那么它是如何實(shí)現(xiàn)它的聲明的呢它那么它是如何實(shí)現(xiàn)它的聲明的呢?這里這里,用以下的一段簡(jiǎn)用以下的一段簡(jiǎn)短的使用流程短的使用流程: 查找查找(創(chuàng)建創(chuàng)建)jQuery對(duì)象對(duì)象:$(”selector”); 調(diào)用調(diào)用jQuery對(duì)象的方法完成我們需要完成的工作對(duì)象的方法完成我們需要完成的工作:$(”selector”).doOurWork();jQuery就是以這種可以說(shuō)是最簡(jiǎn)單的編碼邏輯來(lái)改變就是以這種可以說(shuō)是最簡(jiǎn)單的編碼邏輯來(lái)改變js編編碼方式的碼方式的.這兩個(gè)步驟是這兩個(gè)步驟是jQue

4、ry的編碼邏輯核心的編碼邏輯核心,要實(shí)現(xiàn)要實(shí)現(xiàn)這種簡(jiǎn)潔編碼方式這種簡(jiǎn)潔編碼方式,創(chuàng)建創(chuàng)建jQuery對(duì)象這一環(huán)節(jié)至關(guān)重要對(duì)象這一環(huán)節(jié)至關(guān)重要.因此因此,jQuery的的dom元素查找能力相當(dāng)強(qiáng)悍。元素查找能力相當(dāng)強(qiáng)悍。*jQuery() = $()jQuery的優(yōu)勢(shì)的優(yōu)勢(shì) v輕量級(jí)輕量級(jí) （Lightweight）v強(qiáng)大的選擇器強(qiáng)大的選擇器 v出色的出色的DOM操作封裝操作封裝 v可靠的事件處理機(jī)制可靠的事件處理機(jī)制 v出色的瀏覽器兼容性出色的瀏覽器兼容性v完善的完善的AJAXv鏈?zhǔn)讲僮鞣绞芥準(zhǔn)讲僮鞣绞絭行為層和結(jié)構(gòu)層分離行為層和結(jié)構(gòu)層分離v豐富的插件支持和完善的文檔豐富的插件支持和完善的文檔

5、原理：寫得少原理：寫得少, 做得多做得多JavaScript框架簡(jiǎn)介框架簡(jiǎn)介v隨著隨著JavaScript、CSS、Ajax等技術(shù)的不斷等技術(shù)的不斷進(jìn)步，越來(lái)越多的開發(fā)者將一個(gè)又一個(gè)豐進(jìn)步，越來(lái)越多的開發(fā)者將一個(gè)又一個(gè)豐富多彩的程序功能進(jìn)行封裝，供其他人可富多彩的程序功能進(jìn)行封裝，供其他人可以調(diào)用這些封裝好的以調(diào)用這些封裝好的程序組件（框架）程序組件（框架）v當(dāng)前流行的當(dāng)前流行的 JavaScript 庫(kù)有庫(kù)有: jQuery的使用的使用v下載：下載：http:/提供了最新的提供了最新的jQuery框架下載。通常只需下載最小的框架下載。通常只需下載最小的jQuery包包（Minified）即可

6、。目前最新的版本）即可。目前最新的版本jquery-2.0.3.min.js文件只有文件只有81.6 KB *歷史版本：歷史版本：jQuery 1.0、jQuery 1.1、jQuery 1.1.3、jQuery 1.2、jQuery 1.2.6 、 jQuery 1.3 、 jQuery 1.3.2 、 jQuery 1.4、 jQuery1.5 、 jQuery 1.6 、 jQuery 1.7 、 jQuery 1.7.1 、 jQuery 1.7.2jQuery 1.10.2、jQuery 2.0.3v引用：引用：v將將jQuery框架文件導(dǎo)入后，就可以使用框架文件導(dǎo)入后，就可以使用j

7、Query的選擇器和各種函數(shù)功能了。的選擇器和各種函數(shù)功能了。 第一個(gè)第一個(gè)jQuery程序程序 $(document).ready(function() alert(Hello World!););引入引入jQuery等待等待DOM文檔載入后執(zhí)行類文檔載入后執(zhí)行類似于似于window.onload彈出一個(gè)對(duì)話框彈出一個(gè)對(duì)話框jQueryjQuery對(duì)象與對(duì)象與DOMDOM對(duì)象對(duì)象jQuery 對(duì)象對(duì)象vjQuery 對(duì)象就是對(duì)象就是通過(guò)通過(guò) jQuery 包裝包裝 DOM 對(duì)象后對(duì)象后產(chǎn)生的對(duì)象產(chǎn)生的對(duì)象vjQuery 對(duì)象是對(duì)象是 jQuery 獨(dú)有的獨(dú)有的. 如果一個(gè)對(duì)象是如果一個(gè)對(duì)象是

8、 jQuery 對(duì)象對(duì)象, 那么它就可以使用那么它就可以使用 jQuery 里的方法里的方法: $(“#tab”).html();vjQuery 對(duì)象無(wú)法使用對(duì)象無(wú)法使用 DOM 對(duì)象的任何方法對(duì)象的任何方法, 同同樣樣 DOM 對(duì)象也不能使用對(duì)象也不能使用 jQuery 里的任何方法里的任何方法v建議約定建議約定：如果獲取的是：如果獲取的是 jQuery 對(duì)象對(duì)象, 那么要在那么要在變量前面加上變量前面加上 $. var $variable = jQuery 對(duì)象對(duì)象 var variable = DOM 對(duì)象對(duì)象jQuery 對(duì)象轉(zhuǎn)成對(duì)象轉(zhuǎn)成 DOM 對(duì)象對(duì)象vjQuery 對(duì)象不能使用對(duì)

9、象不能使用 DOM 中的方法中的方法, 但如果但如果 jQuery 沒(méi)有封裝想要的方法沒(méi)有封裝想要的方法, 不得不使用不得不使用 DOM方方法的時(shí)候法的時(shí)候, 有如下兩種處理方法有如下兩種處理方法: jQuery 對(duì)象是一個(gè)數(shù)組對(duì)象對(duì)象是一個(gè)數(shù)組對(duì)象, 可以通過(guò)可以通過(guò) index 的方法的方法得到對(duì)應(yīng)的得到對(duì)應(yīng)的 DOM對(duì)象對(duì)象$(#msg)0 使用使用 jQuery 中的中的 get(index) 方法得到相應(yīng)的方法得到相應(yīng)的 DOM 對(duì)對(duì)象象$(#msg).get(0)jQuery() = $()DOM 對(duì)象轉(zhuǎn)成對(duì)象轉(zhuǎn)成 jQuery 對(duì)象對(duì)象v對(duì)于一個(gè)對(duì)于一個(gè) DOM 對(duì)象對(duì)象, 只需

10、要用只需要用 $() 把把 DOM 對(duì)象包裝起來(lái)對(duì)象包裝起來(lái)(jQuery 對(duì)象就是通過(guò)對(duì)象就是通過(guò) jQuery 包裝包裝 DOM 對(duì)象后產(chǎn)生的對(duì)象對(duì)象后產(chǎn)生的對(duì)象), 就就可以獲得一個(gè)可以獲得一個(gè) jQuery 對(duì)象對(duì)象. 例如：例如： $(document.getElementById(“msg”) $(“#msg”)v轉(zhuǎn)換后就可以使用轉(zhuǎn)換后就可以使用 jQuery 中的方法了中的方法了jQuery對(duì)象與對(duì)象與dom對(duì)象的轉(zhuǎn)換舉例對(duì)象的轉(zhuǎn)換舉例v以下幾種寫法都是正確的：以下幾種寫法都是正確的：$(#msg).html();$(#msg)0.innerHTML;$(#msg).eq(0)0

11、.innerHTML;$(#msg).get(0).innerHTML;v如：如：$(#msg)0，$(div).eq(1)0，$(div).get()1，$(td)5這些都是這些都是dom對(duì)對(duì)象，可以使用象，可以使用dom中的方法，但不能再使用中的方法，但不能再使用jQuery的方法的方法 jQueryjQuery的選擇器的選擇器jQuery 選擇器選擇器v 選擇器是選擇器是 jQuery 的根基的根基, 在在 jQuery 中中, 對(duì)事件處理對(duì)事件處理, 遍歷遍歷 DOM 和和 Ajax 操作都依賴于選擇器操作都依賴于選擇器v jQuery 選擇器的優(yōu)點(diǎn)選擇器的優(yōu)點(diǎn): 簡(jiǎn)潔的寫法簡(jiǎn)潔的寫法

12、 完善的事件處理機(jī)制完善的事件處理機(jī)制基本選擇器基本選擇器v基本選擇器是基本選擇器是 jQuery 中最常用的選擇中最常用的選擇器器, 也是最簡(jiǎn)單的選擇器也是最簡(jiǎn)單的選擇器, 它通過(guò)元素它通過(guò)元素 id, class 和標(biāo)記名來(lái)查找和標(biāo)記名來(lái)查找 DOM 元素元素基本選擇器示例基本選擇器示例v改變改變 id 為為 one 的元素的背景色為的元素的背景色為 紅色紅色$(#one).css(backgroundColor,red);v改變?cè)孛麨楦淖冊(cè)孛麨?的所有元素的背景色為的所有元素的背景色為 # bbffaa，字體顏色為紅色，字體顏色為紅色$(p).css(color:red,backgr

13、oundColor:#bbffaa);v改變第一個(gè)改變第一個(gè)元素的背景色為紅色元素的背景色為紅色$(p).eq(0).css(backgroundColor,red);v改變所有改變所有元素和元素和 id 為為 one 的元素的背的元素的背景色為景色為 # bbffaa$(h1,#one).css(backgroundColor,#bbffaa);層次選擇器層次選擇器v如果想通過(guò)如果想通過(guò) DOM 元素之間的層次關(guān)系來(lái)獲取特定元素元素之間的層次關(guān)系來(lái)獲取特定元素, 例如后代元素例如后代元素, 子元素子元素, 相鄰元素相鄰元素, 兄弟元素等兄弟元素等, 則需要使則需要使用層次選擇器用層次選擇器v

14、注意注意: (“prev div”) 選擇器只能選擇選擇器只能選擇 “# prev ” 元素元素后后面的同輩元素面的同輩元素; 而而 jQuery 中的方法中的方法 siblings() 與前后位與前后位置無(wú)關(guān)置無(wú)關(guān), 只要是同輩節(jié)點(diǎn)就可以選取只要是同輩節(jié)點(diǎn)就可以選取層次選擇器示例層次選擇器示例v改變改變 內(nèi)內(nèi)所有所有 的背景色為的背景色為 # bbffaav$(“body div)v改變改變 內(nèi)內(nèi)子子 的背景色為的背景色為 # bbffaav$(“bodydiv)v改變改變 id 為為 one 的的下一個(gè)下一個(gè) 的背景色為的背景色為 # bbffaav$(#one+div)v改變改變 id

15、為為 two 的元素后面的的元素后面的所有兄弟所有兄弟的元素的背的元素的背景色為景色為 # bbffaav$(#twodiv)v改變改變 id 為為 two 的元素所有的元素所有 兄弟元素的背景色為兄弟元素的背景色為 # bbffaa $(#two). siblings(p) 過(guò)濾選擇器過(guò)濾選擇器v過(guò)濾選擇器過(guò)濾選擇器主要是通過(guò)特定的過(guò)濾規(guī)則來(lái)主要是通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選出所需的篩選出所需的 DOM 元素元素, 該選擇器該選擇器都以都以 “:” 開頭開頭v按照不同的過(guò)濾規(guī)則按照不同的過(guò)濾規(guī)則, 過(guò)濾選擇器又可分為過(guò)濾選擇器又可分為基本過(guò)濾基本過(guò)濾, 內(nèi)容過(guò)濾內(nèi)容過(guò)濾, 可見(jiàn)性過(guò)濾可見(jiàn)性過(guò)濾,

16、 屬性過(guò)濾屬性過(guò)濾, 子元素過(guò)濾和表單對(duì)象屬性過(guò)濾選擇器子元素過(guò)濾和表單對(duì)象屬性過(guò)濾選擇器.基本過(guò)濾選擇器基本過(guò)濾選擇器基本過(guò)濾選擇器示例基本過(guò)濾選擇器示例v 改變第一個(gè)改變第一個(gè) div 元素的背景色為元素的背景色為 # bbffaav$(div:first)v 改變改變id不為不為 one 的所有的所有p元素的背景色為元素的背景色為 # bbffaav$(p:not(#one)v 改變索引值為偶數(shù)的改變索引值為偶數(shù)的 tr元素的背景色為元素的背景色為 # bbffaav$(“tr:even)v 改變索引值為大于改變索引值為大于 3 且為奇數(shù)的且為奇數(shù)的 p元素的背景色為元素的背景色為 #

17、bbffaav$(“p:gt(3):odd)v 改變所有的標(biāo)題元素的背景色為改變所有的標(biāo)題元素的背景色為 # bbffaav$(:header)v 改變當(dāng)前正在執(zhí)行動(dòng)畫的所有元素的背景色為改變當(dāng)前正在執(zhí)行動(dòng)畫的所有元素的背景色為 # bbffaav $(:animated)內(nèi)容過(guò)濾選擇器內(nèi)容過(guò)濾選擇器v內(nèi)容過(guò)濾選擇器的過(guò)濾規(guī)則主要體現(xiàn)在內(nèi)容過(guò)濾選擇器的過(guò)濾規(guī)則主要體現(xiàn)在它它所包含的子元素所包含的子元素和和文本內(nèi)容文本內(nèi)容上上內(nèi)容過(guò)濾選擇器示例內(nèi)容過(guò)濾選擇器示例v改變含有文本改變含有文本 di 的的 p元素的背景色為元素的背景色為 # bbffaav$(p:cotains(di)v改變不包含子元

18、素改變不包含子元素(或者文本元素或者文本元素) 的的 div 空空元素的背景色為元素的背景色為 # bbffaa$(p:empty)v改變含有改變含有 class 為為 mini 元素的元素的 p元素的背景元素的背景色為色為 # bbffaav$(p:has(.mini)v改變含有子元素改變含有子元素(或者文本元素或者文本元素)的的div元素元素的背景色為的背景色為 # bbffaa $(p:parent)可見(jiàn)性過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器v可見(jiàn)性過(guò)濾選擇器是可見(jiàn)性過(guò)濾選擇器是根據(jù)元素的可見(jiàn)和不可見(jiàn)狀態(tài)根據(jù)元素的可見(jiàn)和不可見(jiàn)狀態(tài)來(lái)選來(lái)選擇相應(yīng)的元素?fù)裣鄳?yīng)的元素v可見(jiàn)選擇器可見(jiàn)選擇器 :hidde

19、n 不僅包含樣式屬性不僅包含樣式屬性 display 為為 none 的元素的元素, 也包含文本隱藏域也包含文本隱藏域 ()和和 visible:hidden 之類的元素之類的元素可見(jiàn)性過(guò)濾選擇器示例可見(jiàn)性過(guò)濾選擇器示例v改變所有可見(jiàn)的改變所有可見(jiàn)的div元素的背景色為元素的背景色為 # bbffaav$(“div:visible).css(background-color,#bbffaa);v選取所有不可見(jiàn)的元素選取所有不可見(jiàn)的元素, 利用利用 jQuery 中的中的 show() 方法將它們顯示出來(lái)方法將它們顯示出來(lái), 并設(shè)置其背景并設(shè)置其背景色為色為 # bbffaav選取所有的文本隱藏

20、域選取所有的文本隱藏域, 并打印它們的值并打印它們的值怎么顯示？怎么顯示？屬性過(guò)濾選擇器屬性過(guò)濾選擇器v屬性過(guò)濾選擇器的過(guò)濾規(guī)則是屬性過(guò)濾選擇器的過(guò)濾規(guī)則是通過(guò)元素的通過(guò)元素的屬性來(lái)獲取相應(yīng)的元素屬性來(lái)獲取相應(yīng)的元素屬性過(guò)濾選擇器示例屬性過(guò)濾選擇器示例v選取下列元素選取下列元素,改變其背景色為改變其背景色為 # bbffaav含有屬性含有屬性title 的的div元素元素 $(divtitle)v屬性屬性title值等于值等于test的的div元素元素 $(“divtitle=text”)v屬性屬性title值不等于值不等于test的的div元素元素(沒(méi)有屬性沒(méi)有屬性title的也將的也將被選

21、中被選中).v屬性屬性title值值 以以te開始開始 的的div元素元素.v屬性屬性title值值 以以est結(jié)束結(jié)束 的的div元素元素.v屬性屬性title值值 含有含有es的的div元素元素.v選取有屬性選取有屬性id的的div元素，然后在結(jié)果中選取屬性元素，然后在結(jié)果中選取屬性title值值含有含有“es”的的 div 元素元素.怎么顯示？怎么顯示？子元素過(guò)濾選擇器子元素過(guò)濾選擇器v nth-child() 選擇器詳解如下：選擇器詳解如下： nth-child(even/odd): 能選取每個(gè)父元素下的索引值為能選取每個(gè)父元素下的索引值為偶偶(奇奇)數(shù)的元素?cái)?shù)的元素 nth-chil

22、d(2): 能選取每個(gè)父元素下的索引值為能選取每個(gè)父元素下的索引值為 2 的元素的元素 nth-child(3n): 能選取每個(gè)父元素下的索引值是能選取每個(gè)父元素下的索引值是 3 的倍的倍數(shù)數(shù) 的元素的元素 nth-child(3n + 1): 能選取每個(gè)父元素下的索引值是能選取每個(gè)父元素下的索引值是 3n + 1的元素的元素子元素過(guò)濾選擇器示例子元素過(guò)濾選擇器示例v選取下列元素選取下列元素,改變其背景色為改變其背景色為 # bbffaav每個(gè)每個(gè)class為為one的的div父元素下的第父元素下的第2個(gè)子元素個(gè)子元素.v每個(gè)每個(gè)class為為one的的div父元素下的第一個(gè)子元素父元素下的第

23、一個(gè)子元素v每個(gè)每個(gè)class為為one的的div父元素下的最后一個(gè)子元素父元素下的最后一個(gè)子元素v如果如果class為為one的的div父元素下的僅僅只有一個(gè)子元素，父元素下的僅僅只有一個(gè)子元素，那么選中這個(gè)子元素那么選中這個(gè)子元素$(“divclass=one:only-child)表單對(duì)象屬性過(guò)濾選擇器表單對(duì)象屬性過(guò)濾選擇器v此選擇器主要對(duì)所選擇的表單元素進(jìn)行過(guò)濾此選擇器主要對(duì)所選擇的表單元素進(jìn)行過(guò)濾表單對(duì)象屬性過(guò)濾選擇器示例表單對(duì)象屬性過(guò)濾選擇器示例v利用利用 jQuery 對(duì)象的對(duì)象的 val() 方法改變表單內(nèi)方法改變表單內(nèi)可用可用 元素的值元素的值$(“input:enabled

24、”).val(Hello World);v利用利用 jQuery 對(duì)象的對(duì)象的 val() 方法改變表單內(nèi)方法改變表單內(nèi)不可用不可用 元素的值元素的值v利用利用 jQuery 對(duì)象的對(duì)象的 length 屬性獲取多選框?qū)傩垣@取多選框選中的個(gè)數(shù)選中的個(gè)數(shù)v利用利用 jQuery 對(duì)象的對(duì)象的 text() 方法獲取下拉框方法獲取下拉框選中的內(nèi)容選中的內(nèi)容表單選擇器表單選擇器v此選擇器主要對(duì)所選擇的表單元素進(jìn)行過(guò)濾此選擇器主要對(duì)所選擇的表單元素進(jìn)行過(guò)濾練習(xí)練習(xí)v1. 給網(wǎng)頁(yè)中所有的給網(wǎng)頁(yè)中所有的 元素且元素內(nèi)容中包含元素且元素內(nèi)容中包含“段落段落”字樣添加字樣添加 onclick 事件事件v2.

25、給一個(gè)特定的表格隔行變色，并且添加全選、全不選給一個(gè)特定的表格隔行變色，并且添加全選、全不選功能功能v3. 對(duì)多選框進(jìn)行操作對(duì)多選框進(jìn)行操作, 輸出選中的多選框的個(gè)數(shù)輸出選中的多選框的個(gè)數(shù)jQueryjQuery中對(duì)中對(duì)DOMDOM操作操作jQuery 中的中的 DOM 操作操作vDOM(Document Object Model文檔對(duì)象模型文檔對(duì)象模型)：一：一種與瀏覽器種與瀏覽器, 平臺(tái)平臺(tái), 語(yǔ)言無(wú)關(guān)的接口語(yǔ)言無(wú)關(guān)的接口, 使用該接口可以使用該接口可以輕松地訪問(wèn)頁(yè)面中所有的標(biāo)準(zhǔn)組件輕松地訪問(wèn)頁(yè)面中所有的標(biāo)準(zhǔn)組件vDOM 操作的分類操作的分類: DOM Core: DOM Core 并不專

26、屬于并不專屬于 JavaScript, 任何一任何一種支持種支持 DOM 的程序設(shè)計(jì)語(yǔ)言都可以使用它的程序設(shè)計(jì)語(yǔ)言都可以使用它. 它的用途它的用途并非僅限于處理網(wǎng)頁(yè)并非僅限于處理網(wǎng)頁(yè), 也可以用來(lái)處理任何一種是用標(biāo)也可以用來(lái)處理任何一種是用標(biāo)記語(yǔ)言編寫出來(lái)的文檔記語(yǔ)言編寫出來(lái)的文檔, 例如例如: XML HTML DOM: 使用使用 JavaScript 和和 DOM 為為 HTML 文文件編寫腳本時(shí)件編寫腳本時(shí),有許多專屬于有許多專屬于 HTML-DOM 的屬性的屬性 CSS-DOM:針對(duì)于針對(duì)于 CSS 操作操作, 在在 JavaScript 中中, CSS-DOM 主要用于獲取和設(shè)置主要

27、用于獲取和設(shè)置 style 對(duì)象的各種屬性對(duì)象的各種屬性查找節(jié)點(diǎn)查找節(jié)點(diǎn)v查找節(jié)點(diǎn)查找節(jié)點(diǎn): 查找元素節(jié)點(diǎn)查找元素節(jié)點(diǎn): 通過(guò)通過(guò) jQuery 選擇器完成選擇器完成. 查找屬性節(jié)點(diǎn)查找屬性節(jié)點(diǎn): 查找到所需要的元素之后查找到所需要的元素之后, 可以可以調(diào)用調(diào)用 jQuery 對(duì)象對(duì)象的的 attr() 方法來(lái)獲取它的各種方法來(lái)獲取它的各種屬性值屬性值創(chuàng)建節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)v創(chuàng)建節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn): 使用使用 jQuery 的工廠函數(shù)的工廠函數(shù) $(): $(html); 會(huì)根會(huì)根據(jù)傳入的據(jù)傳入的 html 標(biāo)記字符串創(chuàng)建一個(gè)標(biāo)記字符串創(chuàng)建一個(gè) DOM 對(duì)象對(duì)象, 并把并把這個(gè)這個(gè) DOM 對(duì)象包裝成一個(gè)

28、對(duì)象包裝成一個(gè) jQuery 對(duì)象對(duì)象返回返回.v注意注意: 動(dòng)態(tài)創(chuàng)建的新元素節(jié)點(diǎn)不會(huì)被自動(dòng)添加到文檔動(dòng)態(tài)創(chuàng)建的新元素節(jié)點(diǎn)不會(huì)被自動(dòng)添加到文檔中中, 而是而是需要使用其他方法將其插入到文檔中需要使用其他方法將其插入到文檔中; 當(dāng)創(chuàng)建單個(gè)元素時(shí)當(dāng)創(chuàng)建單個(gè)元素時(shí), 需需注意閉合標(biāo)簽和使用標(biāo)準(zhǔn)的注意閉合標(biāo)簽和使用標(biāo)準(zhǔn)的 XHTML 格式格式. 例如創(chuàng)建一個(gè)例如創(chuàng)建一個(gè)元素元素, 可以使用可以使用 $(“”) 或或 $(“”), 但不能使用但不能使用 $(“”) 或或 $(“”)v創(chuàng)建文本節(jié)點(diǎn)就是在創(chuàng)建元素節(jié)點(diǎn)時(shí)直接把文本內(nèi)容創(chuàng)建文本節(jié)點(diǎn)就是在創(chuàng)建元素節(jié)點(diǎn)時(shí)直接把文本內(nèi)容寫出來(lái)寫出來(lái); 創(chuàng)建屬性節(jié)點(diǎn)也

29、是在創(chuàng)建元素節(jié)點(diǎn)時(shí)一起創(chuàng)創(chuàng)建屬性節(jié)點(diǎn)也是在創(chuàng)建元素節(jié)點(diǎn)時(shí)一起創(chuàng)建建插入節(jié)點(diǎn)插入節(jié)點(diǎn)(1)v動(dòng)態(tài)創(chuàng)建了動(dòng)態(tài)創(chuàng)建了 HTML 元素之后元素之后, 還需要將新還需要將新創(chuàng)建的節(jié)點(diǎn)插入到文檔中創(chuàng)建的節(jié)點(diǎn)插入到文檔中, 即成為文檔中某即成為文檔中某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)插入節(jié)點(diǎn)插入節(jié)點(diǎn)(2)v以上方法不但能將新創(chuàng)建的以上方法不但能將新創(chuàng)建的 DOM 元素插入到文元素插入到文檔中檔中, 也也能對(duì)原有的能對(duì)原有的 DOM 元素進(jìn)行移動(dòng)元素進(jìn)行移動(dòng).創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)示例創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)示例vvar newP =$(武廣高速鐵路即將通車！武廣高速鐵路即將通車！);vnewP.insertAfter(“

30、#chapter”); /將創(chuàng)建的將創(chuàng)建的newP元元素插入到素插入到ID為為#chapter的元素之后的元素之后 v或者或者vnewP.appendTo(“body”); /插入到插入到body元素里元素里 刪除節(jié)點(diǎn)刪除節(jié)點(diǎn)vremove(): 從從 DOM 中刪除所有匹配的元素中刪除所有匹配的元素, 傳入的參數(shù)用于根據(jù)傳入的參數(shù)用于根據(jù) jQuery 表達(dá)式來(lái)篩選表達(dá)式來(lái)篩選元素元素. 當(dāng)某個(gè)節(jié)點(diǎn)用當(dāng)某個(gè)節(jié)點(diǎn)用 remove() 方法刪除后方法刪除后, 該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將被同時(shí)刪該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將被同時(shí)刪除除. 這個(gè)方法的返回值是一個(gè)指向已被刪除這個(gè)方法的返回值是一個(gè)指

31、向已被刪除的節(jié)點(diǎn)的引用的節(jié)點(diǎn)的引用.vempty(): 清空節(jié)點(diǎn)清空節(jié)點(diǎn) 清空元素中的所有后清空元素中的所有后代節(jié)點(diǎn)代節(jié)點(diǎn)(不包含屬性節(jié)點(diǎn)不包含屬性節(jié)點(diǎn)).復(fù)制節(jié)點(diǎn)復(fù)制節(jié)點(diǎn)vclone(): 克隆匹配的克隆匹配的 DOM 元素元素, 返回返回值為克隆后的副本值為克隆后的副本. 但此時(shí)復(fù)制的新節(jié)但此時(shí)復(fù)制的新節(jié)點(diǎn)不具有任何行為點(diǎn)不具有任何行為.vclone(true): 復(fù)制元素的同時(shí)也復(fù)制元復(fù)制元素的同時(shí)也復(fù)制元素中的的事件素中的的事件 替換節(jié)點(diǎn)替換節(jié)點(diǎn)vreplaceWith(): 將所有匹配的元素都替換為將所有匹配的元素都替換為指定的指定的 HTML 或或 DOM 元素元素vreplace

32、All(): 顛倒了的顛倒了的 replaceWith() 方法方法.v注意注意: 若在替換之前若在替換之前, 已經(jīng)在元素上綁定了已經(jīng)在元素上綁定了事件事件, 替換后原先綁定的事件會(huì)與原先的元替換后原先綁定的事件會(huì)與原先的元素一起消失素一起消失包裹節(jié)點(diǎn)包裹節(jié)點(diǎn)vwrap(): 將指定節(jié)點(diǎn)用其他標(biāo)記包裹起來(lái)將指定節(jié)點(diǎn)用其他標(biāo)記包裹起來(lái). 該方法對(duì)于需要在文檔中插入額外的結(jié)構(gòu)該方法對(duì)于需要在文檔中插入額外的結(jié)構(gòu)化標(biāo)記非常有用化標(biāo)記非常有用, 而且不會(huì)破壞原始文檔的而且不會(huì)破壞原始文檔的語(yǔ)義語(yǔ)義.vwrapAll(): 將所有匹配的元素用一個(gè)元素來(lái)將所有匹配的元素用一個(gè)元素來(lái)包裹包裹. 而而 wra

33、p() 方法是將所有的元素進(jìn)行方法是將所有的元素進(jìn)行單獨(dú)包裹單獨(dú)包裹.vwrapInner(): 將每一個(gè)匹配的元素的將每一個(gè)匹配的元素的子內(nèi)子內(nèi)容容(包括文本節(jié)點(diǎn)包括文本節(jié)點(diǎn))用其他結(jié)構(gòu)化標(biāo)記包裹起用其他結(jié)構(gòu)化標(biāo)記包裹起來(lái)來(lái)屬性操作屬性操作vattr(): 獲取獲取html屬性和設(shè)置屬性屬性和設(shè)置屬性 當(dāng)為該方法傳遞一個(gè)參數(shù)時(shí)當(dāng)為該方法傳遞一個(gè)參數(shù)時(shí), 即為某元素的獲即為某元素的獲取指定屬性取指定屬性 當(dāng)為該方法傳遞兩個(gè)參數(shù)時(shí)當(dāng)為該方法傳遞兩個(gè)參數(shù)時(shí), 即為某元素設(shè)置即為某元素設(shè)置指定屬性的值指定屬性的值vjQuery 中有很多方法都是一個(gè)函數(shù)實(shí)現(xiàn)獲取和設(shè)中有很多方法都是一個(gè)函數(shù)實(shí)現(xiàn)獲取和設(shè)

34、置置. 如如: attr(), html(), text(), val(), height(), width(), css() 等等.vremoveAttr(): 刪除指定元素的指定屬性刪除指定元素的指定屬性樣式操作樣式操作v獲取獲取 class 和設(shè)置和設(shè)置 class : class 是元素的一個(gè)屬性是元素的一個(gè)屬性, 所以獲取所以獲取 class 和設(shè)置和設(shè)置 class 都可以使用都可以使用 attr() 方方法來(lái)完成法來(lái)完成.v追加樣式追加樣式: addClass() v移除樣式移除樣式: removeClass() - 從匹配的元素中刪除從匹配的元素中刪除全部或指定的全部或指定的

35、classv切換樣式切換樣式: toggleClass() - 控制樣式上的重復(fù)切控制樣式上的重復(fù)切換換.如果類名存在則刪除它如果類名存在則刪除它, 如果類名不存在則添如果類名不存在則添加它加它.v判斷是否含有某個(gè)樣式判斷是否含有某個(gè)樣式: hasClass() - 判斷元素中判斷元素中是否含有某個(gè)是否含有某個(gè) class, 如果有如果有, 則返回則返回 true; 否則返否則返回回 false設(shè)置和獲取設(shè)置和獲取 HTML, 文本和值文本和值v讀取和設(shè)置某個(gè)元素中的讀取和設(shè)置某個(gè)元素中的 HTML 內(nèi)容內(nèi)容: html() . 該該方法可以用于方法可以用于 XHTML, 但不能用于但不能用于

36、 XML 文檔文檔v讀取和設(shè)置某個(gè)元素中的讀取和設(shè)置某個(gè)元素中的文本內(nèi)容文本內(nèi)容: text(). 該方法該方法既可以用于既可以用于 XHTML 也可以用于也可以用于 XML 文檔文檔.v讀取和設(shè)置某個(gè)元素中的值讀取和設(shè)置某個(gè)元素中的值: val() - 該方法類似該方法類似 JavaScript 中的中的 value 屬性屬性. 對(duì)于對(duì)于文本框文本框, 下拉列下拉列表框表框, 單選框單選框該方法可返回元素的值該方法可返回元素的值(多選框只能多選框只能返回第一個(gè)值返回第一個(gè)值).如果為多選下拉列表框如果為多選下拉列表框, 則返回一則返回一個(gè)包含所有選擇值的數(shù)組個(gè)包含所有選擇值的數(shù)組val()

37、方法的兩個(gè)練習(xí)方法的兩個(gè)練習(xí)獲得獲得焦點(diǎn)焦點(diǎn)沒(méi)輸沒(méi)輸入值入值輸入值輸入值提示：可以借助表單元素的提示：可以借助表單元素的 defaultValue 屬性屬性提示：提示：js 中數(shù)組的表示方法中數(shù)組的表示方法“1”, “2”常用的遍歷節(jié)點(diǎn)方法常用的遍歷節(jié)點(diǎn)方法v取得匹配元素的取得匹配元素的所有子元素所有子元素組成的集合組成的集合: children(). 該方法只考慮子元素而不考慮任該方法只考慮子元素而不考慮任何后代元素何后代元素.v取得匹配元素取得匹配元素后面緊鄰的同輩元素的后面緊鄰的同輩元素的集合集合(但集合中只有一個(gè)元素但集合中只有一個(gè)元素): next()v取得匹配元素取得匹配元素前面緊

38、鄰的同輩元素的前面緊鄰的同輩元素的集合集合(但集合中只有一個(gè)元素但集合中只有一個(gè)元素): prev()v取得匹配元素前后所有的同輩元素取得匹配元素前后所有的同輩元素: siblings()CSS-DOM 操作操作v獲取和設(shè)置元素的樣式屬性獲取和設(shè)置元素的樣式屬性: css()v獲取和設(shè)置元素透明度獲取和設(shè)置元素透明度: opacity 屬性屬性v獲取和設(shè)置元素高度獲取和設(shè)置元素高度, 寬度寬度: height(), width(). 在設(shè)在設(shè)置值時(shí)置值時(shí), 若只傳遞數(shù)字若只傳遞數(shù)字, 則默認(rèn)單位是則默認(rèn)單位是 px. 如需要如需要使用其他單位則需傳遞一個(gè)字符串使用其他單位則需傳遞一個(gè)字符串,

39、例如例如 $(“p:first”).height(“2em”);v獲取元素在當(dāng)前視窗中的相對(duì)位移獲取元素在當(dāng)前視窗中的相對(duì)位移: offset(). 其返其返回對(duì)象包含了兩個(gè)屬性回對(duì)象包含了兩個(gè)屬性: top, left. 該方法只對(duì)可見(jiàn)該方法只對(duì)可見(jiàn)元素有效元素有效jQuery 中的事件中的事件 - 加載加載 DOM v在頁(yè)面加載完畢后在頁(yè)面加載完畢后, 瀏覽器會(huì)通過(guò)瀏覽器會(huì)通過(guò) JavaScript 為為 DOM 元素添加事件元素添加事件. 在常規(guī)在常規(guī)的的 JavaScript 代碼中代碼中, 通常使用通常使用 window.onload 方法方法, 在在 jQuery 中使用中使用$(

40、document).ready() 方法方法.事件綁定事件綁定點(diǎn)擊點(diǎn)擊提示：提示： 使用使用 jQuery 的的 is() 方法判斷元素是否可見(jiàn)方法判斷元素是否可見(jiàn)v對(duì)匹配的元素進(jìn)行特定的事件綁定對(duì)匹配的元素進(jìn)行特定的事件綁定: bind()v實(shí)例實(shí)例合成事件合成事件vhover(): 模擬光標(biāo)懸停時(shí)間模擬光標(biāo)懸停時(shí)間. 當(dāng)光標(biāo)移動(dòng)到元當(dāng)光標(biāo)移動(dòng)到元素上時(shí)素上時(shí), 會(huì)觸發(fā)指定的第一個(gè)函數(shù)會(huì)觸發(fā)指定的第一個(gè)函數(shù), 當(dāng)光標(biāo)移當(dāng)光標(biāo)移出這個(gè)元素時(shí)出這個(gè)元素時(shí), 會(huì)觸發(fā)指定的第二個(gè)函數(shù)會(huì)觸發(fā)指定的第二個(gè)函數(shù).vtoggle(): 用于模擬鼠標(biāo)連續(xù)單擊事件用于模擬鼠標(biāo)連續(xù)單擊事件. 第一次第一次單擊元素

41、單擊元素, 觸發(fā)指定的第一個(gè)函數(shù)觸發(fā)指定的第一個(gè)函數(shù), 當(dāng)再一次當(dāng)再一次單擊同一個(gè)元素時(shí)單擊同一個(gè)元素時(shí), 則觸發(fā)指定的第二個(gè)函則觸發(fā)指定的第二個(gè)函數(shù)數(shù), 如果有更多個(gè)函數(shù)如果有更多個(gè)函數(shù), 則依次觸發(fā)則依次觸發(fā), 直到最直到最后一個(gè)后一個(gè).vtoggle() 的另一個(gè)作用的另一個(gè)作用: 切換元素的可見(jiàn)狀態(tài)切換元素的可見(jiàn)狀態(tài).移除事件移除事件v移除某按鈕上的所有移除某按鈕上的所有 click 事件事件: $(“btn”).unbind(“click”)v移除某按鈕上的所有事件移除某按鈕上的所有事件: $(“btn”).unbind();vone(): 該方法可以為元素綁定處理函數(shù)該方法可以為元素綁定處理函數(shù). 當(dāng)處理函當(dāng)處理函數(shù)觸發(fā)一次后數(shù)觸發(fā)一次后, 立即被刪除立即被刪除. 即在每個(gè)對(duì)象上即在每個(gè)對(duì)象上, 事件事件處理函數(shù)只會(huì)被執(zhí)行一次處理