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 ，表示找到两个匹配对象
页:
[1]