1.Jquery是Javascript的一个简单框架，它可以让我们写更少的代码，达到更高的效率，提供更完美的效果！
2.www.jquery.com(官网) → 下载(production版本即可。)
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
//下面一行表示：当document这个文档全部
//显示完的时候去执行这个一个函数function()
$(document).ready(function(){
alert("Hello Jquery");
});
</script>
3.常用的jquery选择器有：id选择器，class选择器，标签选择器等。jquery真的非常的强大，方便，优越。这里只是简单的介绍几个常用的例子。有空了，大家一定要多看看API。
（1.）id选择器的使用：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//表示当“clickme”这个按钮被点击时，触发的事件
$("#but").click(function(){
//1.id选择器的用法。注意text()的用法
$("#mydiv").text("ok ,come on ,baby ...");
});
});
</script>
</head>
<body>
<div id="mydiv">
<span>hello1!</span><br />
<span>hello2!</span><br />
<span>hello3!</span>
</div>
<input type="button" value="clickme" id="but"/>
</body>
</html>
（2.）层级选择器的使用：
//1.层级选择器的用法。
$("div span:first").text("change the first span");
$("div span:last").text("change the last span");
（3.）改变CSS的方法：（两种写法）
$("div span:first").text("change the first span").
css("color","red").css("font-size","25px");
//1.层级选择器的用法。注意，多个css属性时应该用下面的写法。
$("div span:last").text("change the last span").
css({"color":"red","font-size":"24px","font-weight":"bold"});
（4.）addClass()的使用,给某个标签加个class属性
//如给div加个class属性,成功后应该是：<div class="tt" id="mydiv">
$("#div").addClass("tt");
alert("ok");
（5.）表格中隔行换色：(:even匹配所有索引值为偶数的元素，从0开始计数)
$("tr:even").css("background","red");
（6.）动画效果，I like
<1>.show(),hide()方法
$(":button") → 匹配所有的按钮
:first → 匹配找到的第一个元素
eq(index) → 匹配一个给定的索引值的元素；
<a target="_blank" href="http://blog.51cto.com/attachment/201207/152226609.png"></a>
源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//1.显现,注意：$(":button:first")的用法
$(":button:first").click(function(){
$("#animat").show();
//2.隐藏,注意：$(":button:eq(1)")
$(":button:eq(1)").click(function(){
$("#animat").hide();
//3.转换，
var flag = true;
$(":button:eq(2)").click(function(){
if(flag) {
$("#animat").hide();
flag = false;
} else {
$("#animat").show();
flag = true;
}
<div id="animat" style="height:200px;width:200px;background:red"></div>
<input type="button" value="show" />
<input type="button" value="hidden" />
<input type="button" value="switch" />
<2>.toggle()方法 → 相当于“开关”的方法
//1.显示/隐藏
$("#animat").toggle("show");
//3.转换
$("#animat").toggle();//表示快速消失或显示
//，如果你想控制显示或消失的时间的快慢,下面表示5秒钟消失或显示
// $("#animat").toggle(5000);
<3>.slideUp(),slideDown(),slideToggle();
上面三个方法中可以传的参数为：fast,slow,normal,毫秒数
//1.向上滑动
//$("#animat").slideUp();
//①如果我们想滑动的快点
// $("#animat").slideUp("fast");
//②如果我们想让其滑动慢点
//$("#animat").slideUp("slow");
//③如果我们想让其正常滑动
//$("#animat").slideUp("normal");
//如果我们想让其滑动需要6秒钟
$("#animat").slideUp(6000);
//2.向下滑动
//$("#animat").slideDown();
//如果我们想让其滑下来需要6秒钟
$("#animat").slideDown(6000);
$("#animat").slideToggle();
注意事项：上面的方法还可以有“回调函数”。
格式：slideUp(speed,[callback]);
eg.
$(":button:first").click(function(){
$("#animat").slideUp(3000,function(){
alert("ok,come baby");
});
});
<4>.fadeIn(),fadeOut(),fadeTo();
//①淡入
//$("#animat").fadeIn();
//②6秒后淡入
$("#animat").fadeIn(6000);
//①淡出
//$("#animat").fadeOut();
//②6秒后淡出
$("#animat").fadeOut(6000);
$("#animat").fadeTo(3000,0.3);//0.3表示透明度为30%
注意事项：上面的函数依然可以有“回调函数”
eg.fadeTo(3000,0.3,[callback]);
（7.）appendTo(),insertBefore()，attr()方法
注意：appendTo() →插入到另一个层
insertBefore() → 插入到指定层的前面。
<a target="_blank" href="http://blog.51cto.com/attachment/201207/164143851.png"></a>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
$(":button").click(function(){
//$("<div>") → 表示创建一个层
//注意：attr()方法的使用
//appendTo()是把一个层添加到另一个层中
$("<div>").text("auto").attr("class","img").appendTo($("#ad"));
<style type="text/css">
#ad{
width:400px;
height:auto;
overflow:auto;
border:1px solid red;
padding:20px;
}
.img{
border:1px dashed #ccc;
margin-top:20px;
</style>
<input type="button" value="add" />
<div id="ad">
<div class="img">images</div>
</html>
例子2：自动添加一个层
<a target="_blank" href="http://blog.51cto.com/attachment/201207/165750681.png"></a>
源码：
var index = 0;
//$("#ad>.img")表示#ad所有的儿子辈.img元素。
//$("#ad>.img").length表示对象中元素的个数。
if($("#ad>.img").length == 0) {
$("<div>").html("auto"+index).attr("class","img").appendTo($("#ad"));
$("<div>").text("text"+index).attr("class","img").insertBefore($("#ad>.img:first"));
index++;
});
注意事项：
innerHTML html → 可以插入其他的div或html元素
innerTEXT text → 只能添加文本
(8.)表格的增加和删除→ appendTo(），live(），$(this)方法的使用
<a target="_blank" href="http://blog.51cto.com/attachment/201207/172617306.png"></a>
table{
border-collapse:collapse;
text-align:center;
$("#add").click(function(){
$("<tr><td>name"+index
+"</td><td>"+index
+"</td><td><input type='button' id='del' value='delete' /></td></tr>").
appendTo($("table"));
//删除表格
//live()方法：给所有当前以及将来会匹配的元素绑定一个事件处理函数。
//注意$(this)的使用
$("#del").live("click",function(){
$(this).parent().parent().remove();
<input type="button" value="add-line" id="add"/>
<table border="1" cellspacing="0">
<tr>
<td>name</td>
<td>age</td>
<td>
<input type="button" value="del" id="del"/>
</td>
</tr>
</table>
(9.)表格的增加和删除→clone()方法的使用
$("tr:first").clone().appendTo($("table"));
(10.)$(this).attr("rel"); → 拿到某个属性的属性值：attr();
if(confirm("您确定要删除吗？")) {
var id = $(this).attr("rel");
window.location.href = "del.jsp?id="+id;
本文转自韩立伟 51CTO博客，原文链接：http://blog.51cto.com/hanchaohan/929972，如需转载请自行联系原作者
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)