JQuery学习笔记选择器 --- 基本选择器和层次选择器

钱多多

2015-09-13

关注关注

关于选择器的综合实例文件，会在最后一篇选择器文章中贴出。

基本选择器

这是jQuery种最常用的，也是最简单的选择器。通过元素的id、class和标签名等来查找DOM元素

#id---根据指定的id匹配一个元素---返回单个元素---$("#id")选取id为test的元素

.class---根据给定的类名匹配元素---返回集合元素---$(".test")选取所有class为test的元素

elelment---根据给定元素的名匹配元素---返回集合元素---$("*")选取所有的元素

selector1,selector2..---将每一个选择器匹配到的元素合并后一起返回---返回集合元素---$("div,span,p,myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素

练习：

//改变id为one的元素的背景色成#bbffaa
$("#one").css("background","#bbffaa");
//改变class为mini的所有元素的背景色为#bbffaa
$(".mini").css("background","#bbffaa");
//改变元素名是<div>的所有元素的背景色为#bbffaa
$("div").css("background","#bbffaa");
//改变所有元素的背景色
$("*").css("backgroundColor","#bbffaa");
//改变所有的<span>元素和id为two的元素的背景色
$("span,#two").css("background","#bbffaa");

----------------------------------------------------------------------------------------------

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是个好选择。

$("ancestor descendant")--选取ancestor元素里的所有descendant元素--返回集合元素---$("div span")选取<div>里所有的<span>元素

$("parent > child")--选取parent元素下的child元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素，不一定是直接父子关系---返回集合元素---$("div>span")选取<div>元素下元素名是<span>的子元素

$("prev + next")---选取紧接在prev元素后的next元素--返回集合元素---$(".one+div")选取class为one的下一个<div>同辈元素

$("prev~siblings")---选取prev元素之后的所有siblings---返回集合元素---$("#two~div")选取id为two的元素后面的所有<div>同辈元素

练习：

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

在层次选择器中，第1个和第2个选择器用的比较多，后面的两个在jQuery中可以用更简单的方法代替，所以用的几率少些。

可以用next()方法来代替$("prev+next")选择器：

$(".one+div") == $(".one").next("div");

可以用nextAll()方法来代替$("prev ~ siblings")选择器：

$("#prev~div") == $("#prev").nextAll("div");

同时，siblings()方法所取得的同辈元素与位置无关，即取得所有同辈元素，然而#("#prev ~div")是取#prev后面的所有同辈div元素

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

-----总结自《锋利的Jquery（第二版）》

jquery选择器 background 背景色 jquery