Jquery选择器
1、 基本选择器
选择器 | 描述 | 结果 | 示例 |
|---|---|---|---|
#id | 根据id获取元素 | 单个 | $(“#myid”)选取id的值为myid的元素 |
.class | 根据class获取元素 | 集合 | $(“.myclass”)选取class的值为myclass的元素 |
a,p,img等html标签 | 根据指定的html标签获取元素 | 集合 | $(“img”)选取所有的img标签 |
* | 获取所有的元素 | 集合 | $(“*”)获取所有标签元素 |
a,.myclass,#id等 | 获取对应标签元素 | 集合 | $(“a,.myclass,#myid”)获取a、class的值为myclass以及id为myid的元素集合 |
2、 层次选择器
选择器 | 描述 | 结果 | 示例 |
|---|---|---|---|
$(“#myid .sonid”) | 选取id为myid里所有后代元素 | 集合 | $(“#myid .my”)这里是后代元素 |
$(“#myid >.sonid”) | 选取id为myid的子元素 | 集合 | $(“#mydi>.myson”)子元素 |
$(“prev + next”)等同于$(“prev”).next() | 选取prev紧跟的next元素 | 集合 | $(“.one+.myclass”)选取class为one的后面中class为myclass元素 |
$(“prev~siblings”)等同于$(“prev”).nextAll() | 选取prev后面的所有同辈元素 | 集合 | $(“.pre”).nextAll() |
注释：
1) 子元素和后代元素区别，a是b的子元素，b是c的子元素，那么可以说a和b都是c的后代元素
2) nextAll()和siblings的区别在于nextAll是有约束的
3、 过滤选择器
基本过滤
选择器 | 描述 | 结果 | 示例 |
|---|---|---|---|
:first | 选取第一个元素 | 单个 | $(“div:first”)选取div元素中第一个div |
:last | 选取最后一个元素 | 单个 | $(“div:last”)选取div元素中最后一个div |
:not(selector) | 去除所有给定选择器匹配的元素 | 集合 | $(“input:not(.myclass)”)去掉class不是 myclass的input元素 |
:even | 选取索引是偶数的所有元素 | 集合 | $(“input:even”)选取偶数的input标签 |
|---|---|---|---|
:odd | 选取索引是奇数的所有元素 | 集合 | $(“input:odd”)选取索引是奇数的input标签 |
:eq(index)和:gt(index)和:lt(index) | 所以等于、大于、小于index的元素 | ||
:header | 选取所有标题元素 | 集合 | 选取的是h1、h2等 |
:focus | 选取获取当前焦点的元素 | 集合 |
内容过滤
选择器 | 描述 | 结果 | 示例 |
|---|---|---|---|
:contains(text) | 选取包含有text内容的元素 | 集合 | $(“div:contains(‘Joyous’)”)选取含有文本 为Joyous的div元素 |
:empty | 选取不包含子元素或者文本是空的元素 | 集合 | $(“span:empty”)选取不含子元素或者没有内容的span |
:has(selector) | 选取有选择器所匹配的元素 | 集合 | $(“div:has(“p”)”)选取含有p标签的div元素 |
:parent | 选取含有子元素或者文本的元素 | 集合 |
属性过滤
选择器 | 描述 | 结果 | 示例 |
|---|---|---|---|
[attribute] | 选取拥有此属性的元素 | 集合 | $(“div[id]”)选取拥有id属性的div |
[attribute=value] | 选取属性值是value的元素 | 集合 | $(“div[class=myclass]”)选取class为myclass的div |
[attribute!=value] | 和上面相反 | 集合 |
可见性过滤
选择器 | 描述 | 结果 | 示例 |
|---|---|---|---|
:hidden | 选取所有不可见的元素 | 集合 | 包含有input中hidden以及display:none等 |
:visible | 选取所有可见的元素 | 集合 |
子元素过滤
选择器 | 描述 | 结果 | 示例 |
|---|---|---|---|
:nth-child | 选取每个父元素下第index个子元素或者奇偶元素（这里的index是从1开始的） | 集合 | |
:first-child | 选取每个父元素的第一个元素 | 集合 | |
:last-child | 选取每个父元素的最后一个元素 | 集合 | |
:only-child | 选取仅有一个子元素的元素 | 集合 |
表单对象属性过滤
选择器 | 描述 | 结果 | 示例 |
|---|---|---|---|
:enabled | 选取所有可用元素 | 集合 | $(“#form1 :enabled”)选取表单id是form1的所有可用元素 |
:disabled | 选取所有不可用元素 | 集合 | $(“#form1 :disabled”)选取表单id是form1的所有不可用元素 |
:checked | 选取所有被选中元素（单选框、复选框） | 集合 | $(“input:checked”) |
:selected | 选取所有被选中元素（下拉列表） | 集合 | $(“select option: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”) |
:hidden | 选取所有隐藏域 | 集合 | $(“:hidden”) |