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