本文介绍jQuery的基本用法，包括核心函数、DOM操作等。通过实例演示如何利用jQuery简化JavaScript编程，如选择元素、添加内容和处理事件。
原文地址：
http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html
翻译整理：Young.J
官方网站：http://jquery.com
jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！
下载地址：Starterkit （http://jquery.bassistance.de/jquery-starterkit.zip）
jQuery Downloads （http://jquery.com/src/）
下载完成后先加载到文档中，然后我们来看个简单的例子！
$(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代码及功能：
alert($( " div > p " ).html());
}
运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
$( " <div><p>Hello</p></div> " ).appendTo( " body " );
}
运行：当点击id为test的元素时，向body中添加“<div><p>Hello</p></div>”
$(elem)
说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象
参数： elem：通过jQuery对象压缩的DOM元素
例子：
未执行jQuery前：
< div >
< p > two </ p >
</ div >< p > three </ p >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能：
alert($(document).find( " div > p " ).html());
}
运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
$(document.body).background( " black " );
}
运行：当点击id为test的元素时，背景色变成黑色
$(elems)
说明：限制jQuery作用于一组特定的DOM元素
参数： elem：一组通过jQuery对象压缩的DOM元素
例子：
未执行jQuery前：
<
form
id
="form1"
>
<
input
type
="text"
name
="textfield"
>
<
input
type
="submit"
name
="Submit"
value
="提交"
>
</
form
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能：
$(form1.elements ).hide();
}
运行：当点击id为test的元素时，隐藏form1表单中的所有元素。
$(fn)
说明：$(document).ready()的一个速记方式，当文档全部载入时执行函数。可以有多个$(fn)当文档载入时，同时执行所有函数！
参数：fn (Function):当文档载入时执行的函数！
例子：
$(document.body).background( " black " );
})
运行：当文档载入时背景变成黑色，相当于onLoad。
$(obj)
说明：复制一个jQuery对象，
参数：obj (jQuery): 要复制的jQuery对象
例子：
未执行jQuery前：
< div >
< p > two </ p >
</ div >
< p > three </ p >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能：
var f = $( " div " );
alert($(f).find( " p " ).html())
}
运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容。
each(fn)
说明：将函数作用于所有匹配的对象上
参数：fn (Function): 需要执行的函数
例子：
未执行jQuery前：
< img src ="1.jpg" />
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能：
$( " 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代码及功能：
alert($( " p " ).eq( 1 ).html())
}
运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容
get() get(num)
说明：获取匹配元素，get(num)返回匹配元素中的某一个元素
参数：get (Number): 期望限制的索引，从0 开始
例子：
未执行jQuery前：
< p > So is this </ p >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能：
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 ="test2" ></ div >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能：
alert($( " div " ).index(document.getElementById('test1')));
alert($( " div " ).index(document.getElementById('test2')));
}
运行：当点击id为test的元素时，两次弹出alert对话框分别显示0，1
size() Length
说明：当前匹配对象的数量，两者等价
例子：
未执行jQuery前：
< img src ="test2.jpg" />
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能：
alert($( " img " ).length);
}
运行：当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象
二：DOM操作
属性
我们以<img id="a" scr="5.jpg"/>为例，在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象，在用o.src来取得或修改该节点的scr属性，在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ]，然后可以用jQuery提供的很多方法来进行操作，如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法，方便大家快速对DOM对象进行操作
herf() herf(val)
说明：对jQuery对象属性herf的操作。
例子：
未执行jQuery前
jQuery代码及功能：
alert($( " #test " ).href());
$( " #test " ).href( " 2.html " );
}
运行：先弹出对话框显示id为test的连接url，在将其url改为2.html，当弹出对话框后会看到转向到2.html
同理，jQuery还提供类似的其他方法，大家可以分别试验一下：
herf() herf(val) html() html(val) id() id (val) name() name (val) rel() rel (val)
src() src (val) title() title (val) val() val(val)
操作
after(html) 在匹配元素后插入一段html
append(html)在匹配元素内部，且末尾插入指定html
同理还有append(elem) append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解！
appendTo(expr) 与append(elem)相反
<
p
id
="test"
>
after
</
p
><
a
href
="#"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能
$( " a " ). appendTo ($( " #test " ));
}
执行后相当于
clone() 复制一个jQuery对象
jQuery代码及功能：
$( " #test " ).clone().appendTo($( " a " ));
}
复制$("#test")然后插入到<a>后,执行后相当于
wrap(elem) 将匹配对象包含在给出的对象内
< a href ="#" onClick ="jq()" > jQuery </ a >
$("p" ).wrap( document.getElementById('content') );
}
执行后相当于
遍历、组合
add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象
<a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能：
var f = $( " p " ).add( " span " );
for ( var i = 0 ;i < $(f).size();i ++ ){
alert($(f).eq(i).html());}
}
执行$("p")得到匹配<p>的对象，有两个，add("span")是在("p")的基础上加上匹配<span >的对象，所有一共有3个，从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合，分别是[<p>Hello</p>]，[<p><span>Hello Again</span></p>]，[<span>Hello Again</span>]。
add(el) 在匹配对象的基础上在附加指定的dom元素。
$("p").add(document.getElementById("a"));
add(els) 在匹配对象的基础上在附加指定的一组对象，els是一个数组。
<
p
>
Hello
</
p
><
p
><
span
>
Hello Again
</
span
></
p
>
jQuery代码及功能：
var f = $( " p " ).add([document.getElementById( " a " ), document.getElementById( " b " )])
for ( var i = 0 ;i < $(f).size();i ++ ){
alert($(f).eq(i).html());}
}
注意els是一个数组，这里的[ ]不能漏掉。
ancestors () 一依次以匹配结点的父节点的内容为对象,根节点除外（有点不好理解，看看下面例子就明白了）
< p > one </ p >
< span >
< u > two </ u >
</ span >
</ div >
jQuery代码及功能：
var f = $( " u " ).ancestors();
for ( var i = 0 ;i < $(f).size();i ++ ){
alert($(f).eq(i).html());}
}
第一个对象是以<u>的父节点的内容为对象，[ <u>two</u> ]
第一个对象是以<u>的父节点的父节点（div）的内容为对象，[<p>one</p><span><u>two</u></span> ]
一般一个文档还有<body>和<html>，依次类推下去。
ancestors (expr) 在ancestors（）的基础上之取符合表达式的对象
如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象：
[ <p>one</p><span><u>two</u></span> ]
children() 返回匹配对象的子介点
< div id ="ch" >
< span > two </ span >
</ div >
jQuery代码及功能：
alert($( " #ch " ).children().html());
}
$("#ch").children()得到对象[ <span>two</span> ].所以.html()的结果是”two”
children(expr) 返回匹配对象的子介点中符合表达式的节点
< span > two </ span >
< span id ="sp"
扫一扫
3327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
