jQuery选择器的优势
1.简洁的写法
$()函数在很多JavaScript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。其中$("#ID")用来代替document.getElementById()函数，即通过ID获取元素。
2.支持CSS1到CSS3选择器
jQuery选择器的写法与CSS选择器的写法十分相似，只不过两者的作用效果不同，CSS选择器是找到元素后添加样式，而jQuery选择器是找到元素后添加行为。
3.完善的处理机制
使用jQuery选择器不仅简洁，而且还能避免很多错误。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<div>test</div>
<script>
document.getElementById("tt").style.color="red";
</script>
</body>
</html>
运行以上代码，浏览器会因为网页中没有id为"tt"的元素而报错，因此，必须修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<div>test</div>
<script>
if(document.getElementById("tt")){
document.getElementById("tt").style.color="red";
}
</script>
</body>
</html>
但是如果我们需要操作很多元素，那么需要对每一个元素都进行一次判断，还太麻烦了吧！！
这个时候jQuery站了出来，其在这方面的问题上处理的非常不错，即便页面不存在该元素也不会报错哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<div>test</div>
<script>
$("#tt").css("color","red");
</script>
</body>
</html>
但是需要注意的是，$("#tt")获取的永远都是对象，即便是网页上没有这个元素，因此当要用jQuery来检查某个元素在网页上是否存在时，不能使用以下代码：
if ( $("#tt") ){
//do something
}
而应该根据获取到元素的长度来判断
if ( $("#tt").length > 0 ){
//do something
}
或者转化成DOM对象来判断
if ( $("#tt")[0] ){
//do something
}
选择器
| 1.基本选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
| element | 根据给定元素名匹配元素 | 集合元素 | $("p")选取的p标签 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有元素 |
| seletor1,....,seletorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myClass")选取所有div,span,和拥有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"); |
#one,.one
.mini
#two,.one,title=test
.mini
t=other
.mini
t=test
.mini
.mini
.mini
.mini
.mini
.mini
.mini
.mini
t=tesst
正在执行动画的span元素.
| 2.层次选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| $("祖先 后代") | 选取祖先元素里面的所有后代元素 | 集合元素 | $("div span")选取div里的所有span元素 |
| $("parent > child") | 选取父亲元素里面的孩子元素 | 集合元素 | $("div > span")选取div元素下名为span的子元素 |
|
$("prev + next") $(".prev").next("next") |
选取紧接在prev元素后的next元素 | 集合元素 |
$(".one + div")选取class为one的下一个div的同辈元素 $(".one").next("div") |
|
$("prev ~ siblings") $("prev").nextAll("siblings") |
选取prev元素之后的所有siblings元素 | 集合元素 |
$("#two~div")选取id为two的元素后面的所有div同辈元素 $("#two").nextAll("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"); |
#one,.one
.mini
#two,.one,title=test
.mini
t=other
.mini
t=test
.mini
.mini
.mini
.mini
.mini
.mini
.mini
.mini
t=tesst
正在执行动画的span元素.
因页面元素过多，动态元素的id冲突，请跳转至下一篇
筛选器（过滤选择器）