jQuery選擇器.pptx

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

2、 “h3”為選擇器語法，必須放在$()中 $(“h3”)返回jQuery對象 .css()是為jQuery對象設(shè)置樣式的方法,jQuery選擇器分類,jQuery選擇器功能強(qiáng)大，種類也很多，分類如下： 類CSS選擇器 基本選擇器 層次選擇器 屬性選擇器 過濾選擇器 基本過濾選擇器 可見性過濾選擇器,基本選擇器2-1,基本選擇器包括標(biāo)簽選擇器、類選擇器、ID選擇器、并集選擇器、交集選擇器和全局選擇器,基本選擇器2-2,標(biāo)簽選擇器,$(h3).css(background,#09F),標(biāo)簽選擇器根據(jù)給定的標(biāo)簽名匹配元素,獲取并設(shè)置所有元素的背景顏色,類選擇器,$(.title).css(backg

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

4、素的背景顏色,全局選擇器,$(*).css(color,red),全局選擇器可以獲取所有元素,改變所有元素的字體顏色,層次選擇器,層次選擇器通過DOM 元素之間的層次關(guān)系來獲取元素,后代選擇器,$(#menu span).css(background-color,#09F),后代選擇器用來獲取元素的后代元素,獲取并設(shè)置#menu下的元素的背景顏色,子選擇器,$(#menuspan).css(background-color,#09F),子選擇器用來獲取元素的子元素,獲取并設(shè)置#menu下的子元素的背景顏色,相鄰選擇器,$(h2+dl).css(background-color,#09F),相鄰

5、選擇器用來選取緊鄰目標(biāo)元素的下一個(gè)元素,獲取并設(shè)置緊接在元素后的元素的背景顏色,同輩選擇器,$(h2dl).css(background-color,#09F),同輩選擇器用來選取目標(biāo)元素之后的所有同輩元素,獲取并設(shè)置元素之后的所有同輩元素的背景顏色,屬性選擇器,屬性選擇器通過HTML元素的屬性來選擇元素,屬性選擇器,根據(jù)屬性名獲取元素,$(h2title).css(background-color,#09F),屬性選擇器可以根據(jù)是否包含某屬性來選取元素,改變含有title屬性的元素的背景顏色,根據(jù)屬性值獲取元素,$(class=odds).css(background-color,#09F)

6、,屬性選擇器可以根據(jù)屬性的值來選取元素,改變class屬性的值為odds的元素的背景顏色,屬性選擇器也支持屬性值的模糊匹配,多屬性條件選擇,$(liclasstitle*=y).css(background-color,#09F),屬性選擇器支持多屬性條件復(fù)合查找元素,改變包含class屬性，且title屬性的值中含有y的元素的背景顏色,使用jQuery美化英雄聯(lián)盟簡介頁,需求說明 單擊元素后，根據(jù)下圖設(shè)置元素的背景顏色、文本顏色屬性,練習(xí),制作非緣勿擾頁面特效3-1,需求說明,指導(dǎo),制作非緣勿擾頁面特效3-2,需求說明 使用標(biāo)簽選擇器獲取元素，設(shè)置字體顏色 使用類選擇器獲取排版“導(dǎo)演”的元素

7、，加粗字體 使用ID選擇器獲取排版“標(biāo)簽”的元素，設(shè)置背景顏色、字體顏色、間距 使用屬性選擇器獲取“收藏”元素，單擊它后彈出對話框,指導(dǎo),制作非緣勿擾頁面特效3-3,實(shí)現(xiàn)思路 （1）使用$(document).ready()創(chuàng)建文檔加載事件 （2）按要求使用$(選擇器)選取所需元素 （3）為獲取到的元素添加單擊事件，并為事件添加處理事件的方法 （4）使用css( )方法或addClass()為所選取的元素添加CSS樣式，使用addClass()添加樣式時(shí)，該樣式寫在樣式表文件中,指導(dǎo),共性問題集中講解,常見問題及解決辦法 代碼規(guī)范問題 調(diào)試技巧,過濾選擇器,過濾選擇器通過特定的過濾規(guī)則來篩選元

8、素 語法特點(diǎn)是使用“:”，如使用$(“l(fā)i:first”)來選取第一個(gè)li元素 主要分類如下： 基本過濾選擇器 可見性過濾選擇器 表單對象過濾選擇器 內(nèi)容過濾選擇器、子元素過濾選擇器,基本過濾選擇器,基本過濾選擇器可以選取第一個(gè)元素、最后一個(gè)元素、索引為偶數(shù)或奇數(shù)的元素,基本過濾選擇器,選取第一個(gè)元素,$(li:first),$(li:last),$(li:even),$(“l(fā)i:odd”),選取最后一個(gè)元素,選取索引為偶數(shù)的元素,選取索引為奇數(shù)的元素,基本過濾選擇器,基本過濾選擇器可以根據(jù)索引的值選取元素,基本過濾選擇器,選取索引值等于1的元素,$(li:eq(1),$(li:gt(1),$

9、(li:lt(1),選取索引值大于1的元素,選取索引值小于1的元素,基本過濾選擇器,基本過濾選擇器還支持一些特殊的選擇方式,基本過濾選擇器,根據(jù)選擇器反向選擇元素,$(li:not(.three),$(:header),$(:focus),選取所有標(biāo)題元素,選取獲得焦點(diǎn)的元素,可見性過濾選擇器,可見性過濾選擇器可以通過元素顯示狀態(tài)來選取元素,可見性過濾選擇器,$(p:hidden).show();,獲取隱藏的元素，使其顯示,$(p:visible).hide();,獲取顯示的元素，使其隱藏,特殊符號的轉(zhuǎn)義,選擇器中的特殊符號需要轉(zhuǎn)義，在如下html代碼中,aa cc,$(#id#a); $(#

10、id2);,$(#id#a); $(#id2);,獲取這兩個(gè)元素的選擇器：,選擇器中的空格,選擇器的書寫規(guī)范很嚴(yán)格，多一個(gè)空格或少一個(gè)空格，都會影響選擇器的效果,var $t_a = $(.test :hidden); /帶空格的jQuery選擇器,選取class為“test”的元素內(nèi)部的隱藏元素,var $t_b = $(.test:hidden); /不帶空格的jQuery選擇器,選取隱藏的class為“test”的元素,使用jQuery美化近期熱門欄目,需求說明 頁面加載后，列表項(xiàng)的偶數(shù)行背景顏色為#CCC，其中“宿醉”所在列表項(xiàng)背景顏色為#FF99CC，單擊“更多”和“更多排名”均能顯示隱