你的位置:首页 > Java教程

[Java教程]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”)