jQuery选择器小结(基本选择器、层次选择器、过滤选择器和表单选择器) 没写完

JQ选择器

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

基本选择器

基本选择器通过元素id，class和标签名等查找DOM查找元素。

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$("#test")选取id为test的元素
.class	根据给定的类名匹配元素	集合元素	$(".test")选取所有class为test的元素
element	根据给定的元素匹配类名	集合元素	$("p")选取所有的p元素
*	匹配所有元素	集合元素	$("*")选取所有元素
selector1,selector2,...,selectorN	将每一个选择器匹配到的元素合并后一起返回	集合元素	$("div, span,p.myClass")选取所有的<div><span>和有class为myClass的<p>标签的一组元素

基本选择器示例：

功能	代码	执行后
改变id为one的元素的背景色	$("#one").css("background","#bbffaa");
改变class为mini的所有元素的背景色	$(".mini").css("background","#bbffaa");
改变元素名为<div>的所有元素的背景色	$("div").css("background","#bbffaa");
改变所有元素的背景色	$("*").css("background","#bbffaa")
改变所有的<span>元素和id为two的元素和背景色	$("span, #two").css("background","#bbffaa");

层次选择器

如果想通过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>同辈元素

示例：

层次选择器示例

功能	代码	执行后
改变body内所有div的背景色	$("body div").css("background","#bbffaa");
改变body内子<div>元素的背景色	$("body>div").css("background","#bbffaa");
改变class为one的下一个<div>同辈元素背景色	$(".one + div").css("background","#bbffaa");
改变id为two的元素后面的所有<div>同辈元素的背景色	$("#two ~ div").css("background","#bbffaa");

在层次选择器中，第1个和第2个比较常用，后面的很少用。

$("prev + next") 可以使用next()来代替，例如$(".one+div")  等价于 $(".one").next("div")

$("prev~siblings")可以使用nextAll()来代替。

// 选取#prev之后的所有同辈div元素
$("#prev ~ div").css("background","#bbffaa");
//同上
$("#prev").nextAll("div").css("background","#bbffaa");
// 选取#prev所有的同辈div元素，无论前后位置
$("#prev").siblings("div").css("background","#bbffaa");

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与css中的伪类语法相同，即选择器都以一个冒号(:)开头。根据不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、和表单对象属性过滤选择器。