4.Jquery過濾器

一、過濾器語法介紹

對已經定位到Jquery對象中DOM對象，進行二次過濾篩選的
過濾器不能單獨使用，必須聲明在選擇器後面
六種過濾器(三種常見的過濾器)
可以將多個過濾器放到同一個jquery函數中，進行層層過濾

html標籤屬性分類

基本屬性：絕大多數標籤都擁有的屬性【id，name，title，rowspan…】
樣式屬性：背景，字體，邊框
value屬性：只存在【表單域標籤中(input，select，textarea)】
工作狀態屬性：只存在表單域標籤【checked，disabled，selected】
監聽事件屬性：onclick，onchange…

二、基本過濾器

過濾器的使用條件

根據已經定位的DOM對象在jquery對象中存儲位置進行二次過濾篩選

語法規則

$(“選擇器”:first)：留下滿足條件的第一個DOM對象

//定位頁面中第一個button
$(":button":first)

$(“選擇器”:last)：留下滿足條件的最後一個DOM對象

//定位頁面中最後一個button
$(":button":last)

$(“選擇器:eq(下標值)”)：留下滿足條件中的指定位置的DOM對象

//定位頁面中第三個DIV
$("div:eq(2)")

$(“選擇器:lt(下標值)”)：留下滿足條件中的指定位置之前的所有DOM對象

//頁面中前兩個checkbox
$(":checkbox:lt(2)")

$(“選擇器:gt(下標值)”)：留下滿足條件中的指定位置之後的所有DOM

//位置在第四個button之後的所有的button
$(":button:gt(3)")

實例如下：

<body>
    <h2>以下是div</h2>
    <div id="one">我的序號是0</div>
    <div id="two" class="c02">我的序號是1</div>
    <div>
        我的序號是2
        <div class="son">我的序號是3</div>
        <div class="son">我的序號是4</div>
    </div>
    <div>我的序號是5</div>
    <h3>以下是span標籤</h3>
    <span>我是span標籤</span><br /><br />

    <!--定義按鈕-->
    <input type="button" id="btn01" value="選擇第一個div" onclick="func1()"/>
    <input type="button" id="btn02" value="選擇最後一個div"/>
    <input type="button" id="btn03" value="選擇id值不是one的div"/>
    <input type="button" id="btn04" value="選擇class不包含c02div"/>
    <input type="button" id="btn05" value="選擇索引號爲奇數的div元素"/>
    <input type="button" id="btn06" value="選擇索引號爲偶數的div元素"/>
    <input type="button" id="btn07" value="選擇索引號等於3的div元素" onclick="func2()"/>
    <input type="button" id="btn08" value="選擇索引號小於3的div元素" onclick="func3()"/>
    <input type="button" id="btn09" value="選擇索引號大於3的div元素" onclick="func4()"/>
    <input type="button" id="btn10" value="選擇所有標題元素"/>
</body>

function func1(){
    //選擇第一個div
    $("div:first").css("background-color","yellow");
}

function func2(){
    //選擇索引號等於3的div元素
    $("div:eq(3)").css("background-color","green");
}

function func3(){
    //選擇索引號小於3的div元素
    $("div:lt(3)").css("background-color","red");
}

function func4(){
    //選擇索引號大於3的div元素
    $("div:gt(3)").css("background-color","blue");
}

三、基本屬性過濾器

1、過濾條件

根據標籤在聲明時是否爲指定屬性進行手動賦值
根據標籤的屬性內容與【指定內容】關係進行過濾

<div>1</div>
<div name = "two">2</div>
<div name = "three">3</div>

注: 第一個div的name屬性爲默認值""

2、語法形式

$(“選擇器[屬性名]”)：留下滿足定位條件的並且 在聲明時爲指定屬性進行手動賦值 的DOM對象
```
//篩選出<div name = "two">2</div>和<div name = "three">3</div>
$("div[name]")
```
注: <div>1</div>不屬於name屬性手動賦值

$(“選擇器[屬性名 = ‘值’]”)：留下滿足定位條件的並且指定屬性內容[等於]指定內容DOM

//<div name = "two">2</div>
$("div[name = 'two']")

//<div>1</div>(默認值)
$("div[name = '']")
//<div>1</div>和<div name = "two">2</div>和<div name = "three">3</div>
$("div[name != 'four']")

$(“選擇器[屬性名 ^= ‘值’]”)：留下滿足定位條件的並且指定屬性內容以【指定內容爲開頭】的所有DOM對象
```
//<div name = "two">2</div>和<div name = "three">3</div>
$("div[name ^= 't']")
```
$(“選擇器[屬性名 $= ‘值’]”)：留下滿足定位條件的並且指定屬性內容以【指定內容爲結尾】的所有DOM對象
```
//<div name = "three">3</div>
$("div[name $= 'e']")
```
$(“選擇器[屬性名 *= ‘值’]”)：留下滿足定位條件的並且指定屬性內容【包含】指定內容的所有DOM
```
//<div name = "two">2</div> 和 <div name = "four">4</div>
$("div[name *= 'o']")
```
$("選擇器[屬性名1][屬性名2 *= '值'][屬性名3 ^= '值']")：多種篩選條件選擇DOM對象

<!--定義被選擇對象-->
<div id = "one" title = "test">zero</div>
<div class = "c02" title = "myTest">one</div>
<div>
    two
    <div id = "three" class = "son">three</div>
    <div title = "test" class = "son">four</div>
</div>
<div title = "testCase" id = "">five</div>
<div>six</div>
<span>我是span標籤</span>
<br /><br />

<!--定義按鈕-->
<input type="button" id="btn01" value="選擇包含title屬性的div元素" onclick="func1()"/>
<input type="button" id="btn02" value="選擇title屬性爲test的div元素" onclick="func2()"/>
<input type="button" id="btn03" value="選擇title屬性不爲test的div元素" onclick="func3()"/>
<input type="button" id="btn04" value="選擇title屬性以'te'開頭的div元素" onclick="func4()"/>
<input type="button" id="btn05" value="選擇title屬性以'st'結尾的div元素" onclick="func5()"/>
<input type="button" id="btn06" value="選擇title屬性包含'es'的div元素" onclick="func6()"/>
<input type="button" id="btn07" value="選擇title屬性包含'es'的並且含有id屬性的div元素" onclick="func7()"/>
<input type="button" id="btn08" value="選擇title屬性包含'es'的第一個div元素" onclick="func8()"/>

function func1(){
    //選擇包含title屬性的div元素
    $("div[title]").css("background-color","red");
}

function func2(){
    //選擇title屬性爲test的div元素
    $("div[title = 'test']").css("background-color","yellow");
}

function func3(){
    //選擇title屬性不爲test的div元素
    $("div[title != 'test']").css("background-color","blue");
}

function func4(){
    //選擇title屬性以'te'開頭的div元素
    $("div[title ^= 'te']").css("background-color","orange");
}

function func5(){
    //選擇title屬性以'st'結尾的div元素
    $("div[title $= 'st']").css("background-color","green");
}

function func6(){
    //選擇title屬性包含'es'的div元素
    $("div[title *= 'es']").css("background-color","pink");
}

function func7(){
    //選擇title屬性包含'es'的並且含有id屬性的div元素
    $("div[title *= 'es'][id]").css("background-color","black");
}

function func8(){
    $("div[title *= 'es']:first").css("background-color","gray");
}

三、工作狀態屬性過濾器

語法規則

$(“選擇器:enabled”)：留下滿足條件的並且處於【可用狀態】的DOM
```
//定位所有處於可用的button
$(":button:enabled")
```
$(“選擇器:disabled”)：留下滿足條件的並且處於【不可用狀態】的DOM
```
//定位所有處於不可用的button
$(":button:disabled")
```
$(“選擇器:checked”)：留下滿足條件的並且處於【選中狀態的】DOM
```
//頁面中第一個被選中的checkbox
$("checkbox:checked:first")
```

$(“選擇器:selected”)：留下滿足條件的並且處於【選中狀態的】DOM

//下拉列表中被選中的option
$("select>option:selected")

<!--定義文本框-->
文本01：<input type="text" id="text01" value="value01"/><br />
文本02：<input type="text" id="text02" value="value02" disabled="disabled"/><br />
文本03：<input type="text" id="text03" value="value03"/><br />
文本04：<input type="text" id="text04" value="value04" disabled="disabled"/><br /><br />

<!--定義複選框-->
<input type="checkbox" name="interest" value="reading" checked="checked"/>讀書
<input type="checkbox" name="interest" value="food"/>美食
<input type="checkbox" name="interest" value="travel" checked="checked"/>旅遊
<input type="checkbox" name="interest" value="music"/>音樂
<input type="checkbox" name="interest" value="shopping" checked="checked"/>購物
<br /><br />

<!--定義下拉列表-->
<select id="city">
    <option value="bj" title="beijing" selected="selected">北京</option>
    <option value="sh" title="shanghai">上海</option>
    <option value="gz" title="guangzhou">廣州</option>
    <option value="sz" title="shenzhen">深圳</option>
    <option value="hz" title="hangzhou">杭州</option>
</select>
<br /><br />

<!--定義測試按鈕-->
<button id="btn01" onclick="func1()">選擇可用文本框並修改其值</button>
<button id="btn02" onclick="func2()">選擇不可用文本框並修改其值</button>
<button id="btn03" onclick="func3()">選擇複選框被選中的元素</button>
<button id="btn04" onclick="func4()">選擇下拉列表中被選中的元素</button>

/*
	val()
	$obj.val():讀取jquery對象中第一個DOM對象的value屬性值
	$obj.val("值"):爲jquery對象中所有的DOM對象的value屬性值進行統一賦值
*/
function func1(){
    //選擇可用文本框並修改其值
    $(":text:enabled").val("可用文本框");
}

function func2(){
    //選擇不可用文本框並修改其值
    $(":text:disabled").val("不可用文本框");
}

function func3(){
    //選擇複選框被選中的元素
    $(":checkbox:checked").each(loop);
}

function loop(index,domObj){
    alert("第" + (index+1) + "個被選中的checkbox的value " + $(domObj).val());
}

function func4(){
    //選擇下拉列表中被選中的元素
    alert($("#city>option:selected").val());
}

一、過濾器語法介紹

html標籤屬性分類

二、基本過濾器

三、基本屬性過濾器

1、過濾條件

2、語法形式

三、工作狀態屬性過濾器

語法規則

10分鐘搞定Mysql主從部署配置

如何使用 JS 判斷用戶是否處於活躍狀態

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

lightdb數據庫超時相關控制參數

lightdb秒級增加列和刪除列（not null帶默認值）

Java ThreadPoolShutdown

Linux之文件查看指令(二)

Linux之文件目錄指令(一)

Linux之搜索查找命令

Linux之用戶管理和組管理

Linux之時間日期指令

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結