前端：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")等效。

转载于:https://www.cnblogs.com/xuejianbest/p/10284967.html