苏木三少
错的不是你,而是这个世界。

JQuery学习之jquery过滤器

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

赞(2) 打赏
有问题的朋友随时留言,或者加我为好友。我的QQ是805375353. <<苏木三少博客 » JQuery学习之jquery过滤器

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    感谢分享

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

十年之约