JQuery中文使用手册（核心部分）

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 ，表示找到两个匹配对象