jQuery选择器
jQuery选择器可以分为基本选择器、层次选择器、过滤选择器和表单选择器。
1、基本选择器
| 选择器 |
描述 |
示例 |
| #id |
根据id匹配一个元素 |
$("#id") |
| .class |
根据类名匹配元素,获得集合 |
$(".clazz") |
| element |
根据给定元素名匹配 |
$("p") |
| * |
匹配所有元素 |
$("*") |
| selector1,selector2,...,selectorN |
所有选择器的合集 |
$("div,span,p.myClass") |
2、层次选择器
| 选择器 |
描述 |
示例 |
| $("ancestor descendant") |
选取ancestor元素里的所有descendant后代元素 |
$("div span") |
| $("parent>child") |
选取parent元素下的child元素 |
$("div>span") |
| $("prev+next") |
选取class为one的下一个<div>同辈元素 |
$(".one+div") |
| $("prev~siblings") |
选取id为two的元素后面的所有<div> |
$("#two~div") |
3、过滤选择器
| 选择器 |
示例 |
描述 |
| :first |
$("div:first") |
选取所有<div>元素中的第一个<div> |
| :last |
$("div:last") |
|
| :not(selector) |
$(input:not(.myClass)) |
选取class不是myClass的<input>元素 |
| :even |
$("input:even") |
选取索引是偶数的<input> |
| :odd |
$("input:odd") |
选取索引是奇数的<input> |
| :eq(index) |
$("input:eq(1)") |
选取索引等于1的<input> |
| :gt(index) |
$("input:gt(1)") |
选取索引大于1的<input> |
| :lt(index) |
$("input:lt(1)") |
选取索引小于1的<input> |
| :header |
$(":header") |
选取页面中所有的h标签 |
| :animated |
$("div:animated") |
选取正在执行动画的<div> |
| :focus |
$(":focus") |
选取当前获取焦点的元素 |
| 选择器 |
示例 |
描述 |
| :contains(text) |
$("div:contains('我')") |
选取含有文本“我”的<div>元素 |
| :empty |
$("div:empty") |
选取不包含子元素（包括文本元素）的<div>元素 |
| :has(selector) |
$("div:has(p)") |
选取含有<p>元素的<div>元素 |
| :parent |
$("div:parent") |
选取拥有子元素（包括文本元素）的<div>元素 |
| 选择器 |
示例 |
描述 |
| :hidden |
$(":hidden") |
选取所有不可见元素 |
| :visible |
$("div:visible") |
选取所有可见的<div>元素 |
| 选择器 |
示例 |
描述 |
| [attribute] |
$("div[id]") |
选取拥有属性id的元素 |
| [attribute=value] |
$("div[title=test]") |
选取属性title为test的<div>元素 |
| != ^= $= *= |
= ~= |
|
| [attribute1][attribute2][attributeN] |
$("div[id][title$='test']") |
选取拥有属性id，并且属性title以‘test’结束的<div>元素 |
| 选择器 |
示例 |
描述 |
| :nth-child(even) |
|
选取每个父元素下的索引值是偶数的元素 |
| :nth-child(odd) |
|
选取每个父元素下的索引值是奇数的元素 |
| :nth-child(2) |
|
选取每个父元素下的索引值是2的元素 |
| :nth-child(3n) |
|
选取每个父元素下的索引值是3的倍数的元素 |
| :nth-child(3n+1) |
|
选取每个父元素下的索引值是3的倍数+1的元素 |
| :first-child |
$("ul li:first-child") |
选取每个<ul>中的第一个<l i> |
| :last-child |
$("ul li:last-child") |
选取每个<ul>中的最后一个<l i> |
| :only-child |
$("ul li:only-child") |
在<ul>中选取唯一子元素的<l i>元素 |
| 选择器 |
示例 |
描述 |
| :enabled |
$("#form1:enabled") |
选取id为form1的表单内的所有可用元素 |
| :disabled |
$("#form2:disabled") |
选取id为form2的表单内的所有不可用的元素 |
| :checked |
$("input:checked") |
选取所有被选中的<input>元素 |
| :selected |
$("select option:selected") |
选取所有被选中的select元素 |
4、表单选择器
| 选择器 |
示例 |
描述 |
| :input |
$(":input") |
选取所有input，select、textarea、button |
| :text |
$(":text") |
选取所有单行文本框 |
| :password |
$(":password") |
选取所有密码框 |
| :radio |
$(":radio") |
|
| :checkbox |
$(":checkbox") |
|
| :submit |
$(":submit") |
|
| :image |
$(":image") |
|
| :reset |
$(":reset") |
选取所有重置按钮 |
| :button |
$(":button") |
|
| :file |
$(":file") |
|
| :hidden |
$(":hidden") |
|
本文标题：jQuery选择器
本文链接：https://www.haomeiwen.com/subject/piklkttx.html
网友评论