1、获取网页中所有的<h3>元素，然后设置元素的背景色。
"h3"为选择器的基本语法要求，必须放到$()中（工厂函数）
$("h3")返回的是jQuery对象
.css()是为jQuery对象设置的方法
$("h3").css("background","17c");
2、分类：
基本选择器：标签选择器，类选择器，ID选择器，并集选择器，交集选择器，全局选择器
层次选择器：后代选择器，子选择器，相邻元素选择器，同辈元素选择器
过滤选择器：基本过滤选择器，可见性过滤选择器，属性选择器，内容过滤选择器，子元素过滤选择器，表单对象属性过滤选择器
表单选择器
<!DOCTYPE html>
<html>
<head>
???<meta charset="utf-8" />
???<title>基本选择器</title>
???<link rel="stylesheet" type="text/css" href="css/style.css" />
???<!-- ??引入jQuery -->
???<script src="scripts/jquery.js" type="text/javascript"></script>
???<script src="lib/assist.js" type="text/javascript"></script>
???<script type="text/javascript">
????$(function(){
????//选择id为one的元素
????$("#btn1").click(function(){
????$("#one").css("background","#bfa");
????})
????});
????$(function(){
???????//选择 class 为 mini 的所有元素
???????$("#btn2").click(function(){
????????????$(".mini").css("background","#bfa"); ???
???????});
????});
????$(function(){
????//选择元素名为div的所有元素
????$("#btn3").click(function(){
????$("div").css("background","#bfa");
????});
????});
????$(function(){
????//选择所有的元素
????$("#btn4").click(function(){
????$("*").css("background","#bfa");
????});
????});
????$(function(){
????//所有的span元素和id为two的元素
????$("#btn5").click(function(){
????$("span,#two").css("background","#bfa");
????});
????});
????
???</script>
</head>
<body>
???<button id="reset">
???????手动重置页面元素
???</button>
???<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br />
???<br />
???<h3>
???????基本选择器.
???</h3>
???<!-- 控制按钮 -->
???<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="mover">正在执行动画的span元素.</span>
</body>
</html>
jQuery选择器
原文地址：http://www.cnblogs.com/atlj/p/8047191.html