jQuery 是一款同 prototype 一樣優秀 js 開發庫類，特別是對 css 和 XPath 的支持，使我們寫 js 變得更加方便！如果你不是個 js 高手又想寫出優 秀的 js 效果， jQuery 可以幫你達到目的！
?? 下載地址： Starterkit （ http://jquery.bassistance.de/jquery-starterkit.zip ）
?????????????????????? jQuery Downloads （ http://jquery.com/src/ ）

?? 下載完成后先加載到文檔中，然后我們來看個簡單的例子！

<script language="javascript" type="text/javascript">???
???? $(document).ready( function (){
???????? $("a").click( function () {
???????? alert("Hello world!");
??? });
});
<script>

???? 上邊的效果是點擊文檔中所有 a 標簽時將彈出對話框， $("a") 是一個 jQuery 選擇器， $ 本身表示一個 jQuery 類，所有 $() 是構造一個 jQuery 對象， click() 是這個對象的方法，同理 $(document) 也是一個 jQuery 對象， ready(fn) 是 $(document) 的方法，表示當 document 全部下載完畢時執行函數。
???? 在進行下面內容之前我還要說明一點 $("p") 和 $("#p") 的區別 ,$("p") 表示取所有 p 標簽 (<p></p>) 的元素 ,$("#p") 表示取 id 為 "p"(<span id="p"></span>) 的元素 .

我將從以下幾個內容來講解 jQuery 的使用 :
1: 核心部分
2:DOM 操作
3:css 操作
4:javascript 處理
5: 動態效果
6:event 事件
7:ajax 支持
8: 插件程序

????????????????????????????????????????????? 一：核心部分
$(expr)
說明：該函數可以通過 css 選擇器， Xpath 或 html 代碼來匹配目標元素，所有的 jQuery 操作都以此為基礎
參數： expr ：字符串，一個查詢表達式或一段 html 字符串
例子：
未執行 jQuery 前：

< p > one </ p >
< div >
????? < p > two </ p >
</ div >
??? < p > three </ p >
??? < a href ="#" id ="test" onClick ="jq()" > jQuery </ a >

jQuery 代碼及功能：

function jq(){??
???? alert($("div > p").html());??
}

運行：當點擊 id 為 test 的元素時，彈出對話框文字為 two ，即 div 標簽下 p 元素的內容

function jq(){
???? $("<div><p>Hello</p></div>").appendTo("body");
}

運行：當點擊 id 為 test 的元素時，向 body 中添加 “<div><p>Hello</p></div>”

$(elem)
說明：限制 jQuery 作用于一個特定的 dom 元素，這個函數也接受 xml 文檔和 windows 對象
參數： elem ：通過 jQuery 對象壓縮的 DOM 元素
例子：
未執行 jQuery 前：

< p > one </ p >
?? < div >
????? < p > two </ p >
?? </ div >< p > three </ p >
< a href ="#" id ="test" onClick ="jq()"> jQuery </ a >

jQuery 代碼及功能：

function jq(){
???? alert($(document).find("div > p").html());
}

運行：當點擊 id 為 test 的元素時，彈出對話框文字為 two ，即 div 標簽下 p 元素的內容

function jq(){
??? $(document.body).background("black");
}

運行：當點擊 id 為 test 的元素時，背景色變成黑色

$(elems)
說明：限制 jQuery 作用于一組特定的 DOM 元素
參數： elem ：一組通過 jQuery 對象壓縮的 DOM 元素
例子：
未執行 jQuery 前： 運行：當點擊 id 為 test 的元素時，隱藏 form1 表單中的所有元素。

$(fn)
說明： $(document).ready() 的一個速記方式，當文檔全部載入時執行函數。可以有多個 $(fn) 當文檔載入時，同時執行所有函數！
參數： fn (Function): 當文檔載入時執行的函數！
例子：

< form id ="form1">
????? < input type ="text" name ="textfield">
????? < input type ="submit" name ="Submit" value =" 提交 ">
</ form >
< a href ="#" id ="test" onClick ="jq()"> jQuery </ a >

jQuery 代碼及功能：

function jq(){
??? $(form1.elements ).hide();
}

$( function (){
???? $(document.body).background("black");
})

運行：當文檔載入時背景變成黑色，相當于 onLoad 。

$(obj)
說明：復制一個 jQuery 對象，
參數： obj (jQuery): 要復制的 jQuery 對象
例子：
未執行 jQuery 前：

< p > one </ p >
< div >
??? < p > two </ p >
</ div >
< p > three </ p >
< a href ="#" id ="test" onClick ="jq()"> jQuery </ a >

jQuery 代碼及功能：

function jq(){
???? var f = $("div");
???? alert($(f).find("p").html())
}

運行：當點擊 id 為 test 的元素時，彈出對話框文字為 two ，即 div 標簽下 p 元素的內容。

each(fn)
說明：將函數作用于所有匹配的對象上
參數： fn (Function): 需要執行的函數
例子：
未執行 jQuery 前：

< img src ="1.jpg"/>
< img src ="1.jpg"/>
< a href ="#" id ="test" onClick ="jq()"> jQuery </ a >

jQuery 代碼及功能：

function jq(){
??? $("img").each( function (){
???????? this .src="2.jpg"; });
}

運行：當點擊 id 為 test 的元素時， img 標簽的 src 都變成了 2.jpg 。

eq(pos)
說明：減少匹配對象到一個單獨得 dom 元素
參數： pos (Number): 期望限制的索引，從 0 開始
例子：
未執行 jQuery 前：

< p > This is just a test. </ p >
< p > So is this </ p >
< a href ="#" id ="test" onClick ="jq()"> jQuery </ a >

jQuery 代碼及功能：

function jq(){
???? alert($("p").eq(1).html())
}

運行：當點擊 id 為 test 的元素時， alert 對話框顯示： So is this ，即第二個 <p> 標簽的內容

get() get(num)
說明：獲取匹配元素， get(num) 返回匹配元素中的某一個元素
參數： get (Number): 期望限制的索引，從 0 開始
例子：
未執行 jQuery 前：

< p > This is just a test. </ p >
< p > So is this </ p >
< a href ="#" id ="test" onClick ="jq()"> jQuery </ a >

jQuery 代碼及功能：

function jq(){
???? alert($("p").get(1).innerHTML);
}

運行：當點擊 id 為 test 的元素時， alert 對話框顯示： So is this ，即第二個 <p> 標簽的內容
注意 get 和 eq 的區別， eq 返回的是 jQuery 對象， get 返回的是所匹配的 dom 對象，所有取 $("p").eq(1) 對象的內容用 jQuery 方法 html() ，而取 $("p").get(1) 的內容用 innerHTML

index(obj)
說明：返回對象索引
參數： obj (Object): 要查找的對象
例子：
未執行 jQuery 前：

< div id ="test1"></ div >
< div id ="test2"></ div >
< a href ="#" id ="test" onClick ="jq()"> jQuery </ a >

jQuery 代碼及功能：

function jq(){
???? alert($("div").index(document.getElementById('test1')));
???? alert($("div").index(document.getElementById('test2')));
}

運行：當點擊 id 為 test 的元素時，兩次彈出 alert 對話框分別顯示 0 ， 1

size()?? Length
說明：當前匹配對象的數量，兩者等價
例子：
未執行 jQuery 前：

< img src ="test1.jpg"/>
< img src ="test2.jpg"/>
< a href ="#" id ="test" onClick ="jq()"> jQuery </ a >

jQuery 代碼及功能：

function jq(){
???? alert($("img").length);
}

運行：當點擊 id 為 test 的元素時，彈出 alert 對話框顯示 2 ，表示找到兩個匹配對象


附件下載:
http://m.tkk7.com/Files/vip/jquery使用手冊.rar