首页 » jQuery » jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、

jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、

原文 http://blog.csdn.net/superSmart_Dong/article/details/79203564

2018-01-31 02:00:25阅读(600)

这篇文章来介绍下jQuery的选择器。

选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery选择器,可以非常便捷的找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器。

jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。

1.基本选择器

选择器 描 述 返 回 示 例 #id 匹配给定的id 单个元素 $(“header”) .class 匹配给定的类名 集合元素 $(“.test”) E 匹配给定的标签名 集合元素 $(“div”) * 匹配所有元素 集合元素 $(“*’) E, .class, E… 匹配给定的集合 集合元素 $(“span, .tips”)

2.层次选择器

选择器 描 述 返 回 示 例 $(“ancestor descendant”) 匹配ancestor里的所有
descendant(后代)元素 集合元素 $(“body div”) $(“parent>child”) 匹配parent下的所有
child(子)元素 集合元素 $(“div>span”) $(“prev+next”) 匹配紧接在prev后的
next元素 集合元素 $(“.error+span”) $(“prev~siblings”) 匹配prev后的所有
siblings元素 集合元素 $(“span~a”)

3.过滤选择器

3.1 基本过滤选择器

选择器 描 述 返 回 示 例 :first 匹配第一个元素 单个元素 $(“div:first”) :last 匹配最后一个元素 单个元素 $(“span:last”) :even 匹配索引是偶数的元素
索引从0开始 集合元素 $(“li:even”) : odd 匹配索引是奇数的元素
索引从0开始 集合元素 $(“li:odd”) :eq(index) 匹配索引等于index的元
素(索引从0开始) 单个元素 $(“input:eq(2)”) :gt(index) 匹配索引大于index的元
素(索引从0开始) 集合元素 $(“input:gt(1)”) :lt(index) 匹配索引小于index的元
素(索引从0开始) 集合元素 $(“input:lt(5)”) :header 匹配所有h1,h2…等
标题元素 集合元素 $(“:header”) :animated 匹配所有正在执行
动画的元素 集合元素 $(“div:animated”)

3.2 内容过滤选择器

选择器 描 述 返 回 示 例 :contains(text) 匹配含有文本内容text
的元素 集合元素 $(“p:contains(今天)”) :empty 匹配不含子元素或
文本元素的空元素 集合元素 $(“p:empty”) :has(selector) 匹配包含selector元素
的元素 集合元素 $(“div:has(span)”) :parent 匹配含有子元素或文本
的元素 集合元素 $(“div:parent”)

3.3 可见性过滤选择器

选择器 描 述 返 回 示 例 :hidden 匹配所有不可见
的元素 集合元素 $(“:hidden”) :visible 匹配所有可见元素 集合元素 $(“:visible”)

3.4 属性过滤选择器

选择器 描 述 返 回 示 例 [attr] 匹配拥有此属性
的元素 集合元素 $(“img[alt]“) [attr=value] 匹配属性值为value
的元素 集合元素 $(“a[title=test]“) [attr!=value] 匹配属性值不等于
value的元素 集合元素 $(“a[title!=test]“) [attr^=value] 匹配属性值以value
开头的元素 集合元素 $(“img[alt^=welcome]“) [attr$=value] 匹配属性值以value
结尾的元素 集合元素 $(“img[alt$=last]“) [attr*=vlaue] 匹配属性值中含有
value的元素 集合元素 $(“div[title*=test]“) [attr1][attr2]… 通过多个属性
进行匹配 集合元素 $(“div[id][title*=test]“)

3.5 子元素过滤选择器

选择器 描 述 返 回 示 例 :nth-child 匹配每个父元素下的
第index个子元素
索引从1开始 集合元素 $(“div:nth-child(2)”) :first-child 匹配每个父元素的
第一个子元素 集合元素 $(“div:first-child”) :last-child 匹配每个父元素的
最后一个子元素 集合元素 $(“div:last-child”) : only-child 某元素是它父元素中
的唯一的子元素
则匹配它 集合元素 $(“div:only-child”)

3.6 表单对象属性过滤选择器

选择器 描 述 返 回 示 例 :enabled 匹配所有可用元素 集合元素 $(“form :enabled”) :disabled 匹配所有不可用
的元素 集合元素 $(“form :disabled”) :checked 匹配所有被选中的元素
(含单选框,复选框) 集合元素 $(“input:checked”) :selected 匹配所有被选中的
选项元素 集合元素 $(“select :selected”)

4.表单选择器

选择器 描 述 返 回 示 例 :input 匹配所有input, textarea,
select, button元素 集合元素 $(“input”) :text 匹配所有文本框 集合元素 $(“:text”) :password 匹配所有密码框 集合元素 $(“:password”) :radio 匹配所有单选框 集合元素 $(“:radio”) :checkbox 匹配所有所有多选框 集合元素 $(“:checkbox”) :submit 匹配所有提交按钮 集合元素 $(“:submit”) :image 匹配所有图像按钮 集合元素 $(“:image”) :reset 匹配所有重置按钮 集合元素 $(“:reset”) :button 匹配所有按钮 集合元素 $(“:button”) :file 匹配所有上传域 集合元素 $(“:file”)

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹