简介：jQuery的选择器、相比Dom模型书写简洁、效率高。
1.以一个例子进行说明
<!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");
});
//选择class为mini的所有元素
$("#btn2").click(function(){
$(".mini").css("background","#bfa");
});
//选择 元素名是 div 的所有元素
$("#btn3").click(function(){
$("div").css("background","#bfa");
});
//选择 所有的元素
$("#btn4").click(function(){
$("*").css("background","#bfa");
});
//选择 所有的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>
2.程序说明
1.页面中有五个按钮分别为
- 选择 id为 one 的元素
- 选择 class 为 mini 的所有元素
- 选择 元素名是 div 的所有元素
- 选择 所有的元素
- 选择 所有的span元素和id为two的元素
2.通过jQuery的$(function(){})进行按钮事件注册、主要通过css设置样式（背景颜色）来体现jQuery的选择器效果
$(function(){
//选择id为one的元素
$("#btn1").click(function(){
$("#one").css("background","#bfa");
});
//选择class为mini的所有元素
$("#btn2").click(function(){
$(".mini").css("background","#bfa");
});
//选择 元素名是 div 的所有元素
$("#btn3").click(function(){
$("div").css("background","#bfa");
});
//选择 所有的元素
$("#btn4").click(function(){
$("*").css("background","#bfa");
});
//选择 所有的span元素和id为two的元素
$("#btn5").click(function(){
$("span,#two").css("background","#bfa");
});
});3.页面中的body部分主要是一些DIV叠加构成的还有span元素标签、标签中主要设置的是div的class特性和id特性
4.span会有动画效果是因为在$(function(){})中添加了如下代码、以及选择器重置的效果是通过如下的html代码进行
实现的。
$(document).ready(function(){
$("#reset").click(function(){
$("*").removeAttr("style");
$("div[class=none]").css({"display":"none"});
});
$("input[type=button]").click(function(){
if($("#isreset").is(":checked")){
$("#reset").click();
}
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
})至于动画在后面的文章会详细进行介绍本章节主要介绍基本选择器