迹忆博客
当前位置: 主页 > 学无止境 > WEB前端 > 文章

总结JQuery中的选择器

发布时间: 2016-08-08 作者: 嫣然 浏览次数:

选择器是jquery的根基,在jquery中,对事件处理,遍历DOM都需要选择器,如果能熟练掌握选择器,不仅能简化代码,还可以达到事半功倍的效果,下面就总结一下jquery中常用的选择器。在说jquery的选择器之前,先总结一下css选择器。

css选择器

选择器 语法 描述 示例
标签选择器 E{css规则} 以文档标签作为选择符 div{width:100px;}
ID选择符 #id {css规则} 以文档元素的唯一标识id号作为选择符 #box{width:100px;height:100px;}
类选择符 E.className{css规则} 以文档元素的类名作为选择符 div.box{color:#fff;}
.box{background:red;}
群组选择器 E1,E2,E3{css规则} 多个元素应用同样的样式 div,p,h1{padding:0;margin:0}
后代选择器 E F{css规则} 以元素E的后代元素F作为选择符 .box a{color:green;}
通配符选择器 *{css规则} 以文档的所有元素作为选择符 *{font-size:14px;}
伪类选择器 请见链接:

jquery选择器

jquery中的选择器完全继承了css中的风格,利用jquery选择器,可以迅速便捷的找到文档中的DOM元素,然后给他们添加相应的行为。下面总结一下jquery中的选择器。

1. 基本选择器

基本选择器是jquery中常用的选择器,也是最简单的选择器,他通过元素和标签来查找DOM中的元素,注意:在网页中,id名称只能使用一次,class允许多次使用。

选择器 描述 返回 示例
#id 根据匹配给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素
.class 根据给定的类名匹配元素 集合元素 $(".test")选取class为test的元素
element 根据给定的元素名称 集合元素 $("p")选取所有的p元素
* 匹配所有的元素 集合元素 $("*")选取所有的元素
Selector1,Selector2,Selector3... 将每一个选择器匹配到的元素合并后一起返回 集合元素 $("div,span,.p.box")选取所有div,所有span,和class名为box的p元素
 
2. 层次选择器
 
如果想通过DOM元素之间的层次关系来获取特定的元素,譬如:后台元素,兄弟元素,子元素,那么层次选择器是一个非常好的选择,下面就总结一下层次选择器。
                                                                
选择器 描述 返回 示例
$("ancestor descendant") 选取ancestor元素里的所有descendant元素 集合元素 $("div span")选取div里的所有span元素
$("parent>child") 选取parent下的所有子元素child 集合元素 $("div>span")选取div下的所有名为span的子元素
$(" prev+next ") 选取紧接在prev元素后面的next元素 集合元素 $(".one+div")选取class名为one的下一个div元素
$("prev~siblings") 选取元素prev元素之后的所有兄弟siblings元素 集合元素 $(".one~p")选取class名为one后面的所有子元素为siblings的元素

注意:

$("prev+next")可以用$("prev").next("next元素")替换。
$("prev~siblings")可以用$("prev").nextAll("next元素")替换

例子:

$(".box+div")  等价  $(".box").next("div");
$(".box~div") 等价 $(".box").nextAll("div");

3. 过滤选择器

过滤选择器是根据特定的规则来筛选特定的DOM元素,过滤规则与css中的伪类选择器语法相同。过滤选择器以“:”开头,过滤选择器根据过滤烦人内容不同,可以分为基本过滤选择器,属性过滤,内容过滤,表单过滤子元素过滤,可见性过滤

 (1) 基本过滤选择器

选择器 描述 返回 示例
:first 选取第一个元素 单个元素 $("div:first")选取所有div的第一个div元素
:last 选取最后一个元素 单个元素 $("div:last")选取所有div第最后一个div元素
:not(selector) 选取除了selector元素之外的元素 集合元素 $("div:not('.box')")选取除了class名为box元素的其他div元素
:even 选取所有索引号为偶数的元素,索引号从0开始 集合元素 $("div:even")选取所有索引号为偶数的div元素
:odd 选取所有索引号为奇数的元素,索引号从0开始 集合元素 $("div:odd")选取所有索引号为奇数的 div元素
:eq(index) 选取索引号为index的元素 单个元素 $("div:eq(0)")选取索引号为0的div元素,也就是第一个div元素
:gt(index) 选过索引号大于index的元素 集合元素 $("div:gt(2)")选取索引号大于2的div元素
:lt(index) 选取索引号小于index的 元素 集合元素 $("div:lt(3)")选取索引号 小于3的 div元素
:header 选取网页中所有的标题元素(h1,h2,h3,h4,h5,h6) 集合元素 $(":header")选取网页中所有 的标题元素
H1,h2...
:animated 选取当前正在执行动画的元素 集合元素 $("div:animated")选取当前正在执行动画的 div

  (2) 内容选择器

选择器 描述 返回 示例
:conntains("text") 筛选文本中包含"text"的元素 集合元素 $("p:contains('你好')")选取文本包含“你好”的元素
:empty 选取不包含子元素或文本的空元素 集合元素 $("div:empty")选取不包含子元素或文本的div元素
:has(selector) 选取含有selector元素的元素 集合元素 $("div:has('p')")选取含有p元素的div元素
:parent 选择含有子元素或文本的元素 集合元素 $("div:parent")选取含有子元素或文本的div元素

  (3) 选择可见性选择器

选择器 描述 返回 示例
:hidden 选取所有不可见的元素 集合元素 $(":hidden")选取所有不可见的元素,包括display:none;type="hidden";visiblity:hidden
:visible 选取所有可见元素 集合元素 $(":visible")选取所有可见元素

 (4) 属性过滤选择器

选择器 描述 返回 示例
[attribute] 选择拥有此属性的元素 集合元素 $("div[id]")选取拥有id属性的 div元素
[attribute=value] 选择属性值为value的元素 集合元素 $("div[title='box']")选取title为box的 div元素
[attribute!=value] 选择属性值不等于value的元素 集合元素 $("div[title!='box']")选取title不为box的 div元素,其中没有title属性的元素也会被选择
[attribut^=value] 选择属性值以value开头的元素 集合元素 $("div[title^=''b"])选取title以b开头的 div元素
[attribut$=value] 选择属性值以value结束的元素 集合元素 $("div[title$=''b"])选取title以b结尾的 div元素
[attribut*=value] 选择属性值含有value的元素 集合元素 $("div[title*=''b"])选取title属性值含有b的 div元素
[selector1] [selector2] [selectorN] 选择含有多个属性的选择器 集合选择器 $("div[id][class='box']")选取含有id属性和class属性,并且class="box"的div元素

  (5)子元素过滤选择器

选择器 描述 返回 示例
:nth-child(index/even/odd)注意:index从1开始 选取每个父元素下的第index元素或奇偶元素 集合元素  $("ul li:nth-child(3)")选择ul下的第三个li
:first-child 选取父元素下的第一个子元素 集合元素  $("ul li: first-child ")选择ul下的第一个li
:last-child 选取父元素下的最后一个子元素 集合元素  $("ul li:last-child ")选择ul下的最后一个li
:only-child  如果某个元素是它父元素中惟一的子元素,那么将会被匹配。如果父元素中含有其它元素,刚不会匹配 集合元素  $("ul li:only-child ")在ul中选择是唯一元素的li元素

 (6) 表单对象属性过滤选择器

此选择器主要是选取表单元素进行过滤

选择器 描述 返回 示例
:enabled 选取所有可用元素 集合元素 $("#form1 :enabled")选取form1下所有可用的元素
:disabled 选取所有不可用元素 集合元素 $("#form2:disabled")选取id为form2表单内的所有不可用的元素
:checked 选中所有被选中的元素(单选,复选) 集合元素 $("#form3:checked")选中id为form3表单下所有被选中的元素
:selected 选取所有被选中 的选项元素(下拉列表) 集合元素 $("select:selected")选取所有被选中的选项元素

 4. 表单选择器

jquery中专门加入了表单选择器

选择器 描述 返回 示例
:input 选取所有的<input><textarea><select><button>元素 集合元素 $(":input")选取所有的<input><textarea><select><button>元素
:text 选取所有的当行文本框 集合元素 $(":text")选取所有的单行文本框
:password 选取所有的密码框 集合元素 $(":password")选取所有的密码框
:radio 选取所有的单选框 集合元素 $(":radio")选取所有的单选框
:checkbox 选取所有的多选框 集合元素 $(":checkbox")选取所有的多选框
:submit 选取所有的提交按钮 集合元素 $(":submit")选取所有的提交按钮
:reset 选取所有的重置按钮 集合元素 $(":reset")选取所有的重置按钮
:image 选取所有的图像按钮 集合元素 $(":image")选取所有的图像按钮
:button 选取所有的按钮 集合元素 $("button")选取所有的按钮
:file 选取所有的上传域 集合元素 $(":file")选取所有的上传域
:hidden 选取所有的不可见元素 集合元素 $(":hidden")选取所有不可见元素

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: