前端：jQuery选择器
元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p")选取<p> 元素。
$("p.intro")选取所有 class="intro" 的<p>元素。
$("p#demo") 选取所有id="demo" 的<p>元素。
属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 # 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 # 的元素。
$("[href$='.jpg']") 选取所有 href 值以 .jpg 结尾的元素。
选择子元素
用空格分隔
$("父元素 子元素 孙元素")
常用选择器
| 基本选择器 | 描 述 | 返 回 | 示 例 | 说明 |
|---|---|---|---|---|
#id |
根据给定的id匹配 |
单个 | $("#test") |
选取 id 为test 的元素 |
.class |
根据给定的类名匹配 | 集合 | $(".test") |
选取所有 class 为 test 的元素 |
element |
根据给定的元素名匹配 | 集合 | $("p") |
选取所有的 <p> 元素 |
* |
匹配所有元素 | 集合 | $("*") |
选取所有的元素 |
sel1,sel2,...,selN |
将每个选择器匹配到的元素合并后一起返回 | 集合 | $("div,span,p.myClass") |
选取所有<div>，<span>和拥有class为 myClass 的<p>元素 |
位置关系选择器
通过DOM元素之间的层次关系来获取特定的元素，例如后代元素，子元素，相邻元素和兄弟元素等。
| 层次选择器 | 描 述 | 返 回 | 示 例 | 说明 |
|---|---|---|---|---|
$("ancestor descendant") |
选取ancestor元素里所有descendant(后代)元素 |
集合 | $("div span") |
选取 <div>下的所有的<span>元素 |
$("parent>child") |
选取parent元素下的child(子)元素 |
集合 | $("div>span") |
选取 <div>元素下元素名是<span>的子元素 |
$("prev+next") |
选取紧接在prev元素后的next元素 |
集合 | $(".one+div") |
选取class为one的下一个 <div> 兄弟元素 |
$("prev~siblings") |
选取prev元素之后的所有siblings元素 |
集合 | $("#two~div") |
选取id为two的元素后面所有 <div>兄弟元素 |
可以用next()方法来代替$("prev+next")选择器，即$(".one+div")与$(".one").next("div")等效。
可以用nextAll()方法来代替$("prev~siblings")选择器，即$(".one~div")与$(".one").nextAll("div")等效。
