不会用选择器,望元素兴叹,难受的要死!在此全面的记录一遍。看完就彻底知之了!
jquery的选择器分为以下几类
1. 基本选择器
选择器 |
描述 |
示例 |
#id |
根据id匹配一个元素 |
$("#test")选取id为test的元素 |
.class |
根据类名匹配元素 |
$(".test")选取类名为test的元素集合 |
element |
根据标签名匹配元素 |
$("p")选取所有的<p>元素 |
* |
匹配所有元素 |
$("*")选取所有元素 |
selector1, selector2, <br />...., selectN |
将每一个选择器匹配到的元素合并到一起返回 |
$("div, span, p.myCalss")选取所有<div>, <span>和拥有class为myClass的 <p>标签的一组元素 |
2. 层次选择器
选择器 |
描述 |
示例 |
$("ancestor descendant") |
选取ancestor元素里所有的descendant(后代)元素 |
$("div span")选取<div>里所有的<span>后代元素 |
$("parent > child") |
选取子元素 |
$("div > span")选取<div>元素下元素名是<span>的子元素 |
$("prev + next") |
选取紧接在prev元素后的next元素 |
$(".one + div")选取class为one的下一个<div>同辈元素 |
$("prev~siblings") |
选取pre元素之后的所有siblings元素 |
$("#two~div")选取id为two的元素后面的所有<div>同辈元素 |
前两种常用,后两种不常用,因为有更简单的方式替代
$(".one + div") 等价于 $(".one").next("div")
$("#pre~div") 等价于 $("#pre").nextAll("div") 选取之后的同辈元素
另外,有一个选取同辈元素的方法,但 是选取全部,无论前后位置
$("#pre").siblings("div")
3. 过滤选择器
主要通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即以一个冒号开头
选择器 |
描述 |
示例 |
:first |
选取第一个元素 |
$("div:first")选取第一个div元素 |
:last |
选取最后一个元素 |
$("div:last")选取最后一个div元素 |
:not(selector) |
去除所有与给定选择器匹配的元素 |
$("input:not(.myClass)")选取class不是myClass的所有input元素 |
:even |
选择索引是偶数的所有元素,索引从0开始 |
$("input:even")选取索引是偶数的input元素 |
:odd |
选择索引是奇数的所有元素,索引从0开始 |
$("input:odd")选取索引是奇数的input元素 |
:eq(index) |
选择索引等于index的元素,索引从0开始 |
$("input:eq(1)")选取索引等于1的input元素 |
:gt(index) |
选择索引大于index的元素,索引从0开始 |
$("input:gt(1)")选取索引大于1的input元素 |
:lt(index) |
选择索引小于index的元素,索引从0开始 |
$("input:lt(1)")选取索引小于1的input元素 |
:header |
选取所有的标题元素,例如h1,h2,h3等 |
$(":header")选取网页中所有的h1, h2, h3 ... |
:animated |
选取当前正在执行动车的所有元素 |
$("div:animated")选取正在执行动车的div元素 |
:focus |
选取当前获取焦点的元素 |
$(":focus")选取当前获取焦点的元素 |
- 内容过滤选择器
过滤规则体现在它所包含的子元素或文本内容上
选择器 |
描述 |
示例 |
:contains(text) |
选取含有文本内容为"text"的元素 |
$("div:contains('我'")选取含有文本“我”的div元素 |
:empty |
选取不包含子元素或文本的空元素 |
$("div:empty")选取不包含子元素(包括文本元素)的div空元素 |
:has(selector) |
选取含有选择器所匹配的元素的元素 |
$("div:has(p)")选取含有p元素的div元素 |
:parent |
选取含有子元素或文本的元素 |
$("div:parent")选取拥有子元素(包括文本元素)的div元素 |
- 可见性过滤选择器
根据元素的可见和不可见状态来选择相应的元素
选择器 |
描述 |
示例 |
:hidden |
选取所有不可见元素 |
$(":hidden")选取所有不可见元素,包括<input type="hidden" />, <div style="display=none;">和<div style="visibility:hidden;">等元素。如果只想选取input元素,可以使用$("input:hidden") |
:visible |
选取所有可见元素 |
$("div:visible")选取所有可见的div元素 |
选择器 |
描述 |
示例 |
[attribute] |
选取拥有此属性的元素 |
$("div[id]") |
[attribute=value] |
选取属性的值为value的元素 |
$("div[title=test]") |
[atrribute!=value] |
选取属性的值不等于value的元素 |
$("div[title!=test]") |
[atrribute^=value] |
选取属性的值以value开始的元素 |
$("div[title^=test]") |
[atrribute$=value] |
选取属性的值以value结束的元素 |
$("div[title$=test]") |
[atrribute*=value] |
选取属性的值含有value的元素 |
$("div[title*=test]") |
[atrribute竖线=value] |
选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-”)的元素 |
$("div[title竖线=test]") |
[atrribute~=value] |
选取属性用空格分隔的值中包含一个给定值的元素 |
$("div[title~=test]") |
[attribute][attribute2][attributeN] |
用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围 |
$("div[id][title$=test]") |
选择器 |
描述 |
示例 |
:nth-child(index/ even/odd/equation) |
选取每个父元素下的第index个子元素或者奇偶元素(index从1开始) |
$("div.one :nth-child(2)" 每个class为one的div父元素下的第2个子元素 |
:first-child |
选取每个父元素的第1个子元素 |
$("div.one :first-child") 每个class为one的div父元素下的第1个子元素 |
:last-child |
选取每个父元素的最后一个子元素 |
$("div.one :last-child") 每个class为one的div父元素下的最后一个子元素 |
:only-child |
如果某个元素是它父元素中惟一的子元素,那么将会被匹配。如果含有其它元素,则不会被匹配 |
$("div.one :only-child") 如果class为one的div父元素下只有一个子元素,匹配 |
选择器 |
描述 |
示例 |
:enabled |
选取所有可用元素 |
$("#form1 :enabled") |
:disabled |
选取所有不可用元素 |
$("#form2 :disabled") |
:checked |
选取所有被选中元素(单选框,复选框) |
$("input:checked") |
:selected |
选取所有被选中的选项元素(下拉列表) |
$("select option:selected") |
4. 表单选择器
为了更加灵活操作表单,专门加入了表单选择器
选择器 |
描述 |
示例 |
:input |
选取所有的input、textarea、select、button |
$("#form1 :input") |
:text |
选取单行文本框 |
$(":text") |
:password |
选取密码框 |
$(":password") |
:radio |
选取单单选框 |
$(":radio") |
:checkbox |
选取多选框 |
$(":checkbox") |
:submit |
选取提交按钮 |
$(":submit") |
:image |
选取图像按钮 |
$(":image") |
:reset |
选取重置按钮 |
$(":reset") |
:button |
选取按钮 |
$(":button") |
:file |
选取上传域 |
$(":file") |
:hidden |
选取不可见元素 |
$(":hidden") |