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、语法形式

三、工作状态属性过滤器

语法规则

Linux之文件查看指令(二)

Linux之文件目錄指令(一)

Linux之搜索查找命令

Linux之用戶管理和組管理

Linux之時間日期指令

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結