1、第2章Jquery選擇器,目標(biāo),選擇器簡介 層次選擇器 過濾選擇器 表單選擇器,選擇器的概念,CSS選擇器 它使得網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)樣式完全分離。利用CSS選擇器能輕松地對某個元素添加樣式而不改動HTML結(jié)構(gòu) jQuery選擇器 jQuery中的選擇器完全繼承了CSS風(fēng)格。利用jQuery選擇器，可以非常便捷和快速地找出特定的DOM元素，然后為它們添加相應(yīng)的行為，而無需擔(dān)心瀏覽器是否支持這一選擇器。,jQuery中的基本選擇器,選擇器語法,1、通過ID選取元素 語法：$(#id) 2、通過類名獲取元素 語法：$(.className) 3、通過標(biāo)簽名獲取元素 語法：$(tagName) 4、一次

2、性獲取多個元素 語法：$(selector1, selector2, select3 .),基本選擇器示例,改變 id 為 one 的元素的背景色為 紅色 $(#one).css(backgroundColor,red); 改變元素名為 的所有元素的背景色為 # bbffaa，字體顏色為紅色 $(p).css(color:red,backgroundColor:#bbffaa);,改變第一個元素的背景色為紅色 $(p).eq(0).css(backgroundColor,red); 改變所有元素和 id 為 one 的元素的背景色為 # bbffaa $(h1,#one).css(backgr

3、oundColor,#bbffaa);,基本選擇器示例,如果想通過 DOM 元素之間的層次關(guān)系來獲取特定元素, 例如后代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器,層次選擇器,注意: (“prev div”) 選擇器只能選擇 “# prev ” 元素后面的同輩元素; 而 jQuery 中的方法 siblings() 與前后位置無關(guān), 只要是同輩節(jié)點就可以選取,改變 內(nèi)所有 的背景色為 # bbffaa $(“body div) 改變 內(nèi)子 的背景色為 # bbffaa $(“bodydiv) 改變 id 為 one 的下一個 的背景色為 # bbffaa,層次選擇器示例,

4、$(#one+div) 改變 id 為 two 的元素后面的所有兄弟的元素的背景色為 # bbffaa $(#twodiv) 改變 id 為 two 的元素所有 兄弟元素的背景色為 # bbffaa $(#two). siblings(p),Left Right_1 Right_2,層次選擇器示例, bodyfont-size:12px;text-align:center div,spanfloat:left;border:solid 1px #ccc;margin:8px;display:none .clsFraAwidth:65px;height:65px .clsFraPwidth:45

5、px;height:45px;background-color:#eee .clsFraCwidth:25px;height:25px;background-color:#ddd ,$(function() /匹配后代元素 $(#divMid).css(display,block); $(div span).css(display,block); ) $(function() /匹配子元素 $(#divMid).css(display,block); $(divspan).css(display,block); ),層次選擇器示例,$(function() /匹配后面元素 $(#divMid

6、+ div).css(display,block); $(#divMid).next().css(display,block); ) $(function() /匹配所有后面元素 $(#divMid div).css(display,block); $(#divMid).nextAll().css(display,block); ) $(function() /匹配所有相鄰元素 $(#divMid).siblings(div).css(display,block); ),層次選擇器示例,過濾選擇器,過濾選擇器主要是通過特定的過濾規(guī)則來篩選出所需的 DOM 元素, 該選擇器都以 “:” 開頭 按

7、照不同的過濾規(guī)則, 過濾選擇器又可分為基本過濾, 內(nèi)容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對象屬性過濾選擇器,基本過濾選擇器,改變第一個 div 元素的背景色為 # bbffaa $(div:first) 改變id不為 one 的所有p元素的背景色為 # bbffaa $(p:not(#one) 改變索引值為偶數(shù)的 tr元素的背景色為 # bbffaa $(“tr:even) 改變索引值為大于 3 且為奇數(shù)的 p元素的背景色為 # bbffaa $(“p:gt(3):odd) 改變所有的標(biāo)題元素的背景色為 # bbffaa $(:header) 改變當(dāng)前正在執(zhí)行動畫的所有元素的背

8、景色為 # bbffaa,基本過濾選擇器示例,頁面JavaScript代碼片段,內(nèi)容過濾選擇器,改變含有文本 di 的 p元素的背景色為 # bbffaa $(p:cotains(di) 改變不包含子元素(或者文本元素) 的 div 空元素的背景色為 # bbffaa 改變含有 class 為 mini 元素的 p元素的背景色為 # bbffaa $(p:has(.mini) 改變含有子元素(或者文本元素)的div元素的背景色為 # bbffaa,內(nèi)容過濾選擇器示例,頁面JavaScript代碼片段,可見性過濾選擇器,屬性過濾選擇器,選取下列元素,改變其背景色為 # bbffaa 含有屬性ti

9、tle 的div元素. 屬性title值等于test的div元素. 屬性title值不等于test的div元素(沒有屬性title的也將被選中). 屬性title值 以te開始 的div元素. 屬性title值 以est結(jié)束 的div元素. 屬性title值 含有es的div元素. 選取有屬性id的div元素，然后在結(jié)果中選取屬性title值含有“es”的 div 元素.,屬性過濾選擇器示例,頁面JavaScript代碼片段,子元素過濾選擇器,選取下列元素,改變其背景色為 # bbffaa 每個class為one的div父元素下的第2個子元素. 每個class為one的div父元素下的第一個子元素 每個class為one的div父元素下的最后一個子元素 如果class為one的div父元素下的僅僅只有一個子元素，那么選中這個子元素,子元素過濾選擇器示例,頁面JavaScript代碼片段,表單元素選擇器,表單對象屬性過濾選擇器,表單對象屬性過濾選擇器示例,頁面JavaScript代碼片段,總結(jié),選擇器簡介 層次選擇器