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
感谢分享