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.[例子]:
<input type="text"/>
<input type="text" name="two" />
<input type="text" name="three" />
<input type="text" name="four" />
问题1:哪一个input没有name属性
答:都有,只是第一个没有手动赋值
问题2:哪一个div中name属性的值为" "
答:第一个,因为第一个没有手动赋值
3.[使用]:
1)$("选择器[属性名]"):留下满足定位条件的并且在声明时
为指定属性进行手动赋值的dom对象
例子:$(":text[name]")<input type="text" name="two" />
<input type="text" name="three"/>
2)$("选择器[属性名='值']"):留下满足定位条件的并且属性内容等于
属性内容的dom对象
例子:$(":text[name='']"):<input type="text"/>
$(":text[name!='four']"):<input type="text"/>
<input type="text" name="two" />
<input type="text" name="three" />
3) $("选择器[属性名^='值']"):留下满足定位条件的并且指定属性内容以[指定内容为开头]所有dom对象
例子:$(":text[name^='t']"):<input type="text" name="two" />
<input type="text" name="three" />
4) $("选择器[属性名$='值']"):留下满足定位条件的并且指定属性内容以[指定内容为结尾]所有dom对象
例子:$(":text[name^='e']"):<input type="text" name="three" />
5) $("选择器[属性名*='值']"):留下满足定位条件的并且指定属性内容【包含】指定内容的所有DOM对象
例子:$(":text[name*='o']"):<input type="text" name="two" />
<input type="text" name="four"/>
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