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
来源: http://www.bubuko.com/infodetail-3361060.html