jQuery选择器
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>
