jquery过滤器

一、过滤器语法介绍：

1、对已经定位到jquery对象中DOM对象，进行二次筛选。

2、过滤器不能独立使用，必须声明在选择器后面。

3、六种过滤器（三种常见过滤器）

4、将多个过滤器放到同一个jquery中进行层层过滤。

二、基本过滤器：

1、【过滤器条件】：根据以及定位的DOM对象在jquery对象存储位置进行二次过滤筛选。

2【使用】：

$(“选择器:first”)：留下满足条件的第一个DOM对象

例子：$(“:button:first”)：定位页面中第一个button

$(“选择器:last”)：留下满足条件的最后一个DOM对象

例子：$(“:button:last”)：定位页面中最后一个button

$(“选择器:eq(下标值)”)：留下满足条件中指定位置的DOM对象

例子：$(“:div:eq(2)”)：定位页面第三个div

$(“选择器:lt(下标值)”)：留下满足条件中的指定位置之前的所有DOM

例子：$(“:checkbox:lt(2)”)：页面中前两个checkbox

$(“选择器:gt(下标值)”)：留下满足条件中的指定位置之后的所有DOM

例子：$(“:checkbox:gt(3)”)：位置在第四个button之后的所有checkbox

三、基本属性过滤器

1、【过滤条件】：根据标签在声明时是否为指定属性进行手动赋值

根据标签的属性内容与【指定内容】关系进行过滤器

2【例子】

<div>1</div>

<div name=”two”>2</div>

<div name=”three”>3</div>

新加4

<div name=”four”>4</div>

所有的DIV标签里面都有name属性，不管你写不写。

DIVname属性的值是”” 空字符串 没有手动给第一个DIVname属性赋值，因此name属性值是默认值，就是””。

3、【使用格式】

1）、$(“选择器[属性名]”) ：留下满足条件的并且在声明时为指定属性进行手动赋值的DOM对象。

例子$(“div[name]”)       <div name=”two”>2</div>   <div name=”three”>3</div>

2）、$(“选择器[属性值=’值’]”)：留下满足定位条件的并且指定属性内容【等于】指定内容DOM

例子$(“div[name=’two’]”)    <div name=”two”>2</div>

$(“div[name=’ ‘]”)    <div >1</div>

$(“div[name!=’four’]”)    <div>1</div>  <div name=”two”>2</div>   <div name=”three”>3</div>

3、$(“选择器[属性值^=’值’]”)：留下满足定定位条件的并且指定属性内容以【指定内容为开头】所有的DOM

例子$(div[name^=’t’]”)     <div name=”two”>2</div>       <div name=”three”>3</div>

4、$(“选择器[属性值$=’值’]”)：留下满足定定位条件的并且指定属性内容以【指定内容为结尾】所有的DOM

例子$(div[name$=’e’]”)        <div name=”three”>3</div>

5、$(“选择器[属性值*=’值’]”)：留下满足定定位条件的并且指定属性内容【包含】指定内容所有的DOM

例子$(div[name*=’o’]”)    <div name=”two”>2</div>  <div name=”four”>4</div>

6、$(“选择器[属性名1][属性名2*=’值’][属性名3^=’值’]”)

四、工作状态属性过滤器

1、html标签属性分类

1）、基本属性：绝大多数标签都拥有的属性，【id，name，title，rowspan】

2）、样式属性：背景，字体，边框

3）、value属性：只存在【表单域标签中（input，select，textarea）】

4)、工作状态属性：只存在表单域标签【checked，disabled，selected】

5）、监听事件属性：onclick，onchange…..

2、【使用】

1）、$(“选择器:enabled”)：留下满足条件的并且处于【可用状态】的DOM

例子：$(“:button:enabled”)：定位所有处于可用的button

2）、$(“选择器:disabled”)：留下满足条件的并且处于【不可用状态】的DOM

例子：$(“:button:disabled”)：定位所有处于不可用的button

3）、$(“选择器:checked”)：留下满足条件的并且处于【选中状态的】的DOM

例子：$(“:checkbox:checked:first”)：页面中第一个被选中的checkbox

4）、$(“选择器:selected”)：留下满足条件的并且处于【选中状态的】的DOM

例子：$(“select>option:selectd”)：下拉列表中别选中的option