一、有关jQuery的简单介绍
1、jQuery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
2、Jquery它是一个库(框架)，要想使用它，必须先引入！
jquery-1.8.3.js：一般用于学习阶段。
jquery-1.8.3.min.js：用于项目使用阶段
3、所有的jquery代码写在页面加载函数
$(function(){
Jquery代码
});
二、jquery各种选择器的使用
1、基本选择器
id选择器：$(“#id名称”);
元素选择器：$(“元素名称”);
类选择器：$(“.类名”);
通配符：*
多个选择器共用(并集)
下面使用代码进行演示：
(1)首先要先引入jQuery的库
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>这里使用的是jquery1.8.3的库。
（2）然后为了方便演示，我先简单设计了一些页面代码如下：
html部分：
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>css样式代码：
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
.onSuccess{
background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.high{
color:red;
}
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}这样设计出来的效果如下图所示：
下面开始为其各个功能设计jquery代码：
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","pink");
});
$("#btn2").click(function(){
$(".mini").css("background-color","green");
});
$("#btn3").click(function(){
$("div").css("background-color","red");
});
$("#btn4").click(function(){
$("*").css("background-color","yellow");
});
$("#btn5").click(function(){
$("#two,.mini").css("background-color","yellow");
});
});
</script>上面的代码部分涉及了id选择器、元素选择器、类选择器、通配符和多个选择器的并用！
2、层级选择器
下面利用一些血缘关系来介绍一下jquery中层级选择器的使用：
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
下面用实际代码进行介绍：
html部分：
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>css部分和上一个基本选择器中设计的一样，这里不再赘述。
然后html+css搭出的界面如下：
下面设计jquery代码来实现各个功能：
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","gold");
});
$("#btn2").click(function(){
$("body>div").css("background-color","gold");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","pink");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","pink");
});
});
</script>3、基本过滤选择器
主要包括：first（）、last（）、even（）、odd（）等方法
下面通过实际代码进行展示：
html部分：
<body>
<input type="button" id="btn1" value="body中的第一个div元素"/>
<input type="button" id="btn2" value="body中的最后一个div元素"/>
<input type="button" id="btn3" value="选择body中的奇数的div"/>
<input type="button" id="btn4" value="选择body中的偶数的div"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>css样式和之前的一样，得到的动态网页效果图如下：
jquery代码如下：
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","gold");
});
$("#btn2").click(function(){
$("body div:last").css("background-color","gold");
});
$("#btn3").click(function(){
$("body div:odd").css("background-color","gold");
});
$("#btn4").click(function(){
$("body div:even").css("background-color","gold");
});
});
</script>