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=)