jq常用过滤器_jQuery笔记3——jquery过滤器

jQuery中过滤器

过滤器语法介绍：

1.对已经定位到jQuery对象中的dom对象，进行二次过滤筛选

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

3.六种过滤器(三种常见过滤器)

4.将多个过滤器放到同一个jQuery函数

(1)基本过滤器：

1.[过滤器条件]:根据已经定位的DOM对象在jQuery对象中存储位置进行二次过滤筛选

2.[使用]:

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

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

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

例子:$(":button:first"):定位页面中最后一个button

$("选择器:eq(index)"):留下满足条件中指定的DOM对象

例子:$("div:eq(2)"):定位页面中第三个div

$("选择器:lt(index)"):留下满足条件中的指定位置之前的所有DOM对象

例子:$(":checkbox:lt(2)"):定位页面中前两个checkbox

$("选择器:gt(index)"):留下满足条件中的指定下标之后的所有DOM对象

例子:$(":checkbox:gt(2)"):定位页面中下标为2之后的所有checkBox

(2)基本属性过滤器:

1.[过滤条件]:根据标签在声明时是否为指定属性进行手动赋值

根据标签的属性内容与[指定内容]关系进行过滤

2.[例子]:

问题1：哪一个input没有name属性

答：都有，只是第一个没有手动赋值

问题2：哪一个div中name属性的值为" "

答：第一个，因为第一个没有手动赋值

3.[使用]：

1)$("选择器[属性名]"):留下满足定位条件的并且在声明时

为指定属性进行手动赋值的dom对象

例子：$(":text[name]")

2)$("选择器[属性名='值']")：留下满足定位条件的并且属性内容等于

属性内容的dom对象

例子：$(":text[name='']"):

$(":text[name!='four']"):

3) $("选择器[属性名^='值']")：留下满足定位条件的并且指定属性内容以[指定内容为开头]所有dom对象

例子：$(":text[name^='t']"):

4) $("选择器[属性名$='值']")：留下满足定位条件的并且指定属性内容以[指定内容为结尾]所有dom对象

例子：$(":text[name^='e']"):

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

例子：$(":text[name*='o']"):

6)$("选择器[属性名1][属性名2*='值'][属性名3^='属性值']")

(3)工作状态属性过滤器:

1.html标签属性分类：

1)基本属性:绝大多数标签都拥有的属性,[id,name,title,rowspn]....

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(option中)

例子:$("select>option:selected"):下拉列表中被选中的option