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

posted @ 2020-01-01 20:46  wwww2  阅读(341)  评论(0编辑  收藏  举报