- jQuery從入門到精通 （軟件開發(fā)視頻大講堂）
- 明日科技
- 2072字
- 2020-11-28 23:47:23
4.6 過濾選擇器
過濾選擇器包括簡單過濾器、內(nèi)容過濾器、可見性過濾器、表單對(duì)象屬性過濾器和子元素選擇器等。下面進(jìn)行詳細(xì)介紹。
4.6.1 簡單過濾器
簡單過濾器是指以冒號(hào)開頭，通常用于實(shí)現(xiàn)簡單過濾效果的過濾器。例如，匹配找到的第一個(gè)元素等。jQuery提供的過濾器如表4.1所示。
表4.1 jQuery的簡單過濾器
【例4.9】實(shí)現(xiàn)一個(gè)帶表頭的雙色表格。（實(shí)例位置：光盤\TM\sl\4\9）
（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標(biāo)記中，添加一個(gè)5行5列的表格，關(guān)鍵代碼如下：
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
<tr>
<td width="11%" height="27">編號(hào)</td>
<td width="14%">祝福對(duì)象</td>
<td width="12%">祝福者</td>
<td width="33%">字條內(nèi)容</td>
<td width="30%">發(fā)送時(shí)間</td>
</tr>
<tr>
<td height="27">1</td>
<td>琦琦</td>
<td>媽媽</td>
<td>愿你健康快樂的成長！</td>
<td>2014-08-15 13:06:06</td>
</tr>
…… <!--此處省略了其他行的代碼-->
</table>
（3）編寫CSS樣式，通過元素選擇符設(shè)置單元格的樣式，并且編寫th、even和odd 3個(gè)類選擇符，用于控制表格中相應(yīng)行的樣式，具體代碼如下：
<style type="text/css">
td{
font-size:12px; /＊設(shè)置單元格的樣式＊/
padding:3px; /＊設(shè)置內(nèi)邊距＊/
}
.th{
background-color:#B6DF48; /＊設(shè)置背景顏色＊/
font-weight:bold; /＊設(shè)置文字加粗顯示＊/
text-align:center; /＊文字居中對(duì)齊＊/
}
.even{
background-color:#E8F3D1; /＊設(shè)置偶數(shù)行的背景顏色＊/
}
.odd{
background-color:#F9FCEF; /＊設(shè)置奇數(shù)行的背景顏色＊/
}
</style>
（4）在引入jQuery庫的代碼下方編寫jQuery代碼，分別設(shè)置表格奇數(shù)行與偶數(shù)行的樣式，并且單獨(dú)為第一行添加名為th的樣式，具體代碼如下：
<script type="text/javascript">
$(document).ready(function() {
$("tr:even").addClass("even"); //設(shè)置奇數(shù)行所用的CSS類
$("tr:odd").addClass("odd"); //設(shè)置偶數(shù)行所用的CSS類
$("tr:first").removeClass("even"); //移除even類
$("tr:first").addClass("th"); //添加th類
});
</script>
在上面的代碼中，為表格的第一行添加th類時(shí)，需要先將該行應(yīng)用的even類移除，然后再進(jìn)行添加，否則，新添加的CSS類將不起作用。
運(yùn)行本實(shí)例，將顯示如圖4.16所示的效果。其中，第一行為表頭，編號(hào)為1和3的行采用的是偶數(shù)行樣式，編號(hào)為2和4的行采用的是奇數(shù)行的樣式。
圖4.16 帶表頭的雙色表格
4.6.2 內(nèi)容過濾器
內(nèi)容過濾器就是通過DOM元素包含的文本內(nèi)容以及是否含有匹配的元素進(jìn)行篩選。內(nèi)容過濾器共包括：contains(text)、:empty、:has(selector)和：parent這4種，如表4.2所示。
表4.2 jQuery的內(nèi)容過濾器
【例4.10】應(yīng)用內(nèi)容過濾器匹配為空的單元格、不為空的單元格和包含指定文本的單元格。（實(shí)例位置：光盤\TM\sl\4\10）
（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標(biāo)記中，添加一個(gè)5行5列的表格，關(guān)鍵代碼如下：
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
…… <!--此處省略了其他行的代碼-->
<tr>
<td height="27">4</td>
<td>明日科技</td>
<td>wgh</td>
<td></td>
<td>2014-08-15 13:46:06</td>
</tr>
</table>
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，為非空單元格設(shè)置背景顏色，為空單元格添加默認(rèn)內(nèi)容以及為含有指定文本內(nèi)容的單元格設(shè)置文字顏色，具體代碼如下：
<script type="text/javascript">
$(document).ready(function() {
$("td:parent").css("background-color", "#E8F3D1"); //為非空的單元格設(shè)置背景顏色
$("td:empty").html("暫無內(nèi)容"); //為空的單元格添加默認(rèn)內(nèi)容
$("td:contains(’輕鴻’)").css("color", "red"); //將含有文本“輕鴻”的單元格的文字顏色設(shè)置為紅色
});
</script>
運(yùn)行本實(shí)例將顯示如圖4.17所示的效果。其中，內(nèi)容為“輕鴻”的單元格元素被標(biāo)記為紅色，編號(hào)為4的行中“字條內(nèi)容”在設(shè)計(jì)時(shí)為空，這里應(yīng)用jQuery為其添加文本“暫無內(nèi)容”，除該單元格外的其他單元格的背景顏色均被設(shè)置為#E8F3D1色。
圖4.17 運(yùn)行結(jié)果圖
4.6.3 可見性過濾器
元素的可見狀態(tài)有兩種，分別是隱藏狀態(tài)和顯示狀態(tài)?？梢娦赃^濾器就是利用元素的可見狀態(tài)匹配元素的。因此，可見性過濾器也有兩種，一種是匹配所有可見元素的:visible過濾器，另一種是匹配所有不可見元素的:hidden過濾器。
說明
在應(yīng)用:hidden過濾器時(shí)，display屬性是none以及input元素的type屬性為hidden的元素都會(huì)被匹配到。
【例4.11】獲取頁面上隱藏和顯示的input元素的值。（實(shí)例位置：光盤\TM\sl\4\11）
（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標(biāo)記中，添加3個(gè)input元素，其中第一個(gè)為顯示的文本框，第二個(gè)為不顯示的文本框，第3個(gè)為隱藏域，關(guān)鍵代碼如下：
<input type="text" value="顯示的input元素">
<input type="text" value="我是不顯示的input元素" style="display:none">
<input type="hidden" value="我是隱藏域">
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，獲取頁面上隱藏和顯示的input元素的值，具體代碼如下：
<script type="text/javascript">
$(document).ready(function() {
var visibleVal=$("input:visible").val(); //取得顯示的input的值
var hiddenVal1=$("input:hidden:eq(0)").val(); //取得隱藏的文本框的值
var hiddenVal2=$("input:hidden:eq(1)").val(); //取得隱藏域的值
alert(visibleVal+"\n\r"+hiddenVal1+"\n\r"+hiddenVal2); //彈出取得的信息
});
</script>
運(yùn)行本實(shí)例將顯示如圖4.18所示的效果。
圖4.18 彈出隱藏和顯示的input元素的值
4.6.4 表單對(duì)象的屬性過濾器
表單對(duì)象的屬性過濾器通過表單元素的狀態(tài)屬性（例如選中、不可用等狀態(tài)）匹配元素，包括：checked過濾器、:disabled過濾器、:enabled過濾器和:selected過濾器這4種，如表4.3所示。
表4.3 jQuery的表單對(duì)象的屬性過濾器
【例4.12】利用表單過濾器匹配表單中相應(yīng)的元素。（實(shí)例位置：光盤\TM\sl\4\12）
（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標(biāo)記中，添加一個(gè)表單，并在該表單中添加3個(gè)復(fù)選框、一個(gè)不可用按鈕和一個(gè)下拉列表框，其中，前兩個(gè)復(fù)選框?yàn)檫x中狀態(tài)，關(guān)鍵代碼如下：
<form>
復(fù)選框1: <input type="checkbox"checked="checked"value="復(fù)選框1"/>
復(fù)選框2: <input type="checkbox"checked="checked"value="復(fù)選框2"/>
復(fù)選框3: <input type="checkbox"value="復(fù)選框3"/><br/>
不可用按鈕： <input type="button"value="不可用按鈕"disabled><br/>
下拉列表框：
<select onchange="selectVal()">
<option value="列表項(xiàng)1">列表項(xiàng)1</option>
<option value="列表項(xiàng)2">列表項(xiàng)2</option>
<option value="列表項(xiàng)3">列表項(xiàng)3</option>
</select>
</form>
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，實(shí)現(xiàn)匹配表單中的被選中的checkbox元素、不可用元素和被選中的option元素的值，具體代碼如下：
<script type="text/javascript">
$(document).ready(function() {
$("input:checked").css("background-color", "red"); //設(shè)置選中的復(fù)選框的背景顏色
$("input:disabled").val("我是不可用的"); //為灰色不可用按鈕賦值
})
function selectVal(){ //下拉列表框變化時(shí)執(zhí)行的方法
alert($("select option:selected").val()); //顯示選中的值
}
</script>
運(yùn)行本實(shí)例，選中下拉列表框中的列表項(xiàng)3，將彈出提示對(duì)話框顯示選中列表項(xiàng)的值，如圖4.19所示。在該圖中，選中的兩個(gè)復(fù)選框的背景為紅色，另外的一個(gè)復(fù)選框沒有設(shè)置背景顏色，不可用按鈕的value值被修改為“我是不可用的”。
圖4.19 利用表單過濾器匹配表單中相應(yīng)的元素
4.6.5 子元素過濾器
子元素選擇器就是篩選給定某個(gè)元素的子元素，具體的過濾條件由選擇器的種類而定。jQuery提供的子元素選擇器如表4.4所示。
表4.4 jQuery的子元素選擇器
- 一步一步學(xué)Spring Boot 2：微服務(wù)項(xiàng)目實(shí)戰(zhàn)
- R語言數(shù)據(jù)分析從入門到精通
- Java面向?qū)ο笏枷肱c程序設(shè)計(jì)
- PostgreSQL Replication（Second Edition）
- 微服務(wù)從小白到專家：Spring Cloud和Kubernetes實(shí)戰(zhàn)
- Tableau 10 Bootcamp
- 輕松上手2D游戲開發(fā)：Unity入門
- “笨辦法”學(xué)C語言
- R用戶Python學(xué)習(xí)指南：數(shù)據(jù)科學(xué)方法
- Rust游戲開發(fā)實(shí)戰(zhàn)
- Mastering Docker
- Node.js從入門到精通
- 從零開始構(gòu)建深度前饋神經(jīng)網(wǎng)絡(luò)：Python+TensorFlow 2.x
- Mastering Object：Oriented Python（Second Edition）
- 量子計(jì)算機(jī)編程：從入門到實(shí)踐