第3章： jQuery基本語(yǔ)法、選擇器

1、jQuery第三章：第三章： 基本語(yǔ)法、選擇器基本語(yǔ)法、選擇器目錄目錄ljQuery的基本語(yǔ)法的基本語(yǔ)法ljQuery對(duì)象與對(duì)象與DOM對(duì)象的相互轉(zhuǎn)換對(duì)象的相互轉(zhuǎn)換l使用使用jQuery實(shí)現(xiàn)簡(jiǎn)單特效實(shí)現(xiàn)簡(jiǎn)單特效l選擇器選擇器基本選擇器基本選擇器層次選擇器層次選擇器屬性選擇器屬性選擇器基本過(guò)濾選擇器基本過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器jQuery簡(jiǎn)介簡(jiǎn)介ljQuery由美國(guó)人由美國(guó)人John Resig于于2006年創(chuàng)建年創(chuàng)建ljQuery是目前最流行的是目前最流行的JavaScript程序庫(kù)，它是對(duì)程序庫(kù)，它是對(duì)JavaScript對(duì)象和函數(shù)的封裝對(duì)象和函數(shù)的封裝jQuery能做什么

2、能做什么l訪問(wèn)和操作訪問(wèn)和操作DOM元素元素l控制頁(yè)面樣式控制頁(yè)面樣式l對(duì)頁(yè)面事件進(jìn)行處理對(duì)頁(yè)面事件進(jìn)行處理l擴(kuò)展新的擴(kuò)展新的jQuery插件插件l與與Ajax技術(shù)完美結(jié)合技術(shù)完美結(jié)合jQuery的優(yōu)勢(shì)的優(yōu)勢(shì)l體積小，壓縮后只有體積小，壓縮后只有100KB左右左右l強(qiáng)大的選擇器強(qiáng)大的選擇器l出色的出色的DOM封裝封裝l可靠的事件處理機(jī)制可靠的事件處理機(jī)制l出色的瀏覽器兼容性出色的瀏覽器兼容性l使用隱式迭代簡(jiǎn)化編程使用隱式迭代簡(jiǎn)化編程l豐富的插件支持豐富的插件支持jQuery庫(kù)文件庫(kù)文件ljQuery庫(kù)分開(kāi)發(fā)版和發(fā)布版庫(kù)分開(kāi)發(fā)版和發(fā)布版l在頁(yè)面中引入在頁(yè)面中引入jQuery名稱名稱大小大小說(shuō)說(shuō)

3、明明jquery-1.版本號(hào)版本號(hào).js（開(kāi)發(fā)版）（開(kāi)發(fā)版）約約268KB完整無(wú)壓縮版本，主要用于完整無(wú)壓縮版本，主要用于測(cè)試、學(xué)習(xí)和開(kāi)發(fā)測(cè)試、學(xué)習(xí)和開(kāi)發(fā)jquery-1.版本版本號(hào)號(hào).min.js（發(fā)布版）（發(fā)布版）約約91KB經(jīng)過(guò)工具壓縮或經(jīng)過(guò)服務(wù)器經(jīng)過(guò)工具壓縮或經(jīng)過(guò)服務(wù)器開(kāi)啟開(kāi)啟Gzip壓縮，主要應(yīng)用于壓縮，主要應(yīng)用于發(fā)布的產(chǎn)品和項(xiàng)目發(fā)布的產(chǎn)品和項(xiàng)目jQuery基本語(yǔ)法基本語(yǔ)法l使用使用jQuery彈出提示框彈出提示框l$(document).ready()與與window.onload的區(qū)別的區(qū)別 $(document).ready(function() alert(我欲奔赴沙場(chǎng)征戰(zhàn)我

4、欲奔赴沙場(chǎng)征戰(zhàn)jQuery，勢(shì)必攻克之！，勢(shì)必攻克之！); );為頁(yè)面加載事件綁定方法為頁(yè)面加載事件綁定方法 window.onload$(document).ready()執(zhí)行時(shí)機(jī)執(zhí)行時(shí)機(jī)必須等待網(wǎng)頁(yè)中所有的內(nèi)容加載必須等待網(wǎng)頁(yè)中所有的內(nèi)容加載完畢后（包括圖片、完畢后（包括圖片、flash、視、視頻等）才能執(zhí)行頻等）才能執(zhí)行網(wǎng)頁(yè)中所有網(wǎng)頁(yè)中所有DOM文檔結(jié)構(gòu)繪制完文檔結(jié)構(gòu)繪制完畢后即刻執(zhí)行，可能與畢后即刻執(zhí)行，可能與DOM元素元素關(guān)聯(lián)的內(nèi)容（圖片、關(guān)聯(lián)的內(nèi)容（圖片、flash、視頻、視頻等）并沒(méi)有加載完等）并沒(méi)有加載完編寫個(gè)數(shù)編寫個(gè)數(shù)同一頁(yè)面不能同時(shí)編寫多個(gè)同一頁(yè)面不能同時(shí)編寫多個(gè)同一頁(yè)面能

5、同時(shí)編寫多個(gè)同一頁(yè)面能同時(shí)編寫多個(gè)DOM模型模型l瀏覽器瀏覽器把把HTML文檔的元素轉(zhuǎn)換成節(jié)點(diǎn)對(duì)象，所有節(jié)點(diǎn)組文檔的元素轉(zhuǎn)換成節(jié)點(diǎn)對(duì)象，所有節(jié)點(diǎn)組成了一個(gè)樹(shù)狀成了一個(gè)樹(shù)狀結(jié)構(gòu)結(jié)構(gòu)以對(duì)象描述文檔的方式就是以對(duì)象描述文檔的方式就是DOM節(jié)點(diǎn)對(duì)象就被稱為節(jié)點(diǎn)對(duì)象就被稱為DOM對(duì)象對(duì)象節(jié)點(diǎn)類型節(jié)點(diǎn)類型l元素節(jié)點(diǎn)：文檔中的所有元素元素節(jié)點(diǎn)：文檔中的所有元素 l文本節(jié)點(diǎn)：元素節(jié)點(diǎn)內(nèi)的文本內(nèi)容文本節(jié)點(diǎn)：元素節(jié)點(diǎn)內(nèi)的文本內(nèi)容你最喜歡的食品是？你最喜歡的食品是？ l屬性節(jié)點(diǎn)：元素節(jié)點(diǎn)的子節(jié)點(diǎn)屬性節(jié)點(diǎn)：元素節(jié)點(diǎn)的子節(jié)點(diǎn) DOM對(duì)象和對(duì)象和jQuery對(duì)象對(duì)象lDOM對(duì)象：直接使用對(duì)象：直接使用JavaScript

6、獲取的節(jié)點(diǎn)對(duì)象獲取的節(jié)點(diǎn)對(duì)象l jQuery對(duì)象：使用對(duì)象：使用jQuery包裝包裝DOM對(duì)象后產(chǎn)生的對(duì)象，對(duì)象后產(chǎn)生的對(duì)象，它能夠使用它能夠使用jQuery中的方法中的方法var objDOM=document.getElementById(title); var objHTML=objDOM.innerHTML; $(#title).html( );等同于等同于document.getElementById(title).innerHTML; jQuery語(yǔ)法結(jié)構(gòu)語(yǔ)法結(jié)構(gòu)l語(yǔ)法語(yǔ)法工廠函數(shù)工廠函數(shù)$()：將：將DOM對(duì)象轉(zhuǎn)化為對(duì)象轉(zhuǎn)化為jQuery對(duì)象對(duì)象選擇器選擇器 selector：獲

7、取需要操作的：獲取需要操作的DOM 元素元素方法方法action()：jQuery中提供的方法，其中包括綁定事件處理的方中提供的方法，其中包括綁定事件處理的方法法l“$”等同于等同于“ jQuery ”$(selector).action() ; $(document).ready()=jQuery(document).ready()$(function().)=jQuery(function().) jQuery語(yǔ)法結(jié)構(gòu)語(yǔ)法結(jié)構(gòu)-示例示例lilist-style: none; line-height: 22px; cursor: pointer;.currentbackground: #6c

8、f; font-weight: bold; color: #fff;$(document).ready(function()$(li).click(function()$(#current).addClass(current);););jQuery簡(jiǎn)介簡(jiǎn)介jQuery語(yǔ)法語(yǔ)法為元素添加類樣式為元素添加類樣式常用語(yǔ)法舉例常用語(yǔ)法舉例lcss(屬性屬性,屬性值屬性值) 為元素設(shè)置為元素設(shè)置CSS樣式的值樣式的值laddClass()為元素添加類樣式為元素添加類樣式lnext()獲得元素其后緊鄰的同輩元素獲得元素其后緊鄰的同輩元素$(document).ready(function() $(h2).

9、click(function() $(h2).css(background- color,#CCFFFF).next().css(display,block););); 什么是受益人什么是受益人?解答：解答：受益人是指人身保險(xiǎn)中由被保險(xiǎn)人或者受益人是指人身保險(xiǎn)中由被保險(xiǎn)人或者 .練習(xí)練習(xí)-制作幫助中心問(wèn)答特效制作幫助中心問(wèn)答特效l需求說(shuō)明需求說(shuō)明點(diǎn)擊標(biāo)題后，顯示回答的內(nèi)容，同時(shí)標(biāo)題加上背景色點(diǎn)擊標(biāo)題后，顯示回答的內(nèi)容，同時(shí)標(biāo)題加上背景色DOM對(duì)象轉(zhuǎn)對(duì)象轉(zhuǎn)jQuery對(duì)象對(duì)象l使用使用$()函數(shù)進(jìn)行轉(zhuǎn)化：函數(shù)進(jìn)行轉(zhuǎn)化：$(DOM對(duì)象對(duì)象)l注意注意var txtName =document.ge

10、tElementById(txtName); /DOM對(duì)象對(duì)象var $txtName =$(txtName); /jQuery對(duì)象對(duì)象jQuery對(duì)象命名一般約定以對(duì)象命名一般約定以$開(kāi)頭開(kāi)頭在事件中經(jīng)常使用在事件中經(jīng)常使用$(this)，this是觸發(fā)該事件的對(duì)象是觸發(fā)該事件的對(duì)象jQuery對(duì)象轉(zhuǎn)對(duì)象轉(zhuǎn)DOM對(duì)象對(duì)象ljQuery對(duì)象是一個(gè)類似數(shù)組的對(duì)象，可以通過(guò)對(duì)象是一個(gè)類似數(shù)組的對(duì)象，可以通過(guò)index的方的方法得到相應(yīng)的法得到相應(yīng)的DOM對(duì)象對(duì)象l通過(guò)通過(guò)get(index)方法得到相應(yīng)的方法得到相應(yīng)的DOM對(duì)象對(duì)象var $txtName =$ (#txtName); /jQue

11、ry對(duì)象對(duì)象var txtName =$txtName0; /DOM對(duì)象對(duì)象var $txtName =$(#txtName); /jQuery對(duì)象對(duì)象var txtName =$txtName.get(0); /DOM對(duì)象對(duì)象$(document).ready(function() var h1 = document.getElementById(title);var $h1 = $(h1);$h1.click(function()alert(非常滿意非常滿意);););. .請(qǐng)為我們的服務(wù)做出評(píng)價(jià)請(qǐng)為我們的服務(wù)做出評(píng)價(jià)jQuery選擇器選擇器ljQuery選擇器類似于選擇器類似于CSS選擇

12、器，用來(lái)選取網(wǎng)頁(yè)中的元素選擇器，用來(lái)選取網(wǎng)頁(yè)中的元素獲取獲取并設(shè)置網(wǎng)頁(yè)中所有并設(shè)置網(wǎng)頁(yè)中所有元素的背景元素的背景“h3”為選擇器語(yǔ)法，必須放在為選擇器語(yǔ)法，必須放在$()中中$(“h3”)返回返回jQuery對(duì)象對(duì)象css()是為是為jQuery對(duì)象設(shè)置樣式的方法對(duì)象設(shè)置樣式的方法$(h3).css(background,#09F);jQuery選擇器分類選擇器分類ljQuery選擇器功能強(qiáng)大，分類如下選擇器功能強(qiáng)大，分類如下類類CSS選擇器選擇器基本選擇器基本選擇器層次選擇器層次選擇器屬性選擇器屬性選擇器過(guò)濾選擇器過(guò)濾選擇器基本過(guò)濾選擇器基本過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器基本選擇

13、器基本選擇器l基本選擇器基本選擇器標(biāo)簽標(biāo)簽選擇器、類選擇器、選擇器、類選擇器、ID選擇器、并集選擇器、交集選擇器和全選擇器、并集選擇器、交集選擇器和全局選擇器局選擇器名稱名稱語(yǔ)法構(gòu)成語(yǔ)法構(gòu)成描述描述示例示例標(biāo)簽選擇器標(biāo)簽選擇器element根據(jù)給定的標(biāo)簽名匹配根據(jù)給定的標(biāo)簽名匹配元素元素$(h2 )選取所有選取所有h2元元素素類選擇器類選擇器.class根據(jù)給定的根據(jù)給定的class匹配匹配元素元素$( .title)選取所有選取所有class為為title的元素的元素ID選擇器選擇器#id根據(jù)給定的根據(jù)給定的id匹配元素匹配元素$( #title)選取選取id為為title的元素的元素并集選

14、擇器并集選擇器selector1,selector2,.,selectorN將每一個(gè)選擇器匹配的將每一個(gè)選擇器匹配的元素合并后一起返回元素合并后一起返回$(div,p,.title )選取所選取所有有div、p和擁有和擁有class為為title的元素的元素交集選擇器交集選擇器element.class或或element#id匹配指定匹配指定class或或id的某的某元素或元素集合元素或元素集合$(h2.title)選取所有擁選取所有擁有有class為為title的的h2元元素素全局選擇器全局選擇器*匹配所有元素匹配所有元素$(* )選取所有元素選取所有元素基本選擇器基本選擇器 id為為box

15、的的div class為為title的的h2 class為為title的的h3 熱門排行熱門排行 斗地主斗地主 休閑游戲休閑游戲 QQ斗地主是國(guó)內(nèi)同時(shí)在線人斗地主是國(guó)內(nèi)同時(shí)在線人. $(function() $(h2).click(function() $(h3).css(background-color,#09F); /$(.title).css(background,#09F);/$(#box).css(background,#09F);/$(h2,dt,.title).css(background,#09F); /并集選擇器并集選擇器/$(h3.title).css(background

16、,#09F); /交集選擇器交集選擇器/$(*).css(color,red); /全局選擇器全局選擇器 ););所有所有classclass為為titletitle的的 h3元素元素層次選擇器層次選擇器l層次選擇器通過(guò)層次選擇器通過(guò)DOM 元素之間的層次關(guān)系來(lái)獲取元素元素之間的層次關(guān)系來(lái)獲取元素名稱名稱語(yǔ)法構(gòu)成語(yǔ)法構(gòu)成描述描述示例示例后代選擇器后代選擇器ancestor descendant選取選取ancestor元素里的元素里的所有所有descendant（后（后代）元素代）元素$(#menu span )選取選取#menu下的下的元元素素子選擇器子選擇器parentchild選取選取pa

17、rent元素下的元素下的child（子）元素（子）元素$( #menuspan )選選取取#menu的子元素的子元素相鄰元素選相鄰元素選擇器擇器prev+next選取緊鄰選取緊鄰prev元素之后元素之后的的next元素元素$( h2+dl )選取緊鄰選取緊鄰元素之后的同輩元元素之后的同輩元素素同輩元素選同輩元素選擇器擇器prevsibings選取選取prev元素之后的所元素之后的所有有siblings元素元素$( h2dl )選取選取元素之后所有的同輩元元素之后所有的同輩元素素層次選擇器層次選擇器 全部旅游產(chǎn)品分類全部旅游產(chǎn)品分類 北京周邊旅游北京周邊旅游特價(jià)特價(jià) 按天數(shù)按天數(shù) 海邊旅游海邊旅

18、游 草原草原 景點(diǎn)門票景點(diǎn)門票 名勝名勝 暑期暑期 樂(lè)園樂(lè)園 山水山水 雙休雙休 更多分類更多分類l樣式與樣式與jQuery代碼代碼層次選擇器層次選擇器* margin:0; padding:0; line-height:30px;#menu border:2px solid #03C; padding:10px;a text-decoration:none; margin-right:5px;span font-weight:bold; padding:3px;h2 margin:10px 0;$(function() $(h2).click(function() $(#menu span)

19、.css(background-color,#09F); /$(#menuspan).css(background-color,#09F); /$(h2+dl).css(background-color,#09F); /$(h2dl).css(background-color,#09F); ););屬性選擇器屬性選擇器l屬性選擇器通過(guò)屬性選擇器通過(guò)HTML元素的屬性來(lái)選擇元素元素的屬性來(lái)選擇元素名稱名稱語(yǔ)法構(gòu)成語(yǔ)法構(gòu)成描述描述示例示例屬性屬性選擇選擇器器attribute選取包含給定屬性的元素選取包含給定屬性的元素$( href )選取含有選取含有href屬屬性的元素性的元素attribute

20、=value選取等于給定屬性是某個(gè)選取等于給定屬性是某個(gè)特定值的元素特定值的元素$( href =# )選取選取href屬屬性值為性值為“#”的元素的元素attribute !=value選取不等于給定屬性是某選取不等于給定屬性是某個(gè)特定值的元素個(gè)特定值的元素$( href !=# )選取選取href屬屬性值不為性值不為“#”的元素的元素attribute=value選取給定屬性是以某些特選取給定屬性是以某些特定值開(kāi)始的元素定值開(kāi)始的元素$( href=en )選取選取href屬性值以屬性值以en開(kāi)頭的元素開(kāi)頭的元素attribute$=value選取給定屬性是以某些特選取給定屬性是以某些特定

21、值結(jié)尾的元素定值結(jié)尾的元素$( href$=.jpg )選取選取href屬性值以屬性值以.jpg結(jié)尾的元素結(jié)尾的元素attribute*=value選取給定屬性是以包含某選取給定屬性是以包含某些值的元素些值的元素$( href* =txt )選取選取href屬性值中含有屬性值中含有txt的元素的元素selector selector2 selectorN選取滿足多個(gè)條件的復(fù)合選取滿足多個(gè)條件的復(fù)合屬性的元素屬性的元素$(liidtitle=新聞要點(diǎn)新聞要點(diǎn) )選選取含有取含有id屬性和屬性和title屬性為新屬性為新聞要點(diǎn)的聞要點(diǎn)的元素元素屬性選擇器屬性選擇器 動(dòng)畫列表動(dòng)畫列表 名偵探柯南名偵

22、探柯南 火影忍者火影忍者 死神死神 妖精的尾巴妖精的尾巴 銀魂銀魂 黑貓警長(zhǎng)黑貓警長(zhǎng) 仙履奇緣仙履奇緣#box background-color:#FFF; border:2px solid #000; padding:5px;屬性選擇器屬性選擇器$(function() $(h2).click(function() $(“h2title”).css(“background-color”,“#09F”); /含有含有title屬性的屬性的元素元素 /$(class=odds).css(background-color,#09F); /class屬性的值為屬性的值為odds /的元素的元素 /$

23、(“id!=box”).css(“background-color”,“#09F”); /id屬性的值不為屬性的值不為box的元素的元素 /$(“title=h”).css(“background-color”,“#09F”); /title屬性的值中以屬性的值中以h開(kāi)頭的元素開(kāi)頭的元素 /$(title$=jp).css(background-color,#09F); /title屬性的值中以屬性的值中以jp結(jié)尾的元素結(jié)尾的元素 /$(title*=s).css(background-color,#09F); /title屬性的值中含有屬性的值中含有s的元素的元素 /$(liclasstit

24、le*=y).css(background-color,#09F); /包含包含class屬性，屬性， /且且title屬性的值中含有屬性的值中含有y的的元素元素 ););屬性選擇器也支持屬性值的模糊匹配屬性選擇器也支持屬性值的模糊匹配過(guò)濾選擇器過(guò)濾選擇器l過(guò)濾選擇器通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選元素過(guò)濾選擇器通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選元素l語(yǔ)法特點(diǎn)是使用語(yǔ)法特點(diǎn)是使用“:”，如使用，如使用$(“l(fā)i:first”)來(lái)選取第一個(gè)來(lái)選取第一個(gè)li元素元素l主要分類如下：主要分類如下：基本過(guò)濾選擇器基本過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器表單對(duì)象過(guò)濾選擇器表單對(duì)象過(guò)濾選擇器在后面課程中講解在后面課程

25、中講解基本過(guò)濾選擇器基本過(guò)濾選擇器l基本過(guò)濾選擇器可以選取第一個(gè)元素、最后一個(gè)元素、索基本過(guò)濾選擇器可以選取第一個(gè)元素、最后一個(gè)元素、索引為偶數(shù)或奇數(shù)的元素引為偶數(shù)或奇數(shù)的元素名稱名稱語(yǔ)法構(gòu)成語(yǔ)法構(gòu)成描述描述示例示例基本過(guò)濾基本過(guò)濾選擇器選擇器:first選取第一個(gè)元素選取第一個(gè)元素$( li:first )選取所有選取所有元元素中的第一個(gè)素中的第一個(gè)元素元素:last選取最后一個(gè)元素選取最后一個(gè)元素$( li:last )選取所有選取所有元元素中的最后一個(gè)素中的最后一個(gè)元素元素:even選取索引是偶數(shù)的所選取索引是偶數(shù)的所有元素（有元素（index從從0開(kāi)開(kāi)始）始）$( li:even )選

26、取索引是偶選取索引是偶數(shù)的所有數(shù)的所有元素元素:odd選取索引是奇數(shù)的所選取索引是奇數(shù)的所有元素（有元素（index從從0開(kāi)開(kāi)始）始）$( li:odd )選取索引是奇數(shù)選取索引是奇數(shù)的所有的所有元素元素基本過(guò)濾選擇器基本過(guò)濾選擇器l基本過(guò)濾選擇器可以根據(jù)索引的值選取元素基本過(guò)濾選擇器可以根據(jù)索引的值選取元素名稱名稱語(yǔ)法構(gòu)成語(yǔ)法構(gòu)成描述描述示例示例基本過(guò)濾基本過(guò)濾選擇器選擇器:eq(index)選取索引等于選取索引等于index的的元素（元素（index從從0開(kāi)始）開(kāi)始）$(li:eq(1) )選取索引等于選取索引等于1的的元素元素:gt(index)選取索引大于選取索引大于index的的元素

27、（元素（index從從0開(kāi)始）開(kāi)始）$( li:gt(1) )選取索引大于選取索引大于1的的元素（注：大于元素（注：大于1，不，不包括包括1）:lt(index)選取索引小于選取索引小于index的的元素（元素（index從從0開(kāi)始）開(kāi)始）$(“l(fā)i:lt(1)” )選取索引小于選取索引小于1的的元素（注：小于元素（注：小于1，不包，不包括括1）基本過(guò)濾選擇器基本過(guò)濾選擇器l基本過(guò)濾選擇器還支持一些特殊的選擇方式基本過(guò)濾選擇器還支持一些特殊的選擇方式名稱名稱語(yǔ)法構(gòu)成語(yǔ)法構(gòu)成描述描述示例示例基本過(guò)濾基本過(guò)濾選擇器選擇器:not(selector)選取去除所有與給選取去除所有與給定選擇器匹配的元定

28、選擇器匹配的元素素$( li:not(.three) )選取選取class不是不是three的元素的元素:header選取所有標(biāo)題元素，選取所有標(biāo)題元素，如如h1h6$(:header )選取網(wǎng)頁(yè)中所選取網(wǎng)頁(yè)中所有標(biāo)題元素有標(biāo)題元素:focus選取當(dāng)前獲取焦點(diǎn)選取當(dāng)前獲取焦點(diǎn)的元素的元素$(:focus )選取當(dāng)前獲取選取當(dāng)前獲取焦點(diǎn)的元素焦點(diǎn)的元素基本過(guò)濾選擇器基本過(guò)濾選擇器$(function() $(h2).click(function()$(li:first).css(background-color,#09F); /第第1個(gè)個(gè)元素元素/$(li:last).css(backgroun

29、d-color,#09F); /最后一個(gè)最后一個(gè)元素元素 /$(li:not(.three).css(background-color,#09F); /class不為不為three的的元素元素 /$(li:even).css(background-color,#09F); /索引值為偶數(shù)的索引值為偶數(shù)的元素元素 /$(li:odd).css(background-color,#09F); /索引值為奇數(shù)的索引值為奇數(shù)的元素元素 /$(li:eq(1).css(background-color,#09F); /索引值等于索引值等于1的的元素元素 /$(li:gt(1).css(backgroun

30、d-color,#09F); /索引值大于索引值大于1的的元素元素 /$(li:lt(1).css(background-color,#09F); /索引值小于索引值小于1的的元素元素 /$(“:header”).css(“background-color”,“#09F”); /所有標(biāo)題元素所有標(biāo)題元素 /$(:focus).css(background-color,#09F); /當(dāng)前獲取焦點(diǎn)的元素當(dāng)前獲取焦點(diǎn)的元素 ););l基本過(guò)濾選擇器示例基本過(guò)濾選擇器示例l可見(jiàn)性過(guò)濾選擇器可以通過(guò)元素顯示狀態(tài)來(lái)選取元素可見(jiàn)性過(guò)濾選擇器可以通過(guò)元素顯示狀態(tài)來(lái)選取元素可見(jiàn)性過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器名稱名稱語(yǔ)法構(gòu)成語(yǔ)法構(gòu)成描述描述示例示例可見(jiàn)性過(guò)可見(jiàn)性過(guò)濾選擇器濾選擇器:visible選取所有可見(jiàn)的元選取所有可見(jiàn)的元素素$(:visible )選取所有可見(jiàn)選取所有可見(jiàn)的元素的元素:hidden選取所有隱藏的元選取所有隱藏的元素素$(:hi