标签：
在学习jQuery选择器之前，先介绍一下之前学过的CSS选择器。
| 选择器 | 语法 | 描述 | 示例 |
|
标签选择器 | E { |
以文档元素为选择符 |
|
|
ID选择器 | #ID{ |
以ID为选择符 |
|
|
类选择器 | E.className{ |
以文档元素的Class为选择符 |
|
|
群组选择器 | E1,E2{ |
多个选择符应用同样的样式 |
|
|
后代选择器 | E F { |
元素E的任何后代F |
|
|
通配符选择器 | *{ |
文档的所有元素作为选择符 |
|
在网页中，每个id名称只能使用一次，class允许重复使用。基本选择器的介绍说明如下。
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取所有的<p>元素 |
| * | 匹配所有的元素 | 集合元素 | $("*")选取所有的元素 |
| selector1,selector2 | 将每一个选择器匹配到的元素合并后引一起返回 | 集合元素 | $("div,p.myclass")选取所有<div>，和用于class为myclass的<p>标签的一组元素 |
<body> <input type="button" value="选择 id 为 one 的元素" id="btn1" /> <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /> <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" /> <input type="button" value="选择 所有的元素" id="btn4" /> <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /> <br><br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <span id="span">^^span元素^^</span> </body>
jQuery代码
$(function(){
//1.选择 id 为 one 的元素
$("#btn1").click(function(){
$("#one").css({ background : "#C1FFC1"});
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function(){
$(".mini").css({background : "#C1FFC1"});
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function(){
$("div").css({background : "#C1FFC1"});
});
//4.选择 所有的元素
$("#btn4").click(function(){
$("*").css({background : "#C1FFC1"});
});
//5.选择 所有的 span 元素和id为two的元素
$("#btn5").click(function(){
$("span,#two").css({background : "#C1FFC1"});
});
});
点击按钮1
点击按钮2
点击按钮3
点击按钮4
点击按钮5
标签：
原文地址：http://www.cnblogs.com/yangang2013/p/5449687.html
