jquery培訓(xùn)教材ppt課件

1、jquery 培訓(xùn)教材羅露第一章 jquery簡(jiǎn)介 第二章jquery選擇器 第三章jquery中的DOM操作 第四章jquery中的事件和動(dòng)畫jQuery 培訓(xùn)教材第一章jQuery 簡(jiǎn)介JavaScript 庫為簡(jiǎn)化 JavaScript 的開發(fā)封裝了很多預(yù)定義的對(duì)象和函數(shù)兼容各大閱讀器常見的 JavaScript 庫PrototypeDojoYUIExt JSMoo ToolsjQuery認(rèn)識(shí) jQueryjQuery 是一個(gè) JavaScript 庫jQuery 極大地簡(jiǎn)化了 JavaScript 編程jQuery 很容易學(xué)習(xí)jQuery 的理念：寫得更少，做得更多write less

2、, do morejQuery 有優(yōu)勢(shì)不污染頂級(jí)變量出色的閱讀器兼容性鏈?zhǔn)讲僮鞣绞诫[式迭代行為層與構(gòu)造層分別跟豐富的插件支持完善的文檔開源輕量級(jí)強(qiáng)大的選擇器出色的 DOM 操作可靠的事件處置機(jī)制完善的 Ajax進(jìn)入 jQuery 世界獲得 jQuery 庫jqueryjQuery 庫位于一個(gè) JavaScript 文件中，其中包含了一切的 jQuery 函數(shù)。jquery-版本號(hào).js無緊縮版, 用于測(cè)試、學(xué)習(xí)jquery-版本號(hào).min.js緊縮版, 用于產(chǎn)品、工程)配置：無需安裝，只需有庫文件即可(庫的替代：見備注)網(wǎng)頁中引入 jQuery 庫：留意： 標(biāo)簽應(yīng)該位于頁面的 部分。在 HTM

3、L5 中，不用在 標(biāo)簽中運(yùn)用type=text/javascript 。JavaScript 是 HTML5 以及一切現(xiàn)代閱讀器中的默許腳步言語！jQuery 根底語法根底語法是：$(selector).action()美圓符號(hào)定義 jQuery 又稱工廠函數(shù)選擇器selector“查詢和“查找 HTML 元素 action() 執(zhí)行對(duì)元素的操作例如$(this).hide() / 隱藏當(dāng)前元素$(p).hide() / 隱藏一切段落$(p.test).hide() / 隱藏一切 class=test 的段落$(#test).hide() / 隱藏第 id=test 的元素jQuery 代碼風(fēng)

4、格鏈?zhǔn)讲僮黠L(fēng)格對(duì)于同一對(duì)象不超越3個(gè)操作，可直接寫一行對(duì)同一對(duì)象的操作較多，建議每行寫一個(gè)操作添加必要的注釋$(has_children).click(function()$(this).addClass(highLight).children(a).show().end().siblings().removeClass(highLight).children(a).hide(););文檔就緒函數(shù) $(document).ready()：類似 window.onload定義文檔加載完后執(zhí)行的函數(shù)$(document).ready(function()alert(Hello World!););

5、這是為了防止文檔在完全加載就緒之前運(yùn)轉(zhuǎn) jQuery 代碼。假設(shè)在文檔沒有完全加載之前就運(yùn)轉(zhuǎn)函數(shù)，操作能夠失敗。例如：試圖隱藏一個(gè)不存在的元素 獲得未完全加載的圖像的大小文檔就緒函數(shù) window.onload 與 $(document).ready() 的對(duì)比window.onload$(document).ready()執(zhí)行時(shí)機(jī)必須等網(wǎng)頁中所有內(nèi)容加載完后（包括圖片）才能執(zhí)行網(wǎng)頁中所有DOM結(jié)構(gòu)繪制完后就執(zhí)行編寫個(gè)數(shù)不能編寫多個(gè)window.onload=function();window.onload=function();此時(shí)第二個(gè)覆蓋第一個(gè)能同時(shí)編寫多個(gè)$(document).rea

6、dy(function(); $(document).ready(function();兩個(gè)函數(shù)都執(zhí)行簡(jiǎn)化寫法無$( )jQuery 對(duì)象與 DOM 對(duì)象DOM 對(duì)象：HTML的文檔對(duì)象模型中的元素對(duì)象?？山?jīng)過 javascript 的以下方法獲取jQuery 對(duì)象：經(jīng)jQuery包裝后的DOM對(duì)象兩者擁有的方法不同document.getElementById(test)document.getElementsByTagName(p)$(#test)$(p)jQuery 對(duì)象與 DOM 對(duì)象相互轉(zhuǎn)換jQuery 對(duì)象轉(zhuǎn)成 DOM 對(duì)象DOM 對(duì)象轉(zhuǎn)成 jQuery 對(duì)象var $test =

7、 $(#test);var test = $test0; /jQuery對(duì)象是一個(gè)數(shù)組，可經(jīng)過索引得到DOM對(duì)象或var test = $test.get(0);/用jQuery提供的get(index)方法得到DOM對(duì)象var test = document.getElementById(test);var $test = $(test); /用jQuery的工廠方法處理 jQuery 與其它庫的沖突jQuery 在其它庫之后導(dǎo)入jQuery.noConflict(); 讓出$運(yùn)用權(quán)然后用 jQuery 而不用 $jQuery 在其它庫之前導(dǎo)入直接用 jQuery 而不用 $，同時(shí)，可以運(yùn)用

8、$()方法作為其它庫的快捷方式概略見備注。jQuery 開發(fā)工具和插件Dreamweaver為了使 Dreamweaver 支持自動(dòng)提示需求到httpxtnd.us/dreamweaver/jquery 下載一個(gè)插件：jQuery_API.mxp如有需求見：“jquery例子集合文件夾中jQuery_API.mxp在DW中選擇 “命令-“擴(kuò)展管理-“安裝擴(kuò)展EclipsejQueryWTP 插件langtags/jquerywtp 下載Spket 插件：spket 下載jQuery 開發(fā)工具和插件AptanaVisual Studio 2021已包含jquery-1.4.1jQuery 培訓(xùn)教

9、材第二章jQuery 選擇器什么是 jQuery 選擇器方便找出文檔中的 DOM 元素可對(duì)找出的元素添加相應(yīng)行為兼容各種閱讀器jQuery 選擇器的優(yōu)點(diǎn)寫法簡(jiǎn)約$(#ID)、 $(.class) 、 $(TagName)支持 CSS1CSS3 選擇器無需思索特定閱讀器能否支持完善的處置機(jī)制元素不存在不會(huì)出錯(cuò)留意：判別元素能否存在，要判別jQuery 對(duì)象的長(zhǎng)度能否0，或者轉(zhuǎn)換成 DOM 對(duì)象來判別/不能用下面方式判別元素能否存在if($(#test)/可用以下兩種方式判別元素能否存在if($(#test).length 0)或if($(#test)0)/javascript 代碼，元素不存在會(huì)

10、出錯(cuò)document.getElementById(test).style.color=red;/jQuery 代碼，元素不存在不出錯(cuò)$(#test).css(color,red);jQuery 選擇器的類型根本選擇器層次選擇器過濾選擇器根本過濾選擇器內(nèi)容過濾選擇器可見性過濾選擇器屬性過濾選擇器子元素過濾選擇器表單域?qū)ο髮傩赃^濾選擇器表單項(xiàng)選擇擇器根本選擇器選擇器描述返回示例#id根據(jù)給定id匹配一個(gè)元素單個(gè)元素$(#t) 選取id為t的元素.class根據(jù)給定類名匹配元素集合元素$(.t) 選取所有class為t的元素element根據(jù)給定元素名匹配元素集合元素$(p) 選取所有元素*匹配所

11、有元素集合元素$(*) 選取所有元素selector1, selector2, selector3 ,將每個(gè)選擇器匹配到的元素合并后一起返回集合元素$(div, span, p.myclass) 選取所有, 和擁有class為myclass的標(biāo)簽的一組元素根本選擇器 #id#id 前往值:Array(1)概述:根據(jù)給定的ID匹配一個(gè)元素。假設(shè)選擇器中包含特殊字符，可以用兩個(gè)斜杠本義。參見例如。(2)參數(shù)：id String用于搜索的，經(jīng)過元素的 id 屬性中給定的值(3)例如：例一：描畫：查找含有特殊字符id=“runbutton的元素。 代碼見：“jquery例子集合文件夾中的example

12、s.html根本選擇器 .class.class 前往值:Array(1)概述:根據(jù)給定的類匹配元素。(2)參數(shù)：class String一個(gè)用以搜索的類。一個(gè)元素可以有多個(gè)類，只需有一個(gè)符合就能被匹配到。(3)例如：例一：描畫：選取class=“font的元素。 代碼見：“jquery例子集合文件夾中的examples.html根本選擇器 elementelement 前往值:Array(1)概述:根據(jù)給定的元素名匹配一切元素(2)參數(shù)：element String一個(gè)用于搜索的元素。指向 DOM 節(jié)點(diǎn)的標(biāo)簽名。(3)例如：例一：描畫：查找一個(gè) p 元素。代碼見：“jquery例子集合文件夾

13、中的examples.html根本選擇器 * 前往值:Array(1)概述:匹配一切元素多用于結(jié)合上下文來搜索。(2)例如：例一：描畫：找到form下的每一個(gè)元素，并設(shè)置字體款式。代碼見：“jquery例子集合文件夾中的examples.html根本選擇器 selector1,selector2,selectorNselector1、selector2、selectorN 前往值:Array (1)概述:將每一個(gè)選擇器匹配到的元素合并后一同前往。他可以指定恣意多個(gè)選擇器，并將匹配到的元素合并到一個(gè)結(jié)果內(nèi)。(2)參數(shù)：selector1 Selector 一個(gè)有效的選擇器 selector2 S

14、elector 另一個(gè)有效的選擇器 selectorN(可選) Selector 恣意多個(gè)有效選擇器(3)例如：例一：描畫：找到匹配恣意一個(gè)類的元素，并設(shè)置字體顏色為紅色代碼見：“jquery例子集合文件夾中的examples.html層次選擇器選擇器描述返回示例$(ancestor descendant)選取ancesdor元素里的所有descendant(后代)元素集合元素$(div span) 選取里所有的元素$(parent child)選取parent元素下的直接child元素，而不是所有后代元素集合元素$(div span)選取下子元素$(prev + next)選取緊接在prev

15、元素后的next元素集合元素$(.one + div) 選取class為one的下一個(gè)兄弟元素$(prev siblings)選取prev元素之后的所有siblings元素集合元素$(#two div) 選取id為two元素后面的所有兄弟元素后兩種選擇器較少用由于jQuery中有更簡(jiǎn)單的方法替代：next() 替代 $(prev + next)nextAll() 替代 $(prev siblings)層次選擇器 ancestor descendantancestor descendant 前往值:Array(1)概述:在給定的祖先元素下匹配一切的后代元素(2)參數(shù)：ancestor Selec

16、tor 任何有效選擇器 descendant Selector 用以匹配元素的選擇器，并且它是第一個(gè)選擇器的后代元素(3)例如：例一：描畫：找到form下的每一個(gè)元素，并設(shè)置字體款式。代碼見：“jquery例子集合文件夾中的examples.html層次選擇器 parent childparent child 前往值:Array(1)概述:在給定的父元素下匹配一切的子元素(2)參數(shù)：parent Selector 任何有效選擇器 child Selector 用以匹配元素的選擇器，并且它是第一個(gè)選擇器的子元素(3)例如：例一：描畫：匹配表單中一切的子級(jí)label元素，并設(shè)置字體顏色為紅色。代碼

17、見：“jquery例子集合文件夾中的examples.html層次選擇器 prev + nextpre + next 前往值:Array(1)概述:匹配一切緊接在 prev 元素后的 next 元素(2)參數(shù)：pre Selector 任何有效選擇器 next Selector 一個(gè)有效選擇器并且緊接著第一個(gè)選擇器(3)例如：例一：描畫：匹配一切跟在 label 后面的 input 元素，并設(shè)置邊框?yàn)樗{(lán)色。代碼見：“jquery例子集合文件夾中的examples.html層次選擇器 prev siblingsprevsiblings 前往值:Array(1)概述:匹配 prev 元素之后的一切

18、 siblings 元素(2)參數(shù)：prev Selector 任何有效選擇器 siblings Selector 一個(gè)選擇器，并且它作為第一個(gè)選擇器的同輩(3)例如：例一：描畫：找到一切與表單同輩的 input 元素，并設(shè)置邊框?yàn)榧t色。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 根本過濾選擇器選擇器描述返回示例:first選取第一個(gè)元素單個(gè)元素$(div:first) 選取中第一個(gè):last選取最后一個(gè)元素單個(gè)元素$(div:first) 選取中最后個(gè):not(select)去除與選擇器匹配的元素集合元素$(input:not(.myClass):eve

19、n選取索引是偶數(shù)的元素集合元素$(input:even):odd選取索引是奇數(shù)的元素集合元素$(input:odd):eq(index)選取索引=index的元素單個(gè)元素$(input:eq(1):gt(index)選取索引index的元素集合元素$(input:gt(1):lt(index)選取索引index的元素集合元素$(input:lt(1):header選取所有標(biāo)題元素集合元素$(:header) 選所有.:animated當(dāng)前正執(zhí)行動(dòng)畫的元素集合元素$(div:animited) 選取所有正在執(zhí)行動(dòng)畫的過濾選擇器 - 根本過濾選擇器 :firstfirst()/:first 前往值

20、:jQuery(1)概述:獲取第一個(gè)元素(2)例如：例一：描畫：獲取第一個(gè)th元素，并設(shè)置背風(fēng)光為紅色。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 根本過濾選擇器 :lastlast()/:last() 前往值:jQuery(1)概述:獲取最后個(gè)元素(2)例如：例一：描畫：獲取最后一個(gè)th元素，并設(shè)置背風(fēng)光為紅色。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 根本過濾選擇器 :not(select):not(selector) 前往值:Array(1)概述:去除一切與給定選擇器匹配的元素在jQuery 1.3中，曾經(jīng)支持

21、復(fù)雜選擇器了例如:not(div a) 和 :not(div,a)(2)參數(shù): selector Selector 用于挑選的選擇器(3)例如：例一：描畫：只需對(duì)不在執(zhí)行動(dòng)畫效果的元素執(zhí)行一個(gè)動(dòng)畫特效 代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 根本過濾選擇器 :even:even 前往值:Array(1)概述:匹配一切索引值為偶數(shù)的元素，從 0 開場(chǎng)計(jì)數(shù)(2)例如：例一：描畫：表格中偶數(shù)行高亮顯示。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 根本過濾選擇器 :odd:odd 前往值:Array(1)概述:匹配一切索引

22、值為奇數(shù)的元素，從 0 開場(chǎng)計(jì)數(shù)(2)例如：例一：描畫：表中奇數(shù)行不高亮顯示。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 根本過濾選擇器 :eq(index):eq(index) 前往值:Array(1)概述:匹配一個(gè)給定索引值的元素(2)參數(shù): index Number 從 0 開場(chǎng)計(jì)數(shù)(3)例如：例一：描畫：在表格中查找第二個(gè)th。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 根本過濾選擇器 :gt(index):gt(index) 前往值:Array(1)概述:匹配一切大于給定索引值的元素(2)參數(shù): index

23、Number 從 0 開場(chǎng)計(jì)數(shù)(3)例如：例一：描畫：在表格中查找索引值大于21的td。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 根本過濾選擇器 :lt(index):lt(index) 前往值:Array(1)概述:匹配一切大于給定索引值的元素(2)參數(shù): index Number 從 0 開場(chǎng)計(jì)數(shù)(3)例如：例一：描畫：在表格中查找索引值小于2的td。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 根本過濾選擇器 :header:header 前往值:Array(1)概述:匹配如 h1, h2, h3之類的標(biāo)題元素(

24、2)例如：例一：描畫：給頁面內(nèi)一切標(biāo)題加上背風(fēng)光。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 根本過濾選擇器 :animated:animated 前往值:Array(1)概述:匹配一切正在執(zhí)行動(dòng)畫效果的元素(2)例如：例一：描畫：只需對(duì)不在執(zhí)行動(dòng)畫效果的元素執(zhí)行一個(gè)動(dòng)畫特效 代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 - 內(nèi)容過濾選擇器選擇器描述返回示例:contains(text)選取含有文本內(nèi)容的元素集合元素$(div:contains(好的):empty選取不包含子元素和文本的空元素集合元素$(div:empty)

25、:has(select)選取含有選擇器所匹配元素的元素集合元素$(div:has(p):parent選取含有子元素或文本的元素集合元素$(div:parent)過濾選擇器-內(nèi)容過濾選擇器 :contains(text):contains(text) 前往值:Array(1)概述:匹配包含給定文本的元素(2)例如：例一：描畫：查找一切包含 123 的 td 元素。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器-內(nèi)容過濾選擇器 :empty:empty 前往值:Array(1)概述:匹配一切不包含子元素或者文本的空元素(2)例如：例一：描畫：查找一切不包含子元素或者文

26、本的空元素。代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器-內(nèi)容過濾選擇器 :has(selector):has(selector) 前往值:Array(1)概述:匹配含有選擇器所匹配的元素的元素(2)參數(shù): selector Selector 一個(gè)用于挑選的選擇器(3)例如：例一：描畫：給一切包含 a 元素的 div 元素設(shè)置div中的字體顏色為紅色。 代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器-內(nèi)容過濾選擇器 :parent:parent 前往值:Array(1)概述:查找一切含有子元素或者文本的 td 元素(2)例如：例一：

27、描畫：查找一切含有子元素或者文本的 td 元素HTML 代碼: Value 1 Value 2jQuery 代碼:$(td:parent)結(jié)果： Value 1, Value 2 過濾選擇器 - 可見性過濾選擇器選擇器描述返回示例:hidden選取所有不可見的元素集合元素$(:hidden) 選取所有不可見的元素。包括 , 和 等元素。如果只想選取元素，可以使用$(input:hidden):visible選取所有可見的元素集合元素$(“div:visible”) 選取所有可見的 元素過濾選擇器-可見性過濾選擇器 :hidden:hidden 前往值:Array(1)概述:匹配一切不可見元素，

28、或者type為hidden的元素(2)例如：例一：描畫：查找隱藏的 trHTML 代碼: Value 1 Value 2jQuery 代碼:$(tr:hidden)結(jié)果：Value 1過濾選擇器-可見性過濾選擇器 :hidden例二：描畫：匹配type為hidden的元素HTML 代碼: jQuery 代碼:$(input:hidden)結(jié)果： 過濾選擇器-可見性過濾選擇器 :visible:visible 前往值:Array(1)概述:匹配一切的可見元素(2)例如：例一：描畫：查找一切可見的 tr 元素HTML 代碼: Value 1 Value 2jQuery 代碼:$(tr:visibl

29、e)結(jié)果：Value 2過濾選擇器 - 屬性過濾選擇器選擇器描述返回示例attribute選取擁有此屬性的元素集合元素$(divid) 選取有id屬性的元素attribute=value選取屬性值為value的元素集合元素$(divtitle=test)attribute!=value選取屬性值不等于value的元素集合元素$(divtitle!=test)attribute=value選取屬性值以value開頭的元素集合元素$(divtitle=test)attribute$=value選取屬性值以value結(jié)尾的元素集合元素$(divtitle$=test)attribute*=value

30、選取屬性值包含value的元素集合元素$(divtitle*=test)selector1selector2selector3多個(gè)屬性選擇器組成復(fù)合選擇器集合元素$(dividtitle$=st)過濾選擇器-屬性過濾選擇器 attributeattribute 前往值:Array(1)概述:匹配包含給定屬性的元素。留意，在jQuery 1.3中，前導(dǎo)的符號(hào)曾經(jīng)被廢除！假設(shè)想要兼容最新版本，只需求簡(jiǎn)單去掉符號(hào)即可。(2)參數(shù): attribute String 屬性名(3)例如：例一：描畫：查找一切 name 屬性是 none2 的 input 元素，并設(shè)置邊框?yàn)榫G色。 代碼見：“jquery例

31、子集合文件夾中的examples.html過濾選擇器-屬性過濾選擇器 attribute=valueattribute=value 前往值:Array(1)概述:匹配給定的屬性是某個(gè)特定值的元素(2)參數(shù): attribute String 屬性名 value (可選) String 屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含時(shí)，用以防止沖突。(3)例如：例一：描畫：查找一切 name 屬性是 none2 的 input 元素，并設(shè)置邊框?yàn)榫G色。 代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器-屬性過濾選擇器attribute!=valueattr

32、ibute!=value 前往值:Array(1)概述:匹配一切不含有指定的屬性，或者屬性不等于特定值的元素。此選擇器等價(jià)于:not(attr=value)要匹配含有特定屬性但不等于特定值的元素，請(qǐng)運(yùn)用attr:not(attr=value)(2)參數(shù): attribute String 屬性名 value (可選) String 屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含時(shí)，用以防止沖突。(3)例如：例一：描畫：查找一切 name 屬性不是 online 的 input 元素代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器-屬性過濾選擇器attri

33、bute=valueattribute=value 前往值:Array(1)概述:匹配給定的屬性是以某些值開場(chǎng)的元素(2)參數(shù): attribute String 屬性名 value (可選) String 屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含時(shí)，用以防止沖突。(3)例如：例一：描畫：查找一切 name 以 news 開場(chǎng)的 input 元素HTML 代碼:過濾選擇器-屬性過濾選擇器attribute=valuejQuery 代碼: $(inputname=news)結(jié)果： , 過濾選擇器-屬性過濾選擇器attribute$=valueattribute$=value 前

34、往值:Array(1)概述:匹配給定的屬性是以某些值結(jié)尾的元素(2)參數(shù): attribute String 屬性名 value (可選) String 屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含時(shí)，用以防止沖突。(3)例如：例一：描畫：查找一切 name 以 letter 結(jié)尾的 input 元素HTML 代碼:過濾選擇器-屬性過濾選擇器attribute$=valuejQuery 代碼:$(inputname$=letter)結(jié)果： ,過濾選擇器-屬性過濾選擇器attribute*=valueattribute*=value 前往值:Array(1)概述:匹配給定的屬性是以

35、包含某些值的元素(2)參數(shù): attribute String 屬性名 value (可選) String 屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含時(shí)，用以防止沖突。(3)例如：例一：描畫：查找一切 name 包含 man 的 input 元素HTML 代碼:過濾選擇器-屬性過濾選擇器attribute*=valuejQuery 代碼:$(inputname*=man)結(jié)果： , , 過濾選擇器-屬性過濾選擇器 selector1selector2selectorNselector1selector2selectorN 前往值:Array (1)概述:復(fù)合屬性選擇器，需求同時(shí)

36、滿足多個(gè)條件時(shí)運(yùn)用。(2)參數(shù): selector1 Selector 屬性選擇器 selector2 Selector 另一個(gè)屬性選擇器，用以進(jìn)一步減少范圍 selectorN Selector 恣意多個(gè)屬性選擇器過濾選擇器-屬性過濾選擇器 selector1selector2selectorN(3)例如：例一：描畫：找到一切含有 id 屬性，并且它的 name 屬性是以 man 結(jié)尾的HTML 代碼:jQuery 代碼:$(inputidname$=man)結(jié)果：過濾選擇器 - 子元素過濾選擇器選擇器描述返回示例:nth-child (index/even/odd)選取每個(gè)父元素下的第in

37、dex個(gè)子元素或奇偶元素組成的集合(index從1起)集合元素$(div.one :nth-child(2) 選取所有class為one的下的第2個(gè)子元素:first-child選取每個(gè)父元素的第一個(gè)子元素集合元素$(div.one :first-child) 選取所有class為one的下的第1個(gè)子元素:last-child選取每個(gè)父元素的最后一個(gè)子元素集合元素$(div.one :last-child) 選取所有class為one的下的最后1個(gè)子元素:only-child選取父元素中唯一的子元素集合元素$(div.one :only-child) 選取所有class為one的下的唯一子元素

38、過濾選擇器-子元素過濾選擇器 :nth-child:nth-child 前往值:Array (1)概述:匹配其父元素下的第N個(gè)子或奇偶元素:eq(index) 只匹配一個(gè)元素，而這個(gè)將為每一個(gè)父元素匹配子元素。:nth-child從1開場(chǎng)的，而:eq()是從0算起的！可以運(yùn)用:：nth-child(even)、:nth-child(odd)、:nth-child(3n)、:nth-child(2):nth-child(3n+1)、:nth-child(3n+2)(2)參數(shù): index Number 要匹配元素的序號(hào)，從1開場(chǎng)(3)例如：例一：描畫：在每個(gè) ul 查找第 2 個(gè)li,并設(shè)置背景

39、顏色為紅色。 代碼見：“jquery例子集合文件夾中的examples.html 過濾選擇器-子元素過濾選擇器 :first-child:first-child 前往值:Array (1)概述:匹配第一個(gè)子元素:first 只匹配一個(gè)元素，而此選擇符將為每個(gè)父元素匹配一個(gè)子元素 (2)例如：例一：描畫：在每個(gè) ul 中查找第一個(gè) li,并設(shè)置背景顏色為紅色。 代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器-子元素過濾選擇器 :last-child:last-child 前往值:Array (1)概述:匹配最后一個(gè)子元素:last只匹配一個(gè)元素，而此選擇符將為每個(gè)父

40、元素匹配一個(gè)子元素 (2)例如：例一：描畫：在每個(gè) ul 中查找最后一個(gè) li,并設(shè)置背景顏色為紅色。 代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器-子元素過濾選擇器 :only-child:only-child 前往值:Array (1)概述:假設(shè)某個(gè)元素是父元素中獨(dú)一的子元素，那將會(huì)被匹配假設(shè)父元素中含有其他元素，那將不會(huì)被匹配。 (2)例如：例一：描畫：在 ul 中查找是獨(dú)一子元素的 li,并設(shè)置背景顏色為紅色。 代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器 -表單域?qū)ο髮傩赃^濾選擇器選擇器描述返回示例:enabled選取所

41、有可用元素集合元素$(#form1 :enabled) 選取id為form1的表單內(nèi)所有可用元素:disabled選取所有不可用元素集合元素$(#form2 :disabled) 選取id為form2的表單內(nèi)所有不可用元素:checked選取所有被選中的元素集合元素$(input:checked) 選取所有被選中的元素:selected選取所有被選中的選項(xiàng)元素集合元素$(select :selected) 選取所有被選中的選項(xiàng)元素過濾選擇器-表單域?qū)ο髮傩赃^濾選擇器 :enabled:enabled 前往值:Array (1)概述:匹配一切可用元素 (2)例如：例一：描畫：查找一切可用的inp

42、ut元素 代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器-表單域?qū)ο髮傩赃^濾選擇器 :disabled:disabled 前往值:Array (1)概述:匹配一切不可用元素 (2)例如：例一：描畫：查找一切不可用的input元素代碼見：“jquery例子集合文件夾中的examples.html過濾選擇器-表單域?qū)ο髮傩赃^濾選擇器 :checked:checked 前往值:Array (1)概述:匹配一切選中的被選中元素(復(fù)選框、單項(xiàng)選擇框等，不包括select中的option) (2)例如：例一：描畫：查找一切選中的復(fù)選框元素代碼見：“jquery例子集合文件夾中

43、的examples.html過濾選擇器-表單域?qū)ο髮傩赃^濾選擇器 :selected:selected 前往值:Array (1)概述:匹配一切選中的option元素 (2)例如：例一：描畫：查找一切選中的選項(xiàng)元素代碼見：“jquery例子集合文件夾中的examples.html表單項(xiàng)選擇擇器選擇器描述返回示例:input選取所有表單元素（ ）集合元素$(:input):text選取所有單行文本框集合元素$(:text):password選取所有密碼框集合元素$(:password):radio選取所有單選按鈕集合元素$(:radio):checkbox選取所有復(fù)選框集合元素$(:checkb

44、ox):submit選取所有提交按鈕集合元素$(:submit):image選取所有圖像按鈕集合元素$(:image):reset選取所有重置按鈕集合元素$(:reset):button選取所有按鈕集合元素$(:button):hidden選取所有隱藏域集合元素$(:hidden):file選取所有文件域集合元素$(:file)表單項(xiàng)選擇擇器 :input:input 前往值:Array (1)概述:匹配一切 input, textarea, select 和 button 元素(2)例如：例一：描畫：查找一切的input，textarea, select 和 button 元素，并設(shè)置背風(fēng)光

45、為淡藍(lán)色。 代碼見：“jquery例子集合文件夾中的examples.html表單項(xiàng)選擇擇器 :text:text 前往值:Array (1)概述:匹配一切的單行文本框(2)例如：例一：描畫：查找id=“form的表單下的一切文本框，并設(shè)置邊框?yàn)樽仙?代碼見：“jquery例子集合文件夾中的examples.html表單項(xiàng)選擇擇器 :password:password 前往值:Array (1)概述:匹配一切密碼框(2)例如：例一：描畫：查找id=“form的表單下的一切密碼框，并設(shè)置邊框?yàn)辄S色。 代碼見：“jquery例子集合文件夾中的examples.html表單項(xiàng)選擇擇器 :radio

46、:radio 前往值:Array (1)概述:匹配一切單項(xiàng)選擇按鈕(2)例如：例一：描畫：查找id=“form的表單下的一切單項(xiàng)選擇按鈕，并設(shè)置size=“20。 代碼見：“jquery例子集合文件夾中的examples.html表單項(xiàng)選擇擇器 :checkbox:checkbox 前往值:Array (1)概述:匹配一切復(fù)選框(2)例如：例一：描畫：查找id=“form的表單下的一切復(fù)選框，并設(shè)置size=“20。 代碼見：“jquery例子集合文件夾中的examples.html表單項(xiàng)選擇擇器 :submit:submit 前往值:Array (1)概述:匹配一切提交按鈕(2)例如：例一：

47、描畫：查找id=“form的表單下的一切提交按鈕。 代碼見：“jquery例子集合文件夾中的examples.html表單項(xiàng)選擇擇器 :image:image 前往值:Array (1)概述:匹配一切圖像域(2)例如：例一：描畫：匹配id=“form的表單下的一切圖像域。 代碼見：“jquery例子集合文件夾中的examples.html表單項(xiàng)選擇擇器 :reset:reset 前往值:Array (1)概述:匹配一切重置按鈕(2)例如：例一：描畫：查找id=“form的表單下的一切重置按鈕。 代碼見：“jquery例子集合文件夾中的examples.html表單項(xiàng)選擇擇器 :button:b

48、utton 前往值:Array (1)概述:匹配一切按鈕(2)例如：例一：描畫：查找id=“form的表單下的一切按鈕. 代碼見：“jquery例子集合文件夾中的examples.html表單項(xiàng)選擇擇器 :hidden:hidden 前往值:Array (1)概述:匹配一切不可見元素，或者type為hidden的元素(2)例如：例一：描畫：查找隱藏的 trHTML 代碼: Value 1 Value 2jQuery 代碼:$(tr:hidden)結(jié)果：Value 1表單項(xiàng)選擇擇器 :hidden例二：描畫：匹配type為hidden的元素HTML 代碼: jQuery 代碼:$(input:h

49、idden)結(jié)果：表單項(xiàng)選擇擇器 :file:file 前往值:Array (1)概述:匹配一切文件域(2)例如：例一：描畫：查找id=“form的表單下的一切文件域 代碼見：“jquery例子集合文件夾中的examples.htmljQuery 培訓(xùn)教材第三章jQuery 中的DOM操作jQuery DOM操作節(jié)點(diǎn)操作(文檔處置)查找創(chuàng)建插入刪除復(fù)制交換包裹遍歷jQuery DOM操作屬性操作屬性CSS類(款式操作)HTML文本值CSS DOM操作DOM 操作分類DOM Core中心任何一種支持DOM的言語都可運(yùn)用它可用來處置任何一種標(biāo)志言語文檔getElementById(), getEl

50、ementsByTagNamegetAttribute(), setAttribute()等HTML-DOM僅用來處置HTML文檔，處置HTML更方便CSS-DOM針對(duì)CSS的操作/DOM Coredocument.getElementsByTagName(form);element.getAttribute(src);/HTML-DOMdocument.formselement.src/CSS-DOMelement.style.color = red;jQuery 中的DOM操作 - 節(jié)點(diǎn)操作查找節(jié)點(diǎn)運(yùn)用選擇器查找節(jié)點(diǎn)var $li = $(.nm_ul li:eq(1);/ 獲取第二個(gè)元素

51、節(jié)點(diǎn)var li_txt = $li.text();/ 輸出第二個(gè)元素節(jié)點(diǎn)的text創(chuàng)建節(jié)點(diǎn)var $li_1 = $();var $li_1 = $(文本);var $li_1 = $(文本);jQuery 中的DOM操作 - 節(jié)點(diǎn)操作插入節(jié)點(diǎn) 例如：見：“jquery例子集合文件夾中的examples.html方法描述append()向每個(gè)匹配的元素內(nèi)部追加內(nèi)容appendTo()將所有匹配的元素追加到指定的元素中prepend()向每個(gè)匹配的元素內(nèi)部前置內(nèi)容prependTo()將所胡匹配的元素前置到指定的元素中after()在每個(gè)匹配的元素之后插入內(nèi)容insertAfter()將所有匹

52、配的元素插入到指定元素的后面before()在每個(gè)匹配的元素之前插入內(nèi)容insertBefore()將所有匹配的元素插入到指定元素的前面jQuery 中的DOM操作 - 節(jié)點(diǎn)操作刪除節(jié)點(diǎn)remove()：刪除一切匹配的元素$(ul li:eq(1).remove();empty()：清空一切匹配元素的子節(jié)點(diǎn)復(fù)制節(jié)點(diǎn)$(this).clone().appendTo(body);$(this).clone(true).appendTo(“body);參數(shù) true 表示綁定事件例如：見：“jquery例子集合文件夾中的examples.htmljQuery 中的DOM操作 - 節(jié)點(diǎn)操作交換節(jié)點(diǎn)re

53、placeWith()$(p).replaceWith(haha);replaceAll()$(haha).replaceAll(p);交換后原來元素的事件也消逝jQuery 中的DOM操作 - 節(jié)點(diǎn)操作包裹節(jié)點(diǎn)wrap(): 將一切匹配元素單獨(dú)包裹起來$(p).wrap();wrapAll(): 將一切匹配元素一同包裹起來$(p).wrapAll();wrapInner(): 將一切匹配元素的子內(nèi)容包裹起來$(p).wrapInner();例如：見：“jquery例子集合文件夾中的wrap.html和wrapInner.htmljQuery 中的DOM操作 - 節(jié)點(diǎn)操作遍歷節(jié)點(diǎn)方法描述chi

54、ldren()取得匹配元素的子元素集合next()取得匹配元素后面緊鄰的同輩元素prev()取得匹配元素前面緊鄰的同輩元素siblings()取得匹配元素前后所有的同輩元素closest()取得最先匹配元素（首先檢查當(dāng)前元素）jQuery 中的DOM操作 - 屬性操作屬性操作獲取屬性的值var p_tl = $(p).attr(title);設(shè)置單個(gè)屬性的值$(p).attr(title, haha);同時(shí)設(shè)置多個(gè)屬性$(p).attr(title:haha, name:p1);刪除屬性$(p).removeAttr(title);jQuery 中的DOM操作 - CSS類(款式操作)款式操作

55、獲取款式var style = $(p).attr(class);設(shè)置款式$(p).attr(class, highlight);追加款式$(p).addClass(thin);移除款式$(p).removeClass(highlight);jQuery 中的DOM操作 - CSS類(款式操作)款式操作切換款式$(p).toggleClass(test);在添加和移除款式test間切換判別能否含有某個(gè)款式if ($(p).hasClass(highlight) 例如：見：“jquery例子集合文件夾中的examples.htmljQuery 中的DOM操作 - HTML、文本和值的操作設(shè)置和獲

56、取 HTML、文本和值html()方法：類似 innerHTML text()方法：類似 innerTextval()方法：類似于 valuejQuery 中的DOM操作 - CSS-DOM操作CSS-DOM 操作獲取 CSS 款式屬性的值var color = $(p).css(color);設(shè)置 CSS 款式屬性的值$(p).css(color, red);$(p).css(color:red, fontSize:30px);獲取和設(shè)置元素的寬高h(yuǎn)eight()、width()jQuery 中的DOM操作 - CSS-DOM操作CSS-DOM 操作offset() 方法：獲取元素在當(dāng)前視窗的相對(duì)偏移position() 方法：獲取元素相對(duì)于最近一個(gè)position 為 relative或absolute的父節(jié)點(diǎn)的相對(duì)偏移scrollTop() 方法和 scorllLeft() 方法獲取和設(shè)置元素滾動(dòng)的上邊距和左邊距例如：見：“jquery例子集合文件夾中的css-dom位置操作jQuery 培訓(xùn)教材第四章jQuery 中的事件和動(dòng)畫為加載頁面綁定事件處置window.onload 與 $(document).ready()的區(qū)別前面曾經(jīng)引見假設(shè)希望 jQuery 也在加載完一切頁面內(nèi)容后再執(zhí)行代碼的話，可以用：$(window).load(func