1、jQuery選擇器中軟國際廣州ETC基地課前提問課前提問jQuery選擇器包括哪幾大類？類選擇器和ID選擇器有什么區(qū)別？如何通過name屬性來查找元素？提問提問任務(wù)任務(wù)掌握基本選擇器的使用掌握層次選擇器的使用掌握屬性選擇器的使用掌握基本過濾選擇器的使用掌握可見性過濾選擇器的使用目標(biāo)目標(biāo)會(huì)使用基本選擇器獲取元素會(huì)使用層次選擇器獲取元素會(huì)使用屬性選擇器獲取元素會(huì)使用基本過濾選擇器獲取元素會(huì)使用可見性過濾選擇器獲取元素jQueryjQuery選擇器選擇器jQuery選擇器類似于CSS選擇器，用來選取網(wǎng)頁中的元素$(h3).css(background,#09F);獲取并設(shè)置網(wǎng)頁中所有獲取并設(shè)置網(wǎng)頁中

2、所有元素的背景元素的背景“h3”為選擇器語法，必須放在為選擇器語法，必須放在$()中中$(“h3”)返回返回jQuery對(duì)象對(duì)象.css()是為是為jQuery對(duì)象設(shè)置樣式的方法對(duì)象設(shè)置樣式的方法jQueryjQuery選擇器分類選擇器分類jQuery選擇器功能強(qiáng)大，種類也很多，分類如下： 類CSS選擇器 基本選擇器 層次選擇器 屬性選擇器 過濾選擇器 基本過濾選擇器 可見性過濾選擇器基本選擇器基本選擇器2-12-1名稱名稱語法構(gòu)成語法構(gòu)成描述描述示例示例標(biāo)簽選擇器標(biāo)簽選擇器element根據(jù)給定的標(biāo)簽根據(jù)給定的標(biāo)簽名匹配元素名匹配元素$(h2)選取所有選取所有h2元素元素類選擇器類選擇器.c

3、lass根據(jù)給定的根據(jù)給定的class匹配元素匹配元素$(.title)選取所選取所有有class為為title的元的元素素ID選擇器選擇器#id根據(jù)給定的根據(jù)給定的id匹匹配元素配元素$(#title)選取選取id為為title的元素的元素基本選擇器包括標(biāo)簽選擇器、類選擇器、ID選擇器、并集選擇器、交集選擇器和全局選擇器基本選擇器基本選擇器2-22-2名稱名稱語法構(gòu)成語法構(gòu)成描述描述示例示例并集選擇器并集選擇器selector1,selector2,.,selectorN將每一個(gè)選擇器將每一個(gè)選擇器匹配的元素合并匹配的元素合并后一起返回后一起返回$(div,p,.title)選取選取所有所有

4、div、p和擁有和擁有class為為title的元素的元素交集選擇器交集選擇器element.class或或element#id匹配指定匹配指定class或或id的某元素或元的某元素或元素集合素集合$(h2.title)選取所選取所有擁有有擁有class為為title的的h2元素元素全局選擇器全局選擇器*匹配所有元素匹配所有元素$(*)選取所有元素選取所有元素標(biāo)簽選擇器標(biāo)簽選擇器$(h3).css(background,#09F)標(biāo)簽選擇器根據(jù)給定的標(biāo)簽名匹配元素獲取并設(shè)置所有獲取并設(shè)置所有元素的背景顏色元素的背景顏色類選擇器類選擇器$(.title).css(background,#09F)

5、類選擇器根據(jù)給定的class匹配元素獲取并設(shè)置所有獲取并設(shè)置所有class為為title的元素的背景顏色的元素的背景顏色I(xiàn)DID選擇器選擇器$(#box).css(background,#09F)ID選擇器根據(jù)給定的id匹配元素獲取并設(shè)置獲取并設(shè)置id為為box的元素的背景顏色的元素的背景顏色并集選擇器并集選擇器$(h2,dt,.title).css(background,#09F)并集選擇器用來合并元素集合獲取并設(shè)置所有獲取并設(shè)置所有、class為為title的元素的背景顏色的元素的背景顏色交集選擇器交集選擇器$(h2.title).css(background,#09F)交集選擇器可以對(duì)元

6、素集合根據(jù)class或id再篩選獲取并設(shè)置所有獲取并設(shè)置所有class為為title的的元素的背景顏色元素的背景顏色全局選擇器全局選擇器$(*).css(color,red)全局選擇器可以獲取所有元素改變所有元素的字體顏色改變所有元素的字體顏色層次選擇器層次選擇器名稱名稱語法構(gòu)成語法構(gòu)成描述描述示例示例后代選擇后代選擇器器ancestordescendant選取選取ancestor元素里的元素里的所有所有descendant（后（后代）元素代）元素$(#menuspan)選選取取#menu下的下的元素元素子選擇器子選擇器 parentchild選取選取parent元素下的元素下的child（子

7、）元素（子）元素$(#menuspan)選選取取#menu的子元素的子元素相鄰元素相鄰元素選擇器選擇器prev+next選取緊鄰選取緊鄰prev元素之元素之后的后的next元素元素$(h2+dl)選取緊鄰選取緊鄰元素之后的同輩元素之后的同輩元素元素同輩元素同輩元素選擇器選擇器prevsibings選取選取prev元素之后的元素之后的所有所有siblings元素元素$(h2dl)選取選取元素之后所有的同輩元素之后所有的同輩元素元素層次選擇器通過DOM 元素之間的層次關(guān)系來獲取元素后代選擇器后代選擇器$(#menu span).css(background-color,#09F)后代選擇器用來獲取

8、元素的后代元素獲取并設(shè)置獲取并設(shè)置#menu下的下的元素的背景顏色元素的背景顏色子選擇器子選擇器$(#menuspan).css(background-color,#09F)子選擇器用來獲取元素的子元素獲取并設(shè)置獲取并設(shè)置#menu下的子元素下的子元素的背景顏色的背景顏色相鄰選擇器相鄰選擇器$(h2+dl).css(background-color,#09F)相鄰選擇器用來選取緊鄰目標(biāo)元素的下一個(gè)元素獲取并設(shè)置緊接在獲取并設(shè)置緊接在元素后的元素后的元素的背景顏色元素的背景顏色同輩選擇器同輩選擇器$(h2dl).css(background-color,#09F)同輩選擇器用來選取目標(biāo)元素之后的

9、所有同輩元素獲取并設(shè)置獲取并設(shè)置元素之后的所有同輩元素元素之后的所有同輩元素的背景顏色的背景顏色屬性選擇器屬性選擇器名稱名稱語法構(gòu)成語法構(gòu)成描述描述示例示例屬性選屬性選擇器擇器attribute選取包含給定屬性的選取包含給定屬性的元素元素$(href)選取含有選取含有href屬性的元素屬性的元素attribute=value 選取等于給定屬性是選取等于給定屬性是某個(gè)特定值的元素某個(gè)特定值的元素$(href=#)選取選取href屬性值為屬性值為“#”的元素的元素attribute!=value選取不等于給定屬性選取不等于給定屬性是某個(gè)特定值的元素是某個(gè)特定值的元素$(href!=#)選取選取hr

10、ef屬性值不為屬性值不為“#”的元素的元素屬性選擇器通過HTML元素的屬性來選擇元素屬性選擇器屬性選擇器名稱名稱語法構(gòu)成語法構(gòu)成描述描述示例示例屬性選擇器屬性選擇器attribute=value選取給定屬性是以某選取給定屬性是以某些特定值開始的元素些特定值開始的元素$(href=en)選選取取href屬性值以屬性值以en開開頭的元素頭的元素attribute$=value選取給定屬性是以某選取給定屬性是以某些特定值結(jié)尾的元素些特定值結(jié)尾的元素$(href$=.jpg)選選取取href屬性值以屬性值以.jpg結(jié)尾的元素結(jié)尾的元素attribute*=value選取給定屬性是以包選取給定屬性是以包

11、含某些值的元素含某些值的元素$(href*=txt)選選取取href屬性值中含有屬性值中含有txt的元素的元素selectorselector2selectorN選取滿足多個(gè)條件的選取滿足多個(gè)條件的復(fù)合屬性的元素復(fù)合屬性的元素$(liidtitle=新聞要新聞要點(diǎn)點(diǎn))選取含有選取含有id屬性屬性和和title屬性為新聞要屬性為新聞要點(diǎn)的點(diǎn)的元素元素根據(jù)屬性名獲取元素根據(jù)屬性名獲取元素$(h2title).css(background-color,#09F)屬性選擇器可以根據(jù)是否包含某屬性來選取元素改變含有改變含有title屬性的屬性的元素的背景顏色元素的背景顏色根據(jù)屬性值獲取元素根據(jù)屬性值獲取

12、元素$(class=odds).css(background-color,#09F)屬性選擇器可以根據(jù)屬性的值來選取元素改變改變class屬性的值為屬性的值為odds的元素的背景顏色的元素的背景顏色屬性選擇器也支持屬屬性選擇器也支持屬性值的模糊匹配性值的模糊匹配多屬性條件選擇多屬性條件選擇$(liclasstitle*=y).css(background-color,#09F)屬性選擇器支持多屬性條件復(fù)合查找元素改變包含改變包含class屬性，且屬性，且title屬性的值中含有屬性的值中含有y的的元素的背景顏色元素的背景顏色使用使用jQueryjQuery美化英雄聯(lián)盟簡(jiǎn)介頁美化英雄聯(lián)盟簡(jiǎn)介頁需

13、求說明 單擊元素后，根據(jù)下圖設(shè)置元素的背景顏色、文本顏色屬性練習(xí)練習(xí)制作非緣勿擾頁面特效制作非緣勿擾頁面特效3-13-1需求說明指導(dǎo)指導(dǎo)制作非緣勿擾頁面特效制作非緣勿擾頁面特效3-23-2需求說明 使用標(biāo)簽選擇器獲取元素，設(shè)置字體顏色 使用類選擇器獲取排版“導(dǎo)演”的元素，加粗字體 使用ID選擇器獲取排版“標(biāo)簽”的元素，設(shè)置背景顏色、字體顏色、間距 使用屬性選擇器獲取“收藏”元素，單擊它后彈出對(duì)話框指導(dǎo)指導(dǎo)制作非緣勿擾頁面特效制作非緣勿擾頁面特效3-33-3實(shí)現(xiàn)思路（1）使用$(document).ready()創(chuàng)建文檔加載事件 （2）按要求使用$(選擇器)選取所需元素 （3）為獲取到的元素添加

14、單擊事件，并為事件添加處理事件的方法 （4）使用css( )方法或addClass()為所選取的元素添加CSS樣式，使用addClass()添加樣式時(shí)，該樣式寫在樣式表文件中指導(dǎo)指導(dǎo)共性問題集中講解共性問題集中講解常見問題及解決辦法代碼規(guī)范問題調(diào)試技巧過濾選擇器過濾選擇器過濾選擇器通過特定的過濾規(guī)則來篩選元素語法特點(diǎn)是使用“:”，如使用$(“l(fā)i:first”)來選取第一個(gè)li元素主要分類如下： 基本過濾選擇器 可見性過濾選擇器 表單對(duì)象過濾選擇器 內(nèi)容過濾選擇器、子元素過濾選擇器基本過濾選擇器基本過濾選擇器名稱名稱語法構(gòu)成語法構(gòu)成描述描述示例示例基本過濾選基本過濾選擇器擇器:first選取第

15、一個(gè)元素選取第一個(gè)元素$(li:first)選取所有選取所有元素中的第一個(gè)元素中的第一個(gè)元素元素:last選取最后一個(gè)元素選取最后一個(gè)元素$(li:last)選取所有選取所有元素中的最后一元素中的最后一個(gè)個(gè)元素元素:even選取索引是偶數(shù)的所選取索引是偶數(shù)的所有元素（有元素（index從從0開開始）始）$(li:even)選取索引選取索引是偶數(shù)的所有是偶數(shù)的所有元元素素:odd選取索引是奇數(shù)的所選取索引是奇數(shù)的所有元素（有元素（index從從0開開始）始）$(li:odd)選取索引選取索引是奇數(shù)的所有是奇數(shù)的所有元元素素基本過濾選擇器可以選取第一個(gè)元素、最后一個(gè)元素、索引為偶數(shù)或奇數(shù)的元素基本

16、過濾選擇器基本過濾選擇器選取第一個(gè)元素$(li:first)$(li:last)$(li:even)$(“l(fā)i:odd”)選取最后一個(gè)元素選取最后一個(gè)元素選取索引為偶數(shù)的元素選取索引為偶數(shù)的元素選取索引為奇數(shù)的元素選取索引為奇數(shù)的元素基本過濾選擇器基本過濾選擇器名稱名稱語法構(gòu)成語法構(gòu)成描述描述示例示例基本過濾選基本過濾選擇器擇器:eq(index)選取索引等于選取索引等于index的元素（的元素（index從從0開開始）始）$(li:eq(1)選取索引選取索引等于等于1的的元素元素:gt(index)選取索引大于選取索引大于index的元素（的元素（index從從0開開始）始）$(li:gt(

17、1)選取索引選取索引大于大于1的的元素（注：元素（注：大于大于1，不包括，不包括1）:lt(index)選取索引小于選取索引小于index的元素（的元素（index從從0開開始）始）$(“l(fā)i:lt(1)”)選取索引選取索引小于小于1的的元素（注元素（注：小于小于1，不包括，不包括1）基本過濾選擇器可以根據(jù)索引的值選取元素基本過濾選擇器基本過濾選擇器選取索引值等于1的元素$(li:eq(1)$(li:gt(1)$(li:lt(1)選取選取索引值大于索引值大于1的元素的元素選取選取索引值小于索引值小于1的元素的元素基本過濾選擇器基本過濾選擇器名稱名稱語法構(gòu)成語法構(gòu)成描述描述示例示例基本過濾選基本

18、過濾選擇器擇器:not(selector) 選取去除所有與給定選取去除所有與給定選擇器匹配的元素選擇器匹配的元素$(li:not(.three)選選取取class不是不是three的元的元素素:header選取所有標(biāo)題元素，選取所有標(biāo)題元素，如如h1h6$(:header)選取網(wǎng)選取網(wǎng)頁中所有標(biāo)題元素頁中所有標(biāo)題元素:focus選取當(dāng)前獲取焦點(diǎn)的選取當(dāng)前獲取焦點(diǎn)的元素元素$(:focus)選取當(dāng)前選取當(dāng)前獲取焦點(diǎn)的元素獲取焦點(diǎn)的元素基本過濾選擇器還支持一些特殊的選擇方式基本過濾選擇器基本過濾選擇器根據(jù)選擇器反向選擇元素$(li:not(.three)$(:header)$(:focus)選取所有標(biāo)題元素選取所有標(biāo)題元素選取獲得焦點(diǎn)的元素選取獲得焦點(diǎn)的元素可見性過濾選擇器可見性過濾選擇器名稱名稱語法構(gòu)成語法構(gòu)成描述描述示例示例可見性過濾可見性過濾選擇器選擇器:visible選取所有可見的元素選取所有可見的元素 $(:visible)選取所選取所有可見的元素有可見的元素:hidden選取所有隱藏的元素選取所有隱藏的元素 $(:hidden)選取所選取所有隱藏的元素有隱藏的元素可見性過濾選擇器可以通過元素顯示狀態(tài)來選取元素可見性過濾選擇器可見性過濾選擇器$( p:hidden).show();