《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH07 jQuery選擇器與過濾器_第1頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH07 jQuery選擇器與過濾器_第2頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH07 jQuery選擇器與過濾器_第3頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH07 jQuery選擇器與過濾器_第4頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH07 jQuery選擇器與過濾器_第5頁
已閱讀5頁，還剩107頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第7章jQuery選擇器與過濾器本章學(xué)習(xí)目標(biāo) 理解jQuery選擇器和過濾器的作用； 掌握jQuery選擇器的常見用法； 掌握jQuery過濾器的常見用法。目錄7.1jQuery選擇器7.2jQuery過濾器7.3階段案例：網(wǎng)頁一鍵換膚7.1jQuery選擇器jQuery選擇器可用于快速選定需要的HTML元素，并為其進(jìn)行后續(xù)處理。jQuery選擇器的部分語法規(guī)則來自于CSS選擇器，加上其他功能模塊形成了jQuery特有的選擇匹配元素工具，簡(jiǎn)化了用戶使用JavaScript選擇和操作元素的復(fù)雜度。7.1jQuery選擇器7.1.1基礎(chǔ)選擇器(BasicSelector) 7.1.2屬性選擇器(AttributeSelector) 7.1.3表單選擇器(FormSelector) 7.1.4層次選擇器(HierarchySelector) 7.1.5jQueryCSS選擇器7.1.1基礎(chǔ)選擇器(BasicSelector) jQuery基礎(chǔ)選擇器(BasicSelector)的語法規(guī)則基本和CSS選擇器相同，可以通過指定HTML元素的標(biāo)簽名稱、類名稱或ID名稱對(duì)元素進(jìn)行篩選定位。 7.1.1基礎(chǔ)選擇器(BasicSelector) 7.1.1基礎(chǔ)選擇器(BasicSelector) 1. 全局選擇器全局選擇器用于選擇文檔中所有的元素。其語法結(jié)構(gòu)如下：$("*")全局選擇器會(huì)遍歷文檔中所有的元素標(biāo)簽，甚至包括首部標(biāo)簽<head>及其內(nèi)部的<meta>、<script>等，運(yùn)行速度較慢。7.1.1基礎(chǔ)選擇器(BasicSelector) 1. 全局選擇器【例7-1】jQuery全局選擇器的使用7.1.1基礎(chǔ)選擇器(BasicSelector) 2.元素選擇器元素選擇器用于選擇所有指定標(biāo)簽名稱的元素。其語法結(jié)構(gòu)如下：$("element")這里的element在使用時(shí)需要換成真正的元素標(biāo)簽名稱。例如，$("h1")表示選中所有<h1>標(biāo)題元素。使用元素選擇器時(shí)，jQuery會(huì)調(diào)用JavaScript中的原生方法getElementsByTagName()來獲取指定的元素。該方法化簡(jiǎn)了原先JavaScript的代碼量。7.1.1基礎(chǔ)選擇器(BasicSelector) 2.元素選擇器【例7-2】jQuery元素選擇器的使用7.1.1基礎(chǔ)選擇器(BasicSelector) 3. ID選擇器ID選擇器用于選擇指定ID名稱的單個(gè)元素。其語法結(jié)構(gòu)如下：$("#ID")這里的ID在使用時(shí)需要換成元素真正的ID名稱。例如，$("#test")表示選中id="test"的元素。使用ID選擇器時(shí)，jQuery會(huì)調(diào)用JavaScript中的原生方法getElementById()來獲取指定ID名稱的元素。7.1.1基礎(chǔ)選擇器(BasicSelector) 3. ID選擇器ID選擇器也可以和元素選擇器配合使用，例如：$("p#test01")表示選擇id="test01"的段落元素<p>。7.1.1基礎(chǔ)選擇器(BasicSelector) 3. ID選擇器【例7-3】jQueryID選擇器的使用7.1.1基礎(chǔ)選擇器(BasicSelector) 4. 類選擇器類選擇器用于篩選出具有同一個(gè)class屬性值的所有元素。其語法結(jié)構(gòu)如下：$(".class")這里的class在使用時(shí)需要換成真正的類名稱。例如，$(".box")表示選擇所有class="box"的元素。如果一個(gè)元素包含了多個(gè)類，只要其中任意一個(gè)類符合條件即可被選中。使用類選擇器時(shí)，jQuery會(huì)調(diào)用JavaScript中的原生方法getElementsByClassName()來獲取指定的元素。7.1.1基礎(chǔ)選擇器(BasicSelector) 4. 類選擇器類選擇器也可以和元素選擇器配合使用，例如：$("p.style01")表示選擇所有具有class="style01"的段落元素<p>。7.1.1基礎(chǔ)選擇器(BasicSelector) 4. 類選擇器【例7-4】jQuery類選擇器的使用7.1.1基礎(chǔ)選擇器(BasicSelector) 5. 多重選擇器多重選擇器適用于需要批量處理的多種元素，可以將不同的篩選條件用逗號(hào)隔開寫入同一個(gè)選擇器中。其語法結(jié)構(gòu)如下：$("selector1[,selector2]......[,selectorN]")其中selector1-selectorN需要全部換成具體的jQuery選擇器，數(shù)量可自定義。這里的選擇器可以是元素選擇器、ID選擇器或類選擇器的任意一種或組合使用，只要滿足其中任意一個(gè)條件的元素即可被選中。7.1.1基礎(chǔ)選擇器(BasicSelector) 5. 多重選擇器例如：$("p,div.style01,#news")上述代碼表示選中所有的段落元素<p>、class="style01"的<div>元素以及id="news"的元素。7.1.1基礎(chǔ)選擇器(BasicSelector) 5. 多重選擇器【例7-5】jQuery多重選擇器的使用7.1.2屬性選擇器(AttributeSelector)屬性選擇器可以用于選擇具有指定屬性要求的元素。jQuery使用路徑表達(dá)式（XPath）在HTML文檔中進(jìn)行導(dǎo)航，從而選擇指定屬性的元素。7.1.2屬性選擇器(AttributeSelector)jQuery屬性選擇器的常見用法如表所示。7.1.2屬性選擇器(AttributeSelector)屬性選擇器也可以和其他選擇器配合使用，能縮小匹配范圍。例如：$("img[src$='.png']")上述代碼表示找出頁面中所有src屬性值以".png"結(jié)尾的圖像元素<img>。7.1.2屬性選擇器(AttributeSelector)【例7-6】jQuery屬性選擇器的使用7.1.3表單選擇器(FormSelector) jQuery表單選擇器(FormSelector)可用于選擇指定類型或處于指定狀態(tài)的表單元素。7.1.3表單選擇器(FormSelector) 7.1.3表單選擇器(FormSelector) 7.1.3表單選擇器(FormSelector) 【例7-7】jQuery表單選擇器的使用7.1.4層次選擇器(HierarchySelector)1. 子元素選擇器子元素選擇器（ChildSelector）只能選擇指定元素的第一層子元素。其語法結(jié)構(gòu)如下：$("parent>child")其中參數(shù)parent可以是任何一個(gè)有效的jQuery選擇器，參數(shù)child填入的選擇器篩選的必須是parent的第一層子元素。7.1.4層次選擇器(HierarchySelector)1. 子元素選擇器例如：<p>這是一個(gè)<span><strong>測(cè)試</strong>段落</span>，用于測(cè)試子元素的層次。</p>在上述代碼中段落元素<p>的第一層子元素為<span>，而<strong>是<span>的第一層子元素，只能算是<p>元素的后代。因此使用子元素選擇器只能是$("p>span")或者是$("span>strong")的形式，不可以寫成$("p>strong")的形式。7.1.4層次選擇器(HierarchySelector)1. 子元素選擇器【例7-8】jQuery子元素選擇器的使用7.1.4層次選擇器(HierarchySelector)2. 后代選擇器后代選擇器（DescendantSelector）可以用于選擇指定元素內(nèi)包含的所有后代元素。它比子元素選擇器的涵蓋范圍更加廣泛。其語法結(jié)構(gòu)如下：$("ancestordescendant")其中參數(shù)ancestor可以是任何一個(gè)有效的jQuery選擇器，參數(shù)descendant填入的選擇器篩選的必須是parent的后代元素，該后代元素可以是parent元素的第一層子元素，也可以是其中子元素的后代。7.1.4層次選擇器(HierarchySelector)2. 后代選擇器例如：<p>這是一個(gè)<span><strong>測(cè)試</strong>段落</span>，用于測(cè)試子元素的層次。</p>在上述代碼中段落元素<p>的第一層子元素為<span>，而<strong>是<span>的第一層子元素，屬于是<p>元素的后代。因此使用后代選擇器選擇其中的<strong>標(biāo)簽可以是$("pstrong")或者$("spanstrong")的形式均可。7.1.4層次選擇器(HierarchySelector)2. 后代選擇器【例7-9】jQuery后代選擇器的使用7.1.4層次選擇器(HierarchySelector)3.后相鄰選擇器后相鄰選擇器（NextAdjacentSelector）可以用于選擇指定元素相鄰的后一個(gè)元素。其語法結(jié)構(gòu)如下：$("prev+next")其中參數(shù)prev可以是任何一個(gè)有效的jQuery選擇器，參數(shù)next填入的選擇器篩選的必須是與prev相鄰的后一個(gè)元素。7.1.4層次選擇器(HierarchySelector)3.后相鄰選擇器當(dāng)需要選擇的元素沒有id名稱或class屬性值可以進(jìn)行選擇時(shí)，可以考慮使用該方法先獲取其相鄰的前一個(gè)元素，然后再定位到需要的元素。例如：<pclass="test">這是第一個(gè)段落元素。</p><p>這是第二個(gè)段落元素。</p>上述代碼包含了兩個(gè)段落元素<p>，其中第一個(gè)元素可以使用類選擇器$("p.test")獲取，第二個(gè)元素?zé)oid名稱和class屬性值，因此可以考慮使用相鄰選擇器$("p.test+p")獲取。7.1.4層次選擇器(HierarchySelector)3.后相鄰選擇器【例7-10】jQuery后相鄰選擇器的使用7.1.4層次選擇器(HierarchySelector)4.后兄弟選擇器后兄弟選擇器（NextSiblingsSelector）可以用于選擇指定元素后面跟隨的所有符合條件的兄弟元素。其語法結(jié)構(gòu)如下：$("prev~siblings")其中參數(shù)prev可以是任何一個(gè)有效的jQuery選擇器，參數(shù)siblings填入的選擇器篩選的必須是位置在prev元素后面的兄弟元素。7.1.4層次選擇器(HierarchySelector)4.后兄弟選擇器該選擇器與上一小節(jié)介紹的$("prev+next")不同之處在于：$("prev+next")只能篩選緊跟在指定元素后面的下一個(gè)相鄰元素，而$("prev~siblings")可以篩選指定元素后面所有符合條件的兄弟元素，可以是多個(gè)元素。7.1.4層次選擇器(HierarchySelector)4.后兄弟選擇器當(dāng)在同一個(gè)父元素中有多個(gè)元素需要選擇，可以考慮使用該選擇器先找到它們的前一個(gè)兄弟元素，然后在批量選中這些元素。例如：<pclass="test">這是第一個(gè)段落元素。</p><p>這是第二個(gè)段落元素。</p><p>這是第三個(gè)段落元素。</p>上述代碼包含了三個(gè)段落元素<p>，其中第一個(gè)段落元素可以使用類選擇器$("p.test")獲取，后兩個(gè)段落元素?zé)oid名稱和class屬性值，因此可以考慮使用后兄弟選擇器$("p.test~p")獲取。7.1.4層次選擇器(HierarchySelector)4.后兄弟選擇器【例7-11】jQuery后兄弟選擇器的使用7.1.5jQueryCSS選擇器jQueryCSS選擇器用于改變指定HTML元素的CSS屬性。其語法結(jié)構(gòu)如下：$(selector).css(propertyName,value);其中selector參數(shù)位置可以是任意有效的選擇器，propertyName參數(shù)位置為CSS屬性名稱，value參數(shù)位置為需要設(shè)置的CSS屬性值。7.1.5jQueryCSS選擇器例如，將所有h1標(biāo)簽的背景顏色改為灰色，寫法如下：$("h1").css("background-color","gray");7.1.5jQueryCSS選擇器【例7-12】jQueryCSS選擇器的使用7.2jQuery過濾器jQuery過濾器可單獨(dú)使用，也可以與其他選擇器配合使用。根據(jù)篩選條件可歸納為基礎(chǔ)過濾器、子元素過濾器、內(nèi)容過濾器和可見性過濾器。7.2jQuery過濾器 7.2.1基礎(chǔ)過濾器(BasicFilter) 7.2.2子元素過濾器(ChildFilter) 7.2.3內(nèi)容過濾器(ContentFilter) 7.2.4可見性過濾器(VisibilityFilter) 7.2.1基礎(chǔ)過濾器(BasicFilter)1. :first和:last:first過濾器用于篩選第一個(gè)符合條件的元素，其語法結(jié)構(gòu)如下：:first過濾器只能選擇符合條件的第一個(gè)元素。例如：上述代碼表示選擇頁面上的第一個(gè)<div>元素。$(":first")$("div:first")7.2.1基礎(chǔ)過濾器(BasicFilter)1. :first和:last:last過濾器用于篩選最后一個(gè)符合條件的元素，其語法結(jié)構(gòu)如下：:last過濾器可單獨(dú)使用，也可以與其他選擇器配合使用。$(":last")7.2.1基礎(chǔ)過濾器(BasicFilter)1. :first和:last【例7-13】jQuery基礎(chǔ)過濾器:first和:last的使用7.2.1基礎(chǔ)過濾器(BasicFilter)2. :even和:odd:even過濾器用于篩選符合條件的偶數(shù)個(gè)元素，序號(hào)從0開始計(jì)數(shù)。其語法結(jié)構(gòu)如下：例如，篩選表格中的偶數(shù)行寫法如下：由于:even過濾器是基于JavaScript數(shù)組的原理，同樣繼承了從0開始計(jì)數(shù)的規(guī)則，因此上述代碼表示篩選表格的第1、3、5......以及更多行。$(":even")$("tr:even")7.2.1基礎(chǔ)過濾器(BasicFilter)2. :even和:odd:odd過濾器用于篩選符合條件的奇數(shù)個(gè)元素，序號(hào)從0開始計(jì)數(shù)。其語法結(jié)構(gòu)如下：例如，篩選表格中的奇數(shù)行寫法如下：需要注意的是，:odd過濾器同樣繼承了從0開始計(jì)數(shù)的規(guī)則，因此上述代碼表示篩選表格的第2、4、6......以及更多行。$(":odd")$("tr:odd")7.2.1基礎(chǔ)過濾器(BasicFilter)2. :even和:odd【例7-14】jQuery基礎(chǔ)過濾器:even和:odd的使用7.2.1基礎(chǔ)過濾器(BasicFilter)3. :eq()、:gt()和:lt():eq()過濾器用于選擇指定序號(hào)為n的元素，序號(hào)從0開始計(jì)數(shù)。其中eq來源于英文單詞equal（等于）的前兩個(gè)字母縮寫。其語法結(jié)構(gòu)如下：參數(shù)index可替換為指定的序號(hào)。在jQuery1.8版以后，若index填入負(fù)數(shù)，表示倒數(shù)第n個(gè)元素。其中:eq(0)等同于:first過濾器的效果。$(":eq(index)")7.2.1基礎(chǔ)過濾器(BasicFilter)3. :eq()、:gt()和:lt():gt()過濾器用于選擇所有大于序號(hào)為n的元素，序號(hào)從0開始計(jì)數(shù)。其中g(shù)t來源于英文單詞greaterthan（大于）的首字縮寫。其語法結(jié)構(gòu)如下：其中參數(shù)index替換為指定的序號(hào)。在jQuery1.8版以后，若index填入負(fù)數(shù)，表示序號(hào)大于倒數(shù)第n個(gè)元素。$(":gt(index)")7.2.1基礎(chǔ)過濾器(BasicFilter)3. :eq()、:gt()和:lt():lt()過濾器用于選擇所有小于序號(hào)為n的元素，序號(hào)從0開始計(jì)數(shù)。其中l(wèi)t來源于英文單詞lessthan（小于）的首字縮寫。其語法結(jié)構(gòu)如下：參數(shù)index可替換為指定的序號(hào)。在jQuery1.8版以后，若index填入負(fù)數(shù)，表示序號(hào)小于倒數(shù)第n個(gè)元素。其中:lt(1)相當(dāng)于:first過濾器的效果。$(":lt(index)")7.2.1基礎(chǔ)過濾器(BasicFilter)3. :eq()、:gt()和:lt()【例7-15】jQuery基礎(chǔ)過濾器:eq()、:gt()和:lt()的使用7.2.1基礎(chǔ)過濾器(BasicFilter)4. :not():not()過濾器用于篩選所有不符合條件的元素，其語法結(jié)構(gòu)如下：所有的選擇器都可以與:not()配合使用來篩選相反的條件。$(":not(selector)")7.2.1基礎(chǔ)過濾器(BasicFilter)4. :not()【例7-16】jQuery基礎(chǔ)過濾器:not()的使用7.2.1基礎(chǔ)過濾器(BasicFilter)5. :header:header()過濾器用于篩選所有的標(biāo)題元素，從<h1>到<h6>均在此選擇范圍內(nèi)。其語法結(jié)構(gòu)如下：$(":header")7.2.1基礎(chǔ)過濾器(BasicFilter)5. :header【例7-17】jQuery基礎(chǔ)過濾器:header()的使用7.2.2子元素過濾器(ChildFilter)jQuery子元素過濾器(ChildFilter)可篩選指定元素的子元素。常見用法如表所示。7.2.2子元素過濾器(ChildFilter)1. :first-child:first-child過濾器用于篩選頁面上每個(gè)父元素中的第一個(gè)子元素，其語法結(jié)構(gòu)如下：與只能選擇唯一元素的:first過濾器不同，只要是頁面上的父元素都可以同時(shí)使用:first-child過濾器從中選出其第一個(gè)子元素，因此選擇結(jié)果可能不止一個(gè)元素。$(":first-child")7.2.2子元素過濾器(ChildFilter)1. :first-child:first-child過濾器可單獨(dú)使用，也可以與其他選擇器配合使用。例如：上述代碼表示在頁面上所有包含有段落元素<p>的父元素中篩選出每個(gè)父元素內(nèi)部的第一個(gè)段落子元素<p>。$("p:first-child")7.2.2子元素過濾器(ChildFilter)1. :first-child需要注意的是，這里所篩選出來的段落子元素<p>有可能并不是其父元素的第一個(gè)子元素，例如以下這種情況：<div><span>我是第一個(gè)子元素。</span><p>我是第二個(gè)子元素，但是也是第一個(gè)段落元素。我將被$("p:first-child")篩選出來。</p><p>我是第三個(gè)子元素。</p></div>7.2.2子元素過濾器(ChildFilter)1. :first-child【例7-18】jQuery基礎(chǔ)過濾器:first-child()的使用7.2.2子元素過濾器(ChildFilter)2. :last-child:last-child過濾器用于篩選頁面上每個(gè)父元素中的最后一個(gè)子元素，其語法結(jié)構(gòu)如下：與:first-child過濾器類似，選擇結(jié)果可能不止一個(gè)元素。$(":last-child")7.2.2子元素過濾器(ChildFilter)2. :last-child:last-child過濾器可單獨(dú)使用，同樣也可以與其他選擇器配合使用。例如：上述代碼表示在頁面上所有包含有段落元素<p>的父元素中篩選出每個(gè)父元素內(nèi)部的最后一個(gè)段落子元素<p>。$("p:last-child")7.2.2子元素過濾器(ChildFilter)2. :last-child需要注意的是，這里所篩選出來的段落子元素<p>有可能并不是其父元素的最后一個(gè)子元素，例如以下這種情況：<div><p>我是第一個(gè)子元素。</p><p>

我是第二個(gè)子元素，但是也是最后一個(gè)段落元素。

我將被$("p:last-child")篩選出來。</p><span>我是最后一個(gè)子元素。</span></div>7.2.2子元素過濾器(ChildFilter)2. :last-child【例7-19】jQuery基礎(chǔ)過濾器:last-child()的使用7.2.2子元素過濾器(ChildFilter)3. :nth-child:nth-child()過濾器用于篩選頁面上每個(gè)父元素中的第n個(gè)子元素，序號(hào)從1開始計(jì)數(shù)。其語法結(jié)構(gòu)如下：其中index參數(shù)可以填入具體的數(shù)值，例如：上述代碼表示篩選父元素中的第2個(gè)子元素。$(":nth-child(index)")$(":nth-child(2)")7.2.2子元素過濾器(ChildFilter)3. :nth-child也可以在:nth-child()過濾器的index參數(shù)位置填入even或odd字樣，分別表示偶數(shù)個(gè)或奇數(shù)個(gè)元素。例如：上述代碼表示篩選父元素中的第1、3、5、7...個(gè)子元素。$(":nth-child(odd)")7.2.2子元素過濾器(ChildFilter)3. :nth-child還可以在:nth-child()過濾器的index參數(shù)位置填入數(shù)字與字母n的算術(shù)組合，n的取值從0開始，每次自增1直到篩選完全部符合條件的子元素為止。例如：上述代碼表示篩選父元素中的第3n+1個(gè)元素，即第1、4、7、10...個(gè)子元素。$(":nth-child(3n+1)")7.2.2子元素過濾器(ChildFilter)3. :nth-child:nth-child()過濾器可單獨(dú)使用，也可以與其他選擇器配合使用。例如:nth-child(1)表示篩選第一個(gè)子元素，等同于:first-child()。7.2.2子元素過濾器(ChildFilter)3. :nth-child【例7-20】jQuery基礎(chǔ)過濾器:nth-child()的使用7.2.2子元素過濾器(ChildFilter)4. :only-child:only-child過濾器用于篩選所有在父元素中有且僅有一個(gè)的子元素。其語法結(jié)構(gòu)如下：:only-child()過濾器可單獨(dú)使用，也可以與其他選擇器配合使用。例如：上述代碼表示在所有只包含一個(gè)子元素的<div>父元素中，查找<span>類型的子元素。$(":only-child")$("divspan:only-child")7.2.2子元素過濾器(ChildFilter)4. :only-child如果父元素中包含了其他子元素則不匹配，例如以下這種情況：上述代碼如果使用$("divspan:only-child")進(jìn)行篩選則匹配失敗，因?yàn)楦冈?lt;div>中還包含了其他子元素<button>。<div> <span>這是span元素</span> <button>這是button元素</button></div>7.2.2子元素過濾器(ChildFilter)4. :only-child需要注意的是，即使其他子元素是<br>或<hr>等內(nèi)容也會(huì)匹配失敗。例如：上述代碼如果使用$("divspan:only-child")進(jìn)行篩選也會(huì)匹配失敗，因?yàn)?lt;hr>也會(huì)被認(rèn)為是父元素<div>的第二個(gè)子元素。<div> <span>這是span元素</span> <hr></div>7.2.2子元素過濾器(ChildFilter)4. :only-child如果父元素中只包含其他文本內(nèi)容不影響:only-child過濾器的判斷。例如：上述代碼如果使用$("divspan:only-child")進(jìn)行篩選會(huì)匹配成功。<div> <span>這是span元素</span>

這段文字不會(huì)影響span作為div的唯一子元素。</div>7.2.2子元素過濾器(ChildFilter)4. :only-child如果子元素內(nèi)部還包含自身的子元素也不會(huì)影響匹配。例如:上述代碼如果使用$("divspan:only-child")進(jìn)行篩選也會(huì)匹配成功。<div> <span>

這是span元素<br>

這里的br元素是span的子元素<br>

不影響span作為div的唯一子元素。 </span></div>7.2.2子元素過濾器(ChildFilter)4. :only-child【例7-21】jQuery基礎(chǔ)過濾器:only-child()的使用7.2.3內(nèi)容過濾器(ContentFilter)jQuery內(nèi)容過濾器(ContentFilter)可以根據(jù)元素所包含的子元素或文本內(nèi)容進(jìn)行過濾篩選。常見用法如表所示。7.2.3內(nèi)容過濾器(ContentFilter)1. :contains():contains()過濾器用于篩選出所有包含指定文本內(nèi)容的元素，其語法結(jié)構(gòu)如下：其中text替換成指定的字符串文本，由于過濾器外面已經(jīng)存在一對(duì)雙引號(hào)，因此該文本可以用單引號(hào)括住具體文字內(nèi)容。例如：上述代碼表示選擇所有文本內(nèi)容包含"hi"字樣的段落元素<p>。$(":contains(text)")$("p:contains('hi')")7.2.3內(nèi)容過濾器(ContentFilter)1. :contains():contains()過濾器的篩選文本是大小寫敏感型，例如：上述兩個(gè)選擇器的表示完全不同的篩選結(jié)果。$("p:contains('hello')")$("p:contains('HELLO')")7.2.3內(nèi)容過濾器(ContentFilter)1. :contains()【例7-22】jQuery內(nèi)容過濾器:contains()的使用7.2.3內(nèi)容過濾器(ContentFilter)2. :empty:empty過濾器用于選擇未包含子節(jié)點(diǎn)（子元素和文本）的元素，其語法結(jié)構(gòu)如下：:empty過濾器可以和其他有效選擇器配合使用，例如：上述代碼表示選擇所有無內(nèi)容的表格單元格元素<td>。部分元素標(biāo)簽直接默認(rèn)為不包含任何子節(jié)點(diǎn)，例如水平線標(biāo)簽<hr>、換行標(biāo)簽<br>、圖像標(biāo)簽<img>、表單標(biāo)簽<input>等。$(":empty")$("td:empty")7.2.3內(nèi)容過濾器(ContentFilter)2. :empty【例7-23】jQuery內(nèi)容過濾器:empty()的使用7.2.3內(nèi)容過濾器(ContentFilter)3. :parent:parent過濾器用于選擇包含了子節(jié)點(diǎn)（子元素和文本）的元素，其語法結(jié)構(gòu)如下：

:parent過濾器可以和其他有效選擇器配合使用，例如：上述代碼表示選擇所有包含內(nèi)容的表格單元格元素<td>。需要注意的是，W3C規(guī)定了段落元素<p>起碼包含一個(gè)子節(jié)點(diǎn)，即使該元素中沒有任何文本內(nèi)容。$(":parent")$("td:parent")7.2.3內(nèi)容過濾器(ContentFilter)3. :parent【例7-24】jQuery內(nèi)容過濾器:parent()的使用

7.2.3內(nèi)容過濾器(ContentFilter)4. :has:has()過濾器用于選擇包含指定選擇器的元素，其語法結(jié)構(gòu)如下：所有的選擇器都可以與:has()配合使用作為包含的條件。例如：上述代碼表示選擇所有包含表格的塊元素<div>。$(":has(selector)")$("div:has(table)")7.2.3內(nèi)容過濾器(ContentFilter)4. :has【例7-25】jQuery內(nèi)容過濾器:has()的使用7.2.4可見性過濾器(VisibilityFilter)jQuery可見性過濾器(VisibilityFilter)根據(jù)元素當(dāng)前狀態(tài)是否可見進(jìn)行過濾篩選。常見用法如表所示。7.2.4可見性過濾器(VisibilityFilter)1. :hidden:hidden過濾器用于篩選出所有處于隱藏狀態(tài)的元素，其語法結(jié)構(gòu)如下：:hidden過濾器可單獨(dú)使用，也可以與其他選擇器配合使用對(duì)元素進(jìn)一步過濾篩選。例如：上述代碼表示查找所有隱藏的段落元素<p>。$(":hidden")$("p:hidden")7.2.4可見性過濾器(VisibilityFilter)1. :hidden元素在網(wǎng)頁中不占用任何位置空間就被認(rèn)為是隱藏的，具體有以下幾種情況：元素的寬度和高度明確設(shè)置為0；元素的CSS屬性中display的值為none；表單元素的type屬性設(shè)置為hidden；元素的父元素處于隱藏狀態(tài)，因此元素也一并無法顯示出來；下拉列表中的所有選項(xiàng)<option>元素也被認(rèn)為是隱藏的，無論其是否為selected狀態(tài)；7.2.4可見性過濾器(VisibilityFilter)1. :hidden【例7-26】jQuery可見性過濾器:hidden()的使用7.2.4可見性過濾器(VisibilityFilter)2. :visible:visible過濾器用于篩選出所有處于可見狀態(tài)的元素，其語法結(jié)構(gòu)如下：:visible過濾器可單獨(dú)使用，也可以與其他選擇器配合使用對(duì)元素進(jìn)一步過濾篩選。:visible過濾器與:hidden過濾器的篩選條件完全相反，因此無法同時(shí)使用。$(":visible")7.2.4可見性過濾器(VisibilityFilter)2. :visible需要注意的是，元素處于以下幾種特殊情況中也被認(rèn)為是可見狀態(tài):元素的透明度屬性opacity為0，此時(shí)元素仍然占據(jù)原來的位置；元素的可見屬性visibility值為hidden，此時(shí)元素仍然占據(jù)原來的位置；當(dāng)元素處于逐漸被隱藏的動(dòng)畫效果中，到動(dòng)畫結(jié)束之前都被認(rèn)為仍然是可見的；當(dāng)元素處于逐漸被顯現(xiàn)的動(dòng)畫效果中，從動(dòng)畫一開始啟動(dòng)就被認(rèn)為是可見的。7.2.4可見性過濾器(VisibilityFilter)2. :visible【例7-27】jQuery可見性過濾器:visible()的使用7.3階段案例：網(wǎng)頁一鍵換膚7.3.1案例需求 7.3.2案例分析 7.3.3案例制作 7.3.4案例思考 7.3.1案例需求制作一款可以給網(wǎng)頁主題顏色一鍵切換的應(yīng)用，點(diǎn)擊工具箱中的按鈕即可實(shí)現(xiàn)一鍵換膚功能。7.3.2案例分析網(wǎng)頁的主題顏色主要是靠css樣式代碼實(shí)現(xiàn)的，如果事先制作好多個(gè)主題顏色的CSS樣式文件，那么HTML頁面引用了其中哪個(gè)主題顏色樣式文件，就會(huì)顯示對(duì)應(yīng)的皮膚效果了?？梢钥紤]給HTML頁面<head>中關(guān)于外部樣式表引用的<link>標(biāo)簽加上id屬性，這樣就方便被jQuery選擇器準(zhǔn)確定位和修改引用的文件地址了。7.3.2案例分析例如，在HTML文件中有：上述代碼就表示原先引用的外部樣式文件是a.css，然后被jQuery使用ID選擇器找到了id="skinCSS"的<link>標(biāo)簽，并且把引用的href地址變更成了b.css。<linkid="skinCSS"rel="stylesheet"href="css/theme/a.css"><script>//更新對(duì)應(yīng)的CSS樣式文件$("#skinCSS").attr("href","css/theme/b.css")</script>7.3.3案例制作創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如ThemeSwitch.html。1. <!doctypehtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>網(wǎng)頁一鍵換膚</title>6. <linkrel="stylesheet"href="css/common.css">7. <linkid="skinCSS"rel="stylesheet"href="css/theme/skin_blue.css">8. <scriptsrc="js/jquery-1.12.3.min.js"></script>9. </head>10. 11. <body>12. <!--一、頁眉-->13. <header>14. <h1>網(wǎng)頁一鍵換膚</h1>15. </header>16. <!--二、主體部分-->17. <divid="container">18. <!--工具箱整體區(qū)域-->19. <divid="toolbox">7.3.3案例制作20.<!--（1）工具箱區(qū)域頁眉-->21. <header>22. <h2>主題切換工具箱</h2>23. </header>24. <!--（2）按鈕區(qū)域-->25. <divid="btnBox">26. <button>藍(lán)色主題</button>27. <button>紅色主題</button>28. <button>紫色主題</button>29. </div>30. <!--（3）工具箱區(qū)域頁腳-->31. <footer></footer>32. </div>33. </div>34. <!--三、頁腳-->35. <footer>36. Copyright©ZWJ2023-2033AllRightsReserved.37. </footer>38. 7.3.3案例制作39. <script>40. //記錄主題皮膚CSS文件名稱的數(shù)組41. varskinArr=["skin_blue","skin_red","skin_purple"];42. 43. //監(jiān)聽按鈕點(diǎn)擊事件44. $("#btnBoxbutton").click(function(){45. //獲取當(dāng)前鼠標(biāo)點(diǎn)擊的按鈕索引值（從0開始計(jì)數(shù)）46. vari=$("#btnBoxbutton").index(this);47. //更新對(duì)應(yīng)的CSS樣式文件48. $("#skinCSS").attr("href","css/theme/"+skinArr[i]+".css")49. });50. </script>51. </body>52. </html>7.3.3案例制作1. /*公共樣式*/2. body{3. text-align:center;/*文本居中*/4. background-color:#ccc;/*網(wǎng)頁背景顏色灰色*/5. }6. *{7. margin:0;/*清除外邊距*/8. padding:0;/*清除內(nèi)邊距*/9. box-sizing:border-box;/*頁眉頁腳*/10. }11. /*頁眉頁腳*/12. header,footer{13. color

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論