«
jQuery使用手册

时间：2008-5-31    作者：Deri    分类： 分享 

   <p>　　jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！</p><p>　　下载地址：Starterkit （<a href="http://jquery.bassistance.de/jquery-starterkit.zip">http://jquery.bassistance.de/jquery-starterkit.zip</a>）</p><p>　　jQuery Downloads （<a href="http://jquery.com/src/">http://jquery.com/src/</a>） <p>　　下载完成后先加载到文档中，然后我们来看个简单的例子！</p><p><code><script language="javascript" type="text/javascript">　<br />　　$(document).ready(function(){<br />　　　　$("a").click(function() {<br />　　　　alert("Hello world!");<br />　 });<br />});<br /><script></code></p><p>　　上边的效果是点击文档中所有a标签时将弹出对话框，$("a") 是一个jQuery选择器，$本身表示一个jQuery类，所有$()是构造一个jQuery对象，click()是这个对象的方法，同理$(document)也是一个jQuery对象，ready(fn)是$(document)的方法，表示当document全部下载完毕时执行函数。</p><p>　　在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span　id="p"></span>)的元素.</p><p>　　我将从以下几个内容来讲解jQuery的使用:</p><p>　　1:核心部分</p><p>　　2:DOM操作</p><p>　　3:css操作</p><p>　　4:javascript处理</p><p>　　5:动态效果</p><p>　　6:event事件</p><p>　　7:ajax支持</p>
<p> </p>

   <p>　　8:插件程序</p><p>　　<strong>一：核心部分</strong></p><p>　　<strong>$(expr)</p><p>　　</strong>说明：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础</p><p>　　参数：expr：字符串，一个查询表达式或一段html字符串</p><p>　　<strong>例子：</strong></p><p>　　未执行jQuery前：</p><p><code><p>one</p><br /><div><br />　　　<p>two</p><br /></div><br />　　<p>three</p><br />　　<a href="#" id="test" onClick="jq()" >jQuery</a></code></p><p>　　jQuery代码及功能： <p><code>function jq(){　<br />　　alert($("div > p").html());　<br />}</code></p><p>　　运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容 <p><code>function jq(){<br />　　$("<div><p>Hello</p></div>").appendTo("body");<br />}</code></p><p>　　运行：当点击id为test的元素时，向body中添加“<div><p>Hello</p></div>”</p><p>　　<strong>$(elem)</strong></p><p>　　说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象</p><p>　　参数： elem：通过jQuery对象压缩的DOM元素</p><p>　　例子：</p><p>　　未执行jQuery前： <p><code><p>one</p><br />　<div><br />　　 <p>two</p><br />　</div><p>three</p><br /><a href="#" id="test" onClick="jq()">jQuery</a></code></p>
 <p> </p>

   <p>　　jQuery代码及功能： <p><code>function jq(){<br />　　alert($(document).find("div > p").html());<br />}</code></p><p>　　运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容</p><p><code>functionjq(){<br />　$(document.body).background("black");<br />}</code></p><p>　　运行：当点击id为test的元素时，背景色变成黑色</p><p>　　$(elems)</p><p>　　说明：限制jQuery作用于一组特定的DOM元素</p><p>　　参数： elem：一组通过jQuery对象压缩的DOM元素</p><p>　　例子：</p><p>　　未执行jQuery前：</p><p><code><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><formid="form1"><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" />　　　<inputtype="text"name="textfield"><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" />　　　<inputtype="submit"name="Submit"value="提交"><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /></form><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><ahref="#"id="test"onClick="jq()">jQuery</a></code></p><p>　　jQuery代码及功能：</p><p><code>functionjq(){<br />　$(form1.elements).hide();<br />}</code></p><p>　　运行：当点击id为test的元素时，隐藏form1表单中的所有元素。</p><p>　　$(fn)</p><p>　　说明：$(document).ready()的一个速记方式，当文档全部载入时执行函数。可以有多个$(fn)当文档载入时，同时执行所有函数！</p>
 <p> </p>

   <p>　　参数：fn (Function):当文档载入时执行的函数！</p><p>　　例子：</p><p><code>$(function(){<br />　　$(document.body).background("black");<br />})</code></p><p>　　运行：当文档载入时背景变成黑色，相当于onLoad。</p><p>　　$(obj)</p><p>　　说明：复制一个jQuery对象，</p><p>　　参数：obj (jQuery): 要复制的jQuery对象</p><p>　　例子：</p><p>　　未执行jQuery前：</p><p><code><p>one</p><br /><div><br />　<p>two</p><br /></div><br /><p>three</p><br /><ahref="#"id="test"onClick="jq()">jQuery</a></code></p><p>　　jQuery代码及功能：</p><p><code>functionjq(){<br />　　varf=$("div");<br />　　alert($(f).find("p").html())<br />}</code></p><p>　　运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容。</p><p>　　each(fn)</p><p>　　说明：将函数作用于所有匹配的对象上</p><p>　　参数：fn (Function): 需要执行的函数</p><p>　　例子：</p><p>　　未执行jQuery前：</p><p><code><imgsrc="1.jpg"/><br /><imgsrc="1.jpg"/><br /><ahref="#"id="test"onClick="jq()">jQuery</a></code></p><p>　　jQuery代码及功能：</p><p><code>functionjq(){<br />　$("img").each(function(){<br />　　　　this.src="2.jpg";});<br />}</code></p><p>　　运行：当点击id为test的元素时，img标签的src都变成了2.jpg。</p><p>　　eq(pos)</p><p>　　说明：减少匹配对象到一个单独得dom元素</p><p>　　参数：pos (Number): 期望限制的索引，从0 开始</p>
 <p> </p>

   <p>　　例子：</p><p>　　未执行jQuery前：</p><p><code><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><p>Thisisjustatest.</p><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><p>Soisthis</p><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><ahref="#"id="test"onClick="jq()">jQuery</a></code></p><p>　　jQuery代码及功能：</p><p><code>functionjq(){<br />　　alert($("p").eq(1).html())<br />}</code></p><p>　　运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容</p><p>　　get() get(num)</p><p>　　说明：获取匹配元素，get(num)返回匹配元素中的某一个元素</p><p>　　参数：get (Number): 期望限制的索引，从0 开始</p><p>　　例子：</p><p>　　未执行jQuery前：</p><p><code><p>Thisisjustatest.</p><br /><p>Soisthis</p><br /><ahref="#"id="test"onClick="jq()">jQuery</a></code></p><p>　　jQuery代码及功能：</p><p><code>functionjq(){<br />　　alert($("p").get(1).innerHTML);<br />}</code></p><p>　　运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容</p><p>　　注意get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML</p><p>　　index(obj)</p><p>　　说明：返回对象索引</p>
 <p> </p>

   <p>　　参数：obj (Object): 要查找的对象</p><p>　　例子：</p><p>　　未执行jQuery前：</p><p><code><divid="test1"></div><br /><divid="test2"></div><br /><ahref="#"id="test"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){<br />　　alert($("div").index(document.getElementById('test1')));<br />　　alert($("div").index(document.getElementById('test2')));<br />}<br />　　<br />运行：当点击id为test的元素时，两次弹出alert对话框分别显示0，1<br />size()　 Length<br />说明：当前匹配对象的数量，两者等价<br />例子：<br />未执行jQuery前：<br />　　<br /><imgsrc="test1.jpg"/><br /><imgsrc="test2.jpg"/><br /><ahref="#"id="test"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){<br />　　alert($("img").length);<br />}<br />　　<br />运行：当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象<br />　　　　　　　　　　　　　　　　　　　　　　　　　二：DOM操作<br />属性<br />我们以<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对象进行操作<br />herf()　 herf(val)<br />说明：对jQuery对象属性herf的操作。<br />例子：<br />未执行jQuery前<br />　　<br /><ahref="1.htm"id="test"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){<br />　alert($("#test").href());<br />　$("#test").href("2.html");<br />}<br />　　<br />运行：先弹出对话框显示id为test的连接url，在将其url改为2.html，当弹出对话框后会看到转向到2.html<br />同理，jQuery还提供类似的其他方法，大家可以分别试验一下：<br />herf()　herf(val)　 html()　html(val)　 id()　id (val)　name()　name (val)　 rel()　rel (val)<br />src()　　src (val)　 title()　title (val)　 val()　val(val)<br />操作<br />after(html)　在匹配元素后插入一段html<br />　　<br /><ahref="#"id="test"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){　<br />　　　 $("#test").after("<b>Hello</b>");　<br />}<br />　　<br />执行后相当于：<br />　　<br /><ahref="#"id="test"onClick="jq()">jQuery</a><b>Hello</b><br />　　<br />after(elem)　after(elems)　将指定对象elem或对象组elems插入到在匹配元素后<br />　　<br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><pid="test">after</p><ahref="#"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能<br />　　<br />functionjq(){　<br />　　$("a").after($("#test"));　<br />}<br />　　<br />执行后相当于<br />　　<br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><ahref="#"onClick="jq()">jQuery</a><pid="test">after</p><br />　　<br />append(html)在匹配元素内部，且末尾插入指定html<br />　　<br /><ahref="#"id="test"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){<br />　　$("#test").append("<b>Hello</b>");　<br />}<br />　　<br />执行后相当于<br />　　<br /><ahref="#"onClick="jq()">jQuery<b>Hello</b></a><br />　　<br />同理还有append(elem)　append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解！<br />appendTo(expr)　与append(elem)相反<br />　　<br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><pid="test">after</p><ahref="#"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能<br />　　<br />functionjq(){　<br />　　　$("a").appendTo($("#test"));　<br />}<br />　　<br />执行后相当于<br />　　<br /><pid="test">after<ahref="#"onClick="jq()">jQuery</a></p><br />　　<br />clone() 复制一个jQuery对象<br />　　<br /><pid="test">after</p><ahref="#"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){　<br />　　$("#test").clone().appendTo($("a"));　<br />}<br />　　<br />复制$("#test")然后插入到<a>后,执行后相当于<br />　　<br /><pid="test">after</p><ahref="#"onClick="jq()">jQuery</a><pid="test">after</p><br />　　<br />empty() 删除匹配对象的所有子节点<br />　　<br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><divid="test"><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" />　<span>span</span><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" />　<p>after</p><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /></div><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><ahref="#"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){　<br />　　$("#test").empty();　<br />}<br />　　<br />执行后相当于<br />　　<br /><divid="test"></div><ahref="#"onClick="jq()">jQuery</a><br />　　<br />insertAfter(expr)　 insertBefore(expr)<br />　　 按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem),insertBefore(expr)相当于after (elem)<br />prepend (html)　prepend (elem)　prepend (elems)　 在匹配元素的内部且开始出插入<br />通过下面例子区分append(elem)　appendTo(expr)　prepend (elem)<br />　　<br /><pid="a">p</p><br /><div>div</div><br />　　<br />执行$("#a").append($("div")) 后相当于<br />　　<br /><pid="a"><br />　P<br />　<div>div</div><br /></p><br />　　<br />执行$("#a").appendTo($("div"))后 相当于<br />　　<br /><div><br />　div<br />　<pid="a">p</p><br /></div><br />　　<br />执行$("#a").prepend ($("div"))后 相当于<br />　　<br /><pid="a"><br />　<div>div</div><br />　P<br /></p><br />　　<br />remove()　删除匹配对象<br />注意区分empty()，empty()移出匹配对象的子节点，remove()，移出匹配对象<br />wrap(htm) 将匹配对象包含在给出的html代码内<br />　　<br /><p>TestParagraph.</p><ahref="#"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){　<br />　　　$("p").wrap("<divclass='wrap'></div>");<br />}<br />　　<br />执行后相当于<br />　　<br /><divclass='wrap'><p>TestParagraph.</p></div><br />　　<br />wrap(elem) 将匹配对象包含在给出的对象内<br />　　<br /><p>TestParagraph.</p><divid="content"></div><br /><ahref="#"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){　<br />　　　$("p").wrap(document.getElementById('content'));<br />}<br />　　<br />执行后相当于<br />　　<br /><divid="content"><p>TestParagraph.</p></div><br />　　<br />遍历、组合<br />add(expr)　在原对象的基础上在附加符合指定表达式的jquery对象<br />　　<br /><p>Hello</p><p><span>HelloAgain</span></p><br /><ahref="#"onClick="jq()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){<br />　　varf=$("p").add("span");　　<br />　　for(vari=0;i<$(f).size();i++){<br />　　alert($(f).eq(i).html());}<br />}<br />　　<br />执行$("p")得到匹配<p>的对象，有两个，add("span")是在("p")的基础上加上匹配<span >的对象，所有一共有3个，从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合，分别是[<p>Hello</p>]，[<p><span>Hello Again</span></p>]，[<span>Hello Again</span>]。<br />add(el)　在匹配对象的基础上在附加指定的dom元素。<br />　　　　$("p").add(document.getElementById("a"));<br />add(els)　在匹配对象的基础上在附加指定的一组对象，els是一个数组。<br />　　<br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><p>Hello</p><p><span>HelloAgain</span></p><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){<br />　　varf=$("p").add([document.getElementById("a"),document.getElementById("b")])<br />　　for(vari=0;i<$(f).size();i++){<br />　　　　　　alert($(f).eq(i).html());}<br />}<br />　　<br />注意els是一个数组，这里的[ ]不能漏掉。<br />ancestors ()　一依次以匹配结点的父节点的内容为对象,根节点除外（有点不好理解，看看下面例子就明白了）<br />　　<br /><div><br />　　<p>one</p><br />　　<span><br />　　<u>two</u><br />　　</span><br /></div><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){<br />　　varf=$("u").ancestors();<br />　　for(vari=0;i<$(f).size();i++){<br />　　　alert($(f).eq(i).html());}<br />}<br />　　<br />第一个对象是以<u>的父节点的内容为对象，[ <u>two</u> ]<br />第一个对象是以<u>的父节点的父节点（div）的内容为对象，[<p>one</p><span><u>two</u></span> ]<br />一般一个文档还有<body>和<html>，依次类推下去。<br />ancestors (expr)　在ancestors（）的基础上之取符合表达式的对象<br />如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象：<br />[ <p>one</p><span><u>two</u></span>　]<br />children()　返回匹配对象的子介点<br />　　<br /><p>one</p><br /><divid="ch">　<br />　　<span>two</span><br /></div><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){<br />　　alert($("#ch").children().html());<br />}<br />　　<br />$("#ch").children()得到对象[ <span>two</span> ].所以.html()的结果是”two”<br />children(expr)　返回匹配对象的子介点中符合表达式的节点<br />　　<br /><divid="ch">　<br />　　　<span>two</span><br />　　　<spanid="sp">three</span><br /></div><br />　　<br />jQuery代码及功能<br />　　<br />functionjq(){<br />　　alert($("#ch").children(“#sp”).html());<br />}<br />　　<br />$("#ch").children()得到对象[<span>two</span><span id="sp">three</span> ].<br />$("#ch").children(“#sp”)过滤得到[<span id="sp">three</span> ]<br />parent ()　parent (expr)取匹配对象父节点的。参照children帮助理解<br />contains(str)　返回匹配对象中包含字符串str的对象<br />　　<br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><p>Thisisjustatest.</p><p>Soisthis</p><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){<br />　　alert($("p").contains("test").html());<br />}<br />　　<br />$("p")得到两个对象，而包含字符串”test”只有一个。所有$("p").contains("test")返回 [ <p>This is just a test.</p> ]<br />end() 结束操作,返回到匹配元素清单上操作前的状态.<br />filter(expr)　 filter(exprs)　 过滤现实匹配符合表达式的对象 exprs为数组，注意添加“[ ]”<br />　　<br /><p>Hello</p><p>HelloAgain</p><pclass="selected">AndAgain</p><br />　　<br />jQuery代码及功能：<br />　　<br />functionjq(){<br />　　alert($("p").filter(".selected").html())<br />}<br />　　<br />$("p")得到三个对象，$("p").contains("test")只返回class为selected的对象。<br />find(expr)　在匹配的对象中继续查找符合表达式的对象<br />　　<br /><p>Hello</p><pid="a">HelloAgain</p><pclass="selected">AndAgain</p><br />　　<br />Query代码及功能：<br />　　<br />functionjq(){<br />　　alert($("p").find("#a").html())<br />}<br />　　<br />在$("p")对象中查找id为a的对象。<br />is(expr)　判断对象是否符合表达式,返回boolen值<br />　　<br /><p>Hello</p><pid="a">HelloAgain</p><pclass="selected">AndAgain</p><br />　　<br />Query代码及功能：<br />　　<br />functionjq(){<br />　　alert($("#a").is("p"));<br />}<br />　　<br />在$("#a ")是否符合jquery表达式。<br />大家可以用$("#a").is("div");　("#a").is("#a")多来测试一下<br />next()　next(expr)　返回匹配对象剩余的兄弟节点<br />　　<br /><p>Hello</p><pid="a">HelloAgain</p><pclass="selected">AndAgain</p><br />　　<br />jQuery代码及功能<br />　　<br />functionjq(){<br />　　　　alert($("p").next().html());<br />　　　　alert($("p").next(".selected").html());<br />}<br />　　<br />$("p").next()返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]两个对象<br />$("p").next(".selected)只返回 [<p class="selected">And Again</p> ]一个对象<br />prev ()　prev (expr)　参照next理解<br />not(el)　not(expr)　从jQuery对象中移出匹配的对象，el为dom元素，expr为jQuery表达式。<br />　　<br /><p>one</p><pid="a">two</p><br /><ahref="#"onclick="js()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjs(){<br />　　alert($("p").not(document.getElementById("a")).html());<br />　　alert($("p").not(“#a”).html());<br />}<br />　　<br />$("p")由两个对象，排除后的对象为[<p>one</p> ]<br />siblings ()　siblings (expr)　jquery匹配对象中其它兄弟级别的对象<br />　　<br /><p>one</p><br /><div><br />　<pid="a">two</p><br /></div><br /><ahref="#"onclick="js()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjs(){<br />　　　alert($("div").siblings().eq(1).html());<br />}<br />　　<br />$("div").siblings()的结果实返回两个对象[<p>one</p>，<a href="#" onclick="js()">jQuery</a> ]<br />alert($("div").siblings(“a”)返回一个对象[<a href="#" onclick="js()">jQuery</a> ]<br />其他<br />addClass(class)　 为匹配对象添加一个class样式<br />removeClass (class)　 将第一个匹配对象的某个class样式移出<br />attr (name)　 获取第一个匹配对象的属性<br />　　<br /><imgsrc="test.jpg"/><ahref="#"onclick="js()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjs(){<br />　　alert($("img").attr("src"));<br />}<br />　　<br />返回test.jpg<br />attr (prop)　 为第一个匹配对象的设置属性，prop为hash对象，用于为某对象批量添加众多属性<br />　　<br /><img/><ahref="#"onclick="js()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjs(){<br />　　$("img").attr({src:"test.jpg",alt:"TestImage"});<br />}<br />　　<br />运行结果相当于<img src="test.jpg" alt="Test Image"/><br />attr (key,value)　 为第一个匹配对象的设置属性，key为属性名，value为属性值<br />　　<br /><img/><ahref="#"onclick="js()">jQuery</a><br />　　<br />jQuery代码及功能<br />　　<br />functionjs(){<br />　　$("img").attr(“src”,”test.jpg”);<br />}<br />　　<br />运行结果相当于<img src="test.jpg"/><br />removeAttr (name)　 将第一个匹配对象的某个属性移出<br />　　<br /><imgalt="test"/><ahref="#"onclick="js()">jQuery</a><br />　　<br />jQuery代码及功能：<br />　　<br />functionjs(){<br />　　$("img").removeAttr("alt");<br />}<br />　　<br />运行结果相当于<img /><br />toggleClass (class)　 将当前对象添加一个样式，不是当前对象则移出此样式，返回的是处理后的对象<br />　　<br /><p>Hello</p><pclass="selected">HelloAgain</p><ahref="#"onclick="js()">jQuery</a><br />　　<br />$("p")的结果是返回对象 [<p>Hello</p>,<p class="selected">Hello Again</p> ]<br />$("p").toggleClass("selected")的结果是实返回对象 [ <p class="selected">Hello</p>, <p>Hello Again</p> ]<br />　　　　三：CSS操作<br />　　　传统javascript对css的操作相当繁琐，比如<div id="a" style="background:blue">css</div>取它的background语法是 document.getElementById("a").style.background，而jQuery对css更方便的操作，$("#a").background()，$("#a").background(“red”)<br />$("#a")得到jQuery对象[ <div id="a" … /div> ]<br />$("#a").background()将取出该对象的background样式。<br />$("#a").background(“red”)将该对象的background样式设为redjQuery提供了以下方法，来操作css<br />background ()　 background (val)　　 color()　　color(val)　　 css(name)　　css(prop)　　<br />css(key, value)　　　float()　 float(val)　 height()　 height(val)　width()　width(val)　<br />left()　 left(val)　　　 overflow()　 overflow(val)　 position()　 position(val)　top()　 top(val)<br />这里需要讲解一下css(name)　css(prop)　css(key, value)，其他的看名字都知道什么作用了！<br />　　<br /><divid="a"style="background:blue;color:red">css</div><Pid="b">test</P><br />　　<br />css(name)　获取样式名为name的样式<br />$("#a").css("color") 将得到样式中color值red，("#a").css("background ")将得到blue<br />css(prop)　prop是一个hash对象，用于设置大量的css样式<br />$("#b").css({ color: "red", background: "blue" });<br />最终效果是<p id="b" style="background:blue; color:red">test</p>,{ color: "red", background: "blue" }，hash对象，color为key，"red"为value，<br />css(key, value)　用于设置一个单独得css样式<br />$("#b").css("color","red");最终效果是<p id="b" style="color:red">test</p><br />　　　　　　　　　　　　　　　　　　　　　　　四：JavaScript处理<br />$.browser()　判断浏览器类型，返回boolen值<br />　　<br />$(function(){<br />　　if($.browser.msie){<br />　　　　alert("这是一个IE浏览器");}<br />　　elseif($.browser.opera){<br />　　　　alert("这是一个opera浏览器");}<br />})<br />　　<br />当页面载入式判断浏览器类型，可判断的类型有msie、mozilla、opera、safari<br />$.each(obj, fn)　obj为对象或数组，fn为在obj上依次执行的函数，注意区分$().each()<br />　　<br />$.each([0,1,2],function(i){alert("Item#"+i+":"+this);});<br />　　<br />　　分别将0，1，2为参数，传入到function(i)中<br />　　<br />$.each({name:"John",lang:"JS"},　function(i){alert("Name:"+i+",Value:"+this);<br />　　<br />　　{ name: "John", lang: "JS" }为一个hash对象，依次将hash中每组对象传入到函数中<br />$.extend(obj, prop)　用第二个对象扩展第一个对象<br />　　<br />varsettings={validate:false,limit:5,name:"foo"};<br />varoptions={validate:true,name:"bar"};<br />$.extend(settings,options);<br />　　<br />执行后settings对象为{ validate: true, limit: 5, name: "bar" }<br />可以用下面函数来测试<br />　　<br />$(function(){<br />　　　varsettings={validate:false,limit:5,name:"foo"};<br />　　　　varoptions={validate:true,name:"bar"};<br />　　　　$.extend(settings,options);<br />　　　　$.each(settings,　function(i){alert(i+"="+this);});<br />})<br />　　<br />$.grep(array,fn)　通过函数fn来过滤array，将array中的元素依次传给fn，fn必须返回一个boolen，如fn返回true，将被过滤<br />　　<br />$(function(){<br />　　　　vararr=$.grep([0,1,2,3,4],function(i){returni>2;});<br />　　　　$.each(arr,function(i){alert(i);});<br />})<br />　　<br />我们可以看待执行$.grep后数组[0,1,2,3,4]变成[0，1]<br />$.merge(first, second)　两个参数都是数组，排出第二个数组中与第一个相同的，再将两个数组合并<br />　　<br />$(function(){<br />　　　　vararr=$.merge([0,1,2],[2,3,4])<br />　　　　$.each(arr,　function(i){alert(i);});<br />})<br />　　<br />可以看出arr的结果为[0,1,2,3,4]<br />$.trim(str)　移出字符串两端的空格<br />　　$.trim("　 hello, how are you?　 ")的结果是"hello, how are you?"<br />　　<br />　　　　　　　　　　　　　　　　　 五：动态效果<br />　　　 在将这部分之前我们先看个例子，相信做网页的朋友都遇到n级菜单的情景，但点击某菜单按钮时，如果它的子菜单是显示的，则隐藏子菜单，如果子菜单隐藏，则显示出来，传统的javascript做法是先用getElementById取出子菜单所在容器的id，在判断该容器的style.display是否等于none，如果等于则设为block,如果不等于这设为none，如果在将效果设置复杂一点，当点击按钮时，不是忽然隐藏和显示子菜单，而是高度平滑的转变，这时就要通过setTimeout来设置子菜单的height了，再复杂一点透明度也平滑的消失和显现，这时显现下来需要编写很多代码，如果js基础不好的朋友可能只能从别人写好的代码拿过来修改了！jQuery实现上面效果只需要1句话就行，$("#a").toggle("slow"),<img src=\"http://www.cnblogs.com/Emoticons/QQ/23.gif\" />,学完jQuery后还需要抄袭修改别人的代码吗？下面我们逐个介绍jQuery用于效果处理的方法。<br />hide()　隐藏匹配对象<br />　　<br /><pid="a">HelloAgain</p><ahref="#"onClick=’("#a").hide()’>jQuery</a><br />　　<br />当点击连接时,id为a的对象的display变为none。<br />show() 显示匹配对象<br />hide(speed)　以一定的速度隐藏匹配对象，其大小（长宽）和透明度都逐渐变化到0，speed有3级("slow", "normal",　"fast")，也可以是自定义的速度。<br />show(speed)　以一定的速度显示匹配对象，其大小（长宽）和透明度都由0逐渐变化到正常<br />hide(speed, callback)　show(speed, callback) 当显示和隐藏变化结束后执行函数callback<br />toggle()　　toggle(speed)如果当前匹配对象隐藏，则显示他们，如果当前是显示的，就隐藏，toggle(speed),其大小（长宽）和透明度都随之逐渐变化。<br />　　<br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><imgsrc="1.jpg"style="width:150px"/><br /><img src=\"http://www.cnblogs.com/Images/OutliningIndicators/None.gif\" /><ahref="#"onClick='$("img").toggle("slow")'>jQuery</a><br />　　<br />fadeIn(speeds)　 fadeOut(speeds)　根据速度调整透明度来显示或隐藏匹配对象，注意有别于hide(speed)和show(speed)，fadeIn和fadeOut都只调整透明度，不调整大小<br />　　<br /><imgsrc="1.jpg"style="display:none"/><ahref="#"onClick='$("img").fadeIn("slow")'>jQuery</a><br />　　<br />点击连接后可以看到图片逐渐显示。<br />fadeIn(speed, callback)　fadeOut(speed, callback)　 callback为函数，先通过调整透明度来显示或隐藏匹配对象，当调整结束后执行callback函数<br />　　<br /><imgsrc="1.jpg"/><br /><ahref="#"onClick='$("img").fadeIn("slow",function(){alert("AnimationDone.");})'>jQuery</a><br />　　<br />点击连接后可以看到图片逐渐显示,显示完全后弹出对话框<br />fadeTo(speed, opacity, callback)　将匹配对象以speed速度调整倒透明度opacity，然后执行函数callback。Opacity为最终显示的透明度(0-1).<br />　　<br /><imgsrc="1.jpg"/><br><br /><ahref="#"onClick='$("img").fadeTo("slow",0.55,function(){alert("AnimationDone.");})'>jQuery</a><br />　　<br />大家可以看一下自己看看效果，如果不用jQuery，编写原始javascript脚本可能很多代码！<br />slideDown(speeds)　将匹配对象的高度由0以指定速率平滑的变化到正常！<br />　　<br /><imgsrc="1.jpg"style="display:none"/><br /><ahref="#"onClick='$("img").slideDown("slow")'>jQuery</a><br />　　<br />slideDown(speeds,callback)　将匹配对象的高度由0变化到正常！变化结束后执行函数callback<br />slideUp("slow")　slideUp(speed, callback) 匹配对象的高度由正常变化到0<br />slideToggle("slow") 如果匹配对象的高度正常则逐渐变化到0，若为0，则逐渐变化到正常<br />六：事件处理<br />hover(Function, Function)　　当鼠标move over时触发第一个function，当鼠标move out时触发第二个function<br />样式：<style>.red{color:#FF0000}</style><br />Html代码： <div id="a">sdf</div><br />jQuery代码及效果<br />　　<br />$(function(){<br />　$("#a").hover(function(){$(this).addClass("red");},<br />　　　　　　　　　　　　　　function(){$(this).removeClass("red");<br />　　　　　　　　　　　　　});<br />})<br />　　<br />最终效果是当鼠标移到id为a的层上时图层增加一个red样式，离开层时移出red样式<br />toggle(Function, Function)　　当匹配元素第一次被点击时触发第一个函数，当第二次被点击时触发第二个函数<br />样式：<style>.red{color:#FF0000}</style><br />Html代码： <div id="a">sdf</div><br />jQuery代码及效果<br />　　<br />$(function(){<br />　$("#a").toggle(function(){$(this).addClass("red");},<br />　　　　　　　　　　　　　　　function(){$(this).removeClass("red");<br />　　　　　　　　　　　　　　});<br />})<br />　　<br />最终效果是当鼠标点击id为a的层上时图层增加一个red样式，离开层时移出red样式<br />bind(type, fn)　 用户将一个事件和触发事件的方式绑定到匹配对象上。<br />trigger(type)　 用户触发type形式的事件。$("p").trigger("click")<br />还有：unbind()　 unbind(type)　　unbind(type, fn)<br />Dynamic event(Function)　　绑定和取消绑定提供函数的简捷方式<br />例：<br />　　<br />$("#a").bind("click",function(){<br />　　　　　　　　　　　　　　　　　　　 $(this).addClass("red");<br />})<br />　　<br />也可以这样写：<br />　　<br />$("#a").click(function(){<br />　　　　　　　　　　　　$(this).addClass("red");<br />});<br />　　<br />最终效果是当鼠标点击id为a的层上时图层增加一个red样式，<br />jQuery提供的函数<br />用于browers事件<br />error(fn)　　load(fn)　　 unload(fn)　　resize(fn)　　scroll(fn)<br />用于form事件<br />change(fn)　　select(fn)　　submit(fn)<br />用于keyboard事件<br />keydown(fn)　　keypress(fn)　　keyup(fn)<br />用于mouse事件<br />click(fn)　　dblclick(fn)　　mousedown(fn)　 mousemove(fn)<br />mouseout(fn)　mouseover(fn)　　 mouseup(fn)<br />　　<br />用于UI事件<br />blur(fn)　　focus(fn)<br />以上事件的扩展再扩展为5类<br />举例，click(fn) 扩展 click()　unclick()　oneclick(fn)　unclick(fn)<br />click(fn)：增加一个点击时触发某函数的事件<br />click()：可以在其他事件中执行匹配对象的click事件。<br />unclick ()：不执行匹配对象的click事件。<br />oneclick(fn)：只增加可以执行一次的click事件。<br />unclick (fn)：增加一个点击时不触发某函数的事件。<br />上面列举的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法扩展。<br />　　　　　　　　　　　　　　　　　　　七：Ajax支持<br />通用方式：<br />$.ajax(prop)　　通过一个ajax请求，回去远程数据，prop是一个hash表，它可以传递的key/value有以下几种。<br />　　　　(String)type：数据传递方式(get或post)。<br />　　　　((String)url：数据请求页面的url<br />　　　　((String)data：传递数据的参数字符串，只适合post方式<br />　　　　((String)dataType：期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")<br />　　　　((Boolean)ifModified： 当最后一次请求的相应有变化是才成功返回，默认值是false<br />　　　　((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout<br />　　　　((Boolean)global：是否为当前请求触发ajax全局事件，默认为true<br />　　　　((Function)error：当请求失败时触发的函数。<br />　　　　((Function)success：当请求成功时触发函数<br />　　　　((Function)complete：当请求完成后出发函数<br />jQuery代码及说明<br />　　<br />$.ajax({url:"ajax.htm",<br />　　　　　success:function(msg){<br />　　　　　　　　　　　　$(div"#a").html(msg);<br />　　　　　　　　}<br />　　});<br />　　<br />将ajax.htm返回的内容作为id为a的div内容<br />　　<br />$.ajax({url:"ajax.aspx",<br />　　　　　　　type:"get",　　　　　<br />　　　　　　 dataType:"html",<br />　　　　　　data:"name=John&location=Boston",<br />　　　　　　success:function(msg){<br />　　　　　　　　　　　　　　　　 $("#a").html(msg);<br />　　　　　　　　　　　　　　　}<br />　　　　 });<br />　　<br />用get方式向ajax.aspx页面传参数，并将返回内容负给id为a的对象。<br />$.ajaxTimeout(time) 设置请求结束时间<br />　 $.ajaxTimeout( 5000 )<br />其它简化方式：<br />　　<br />$.get(url, params, callback)　用get方式向远程页面传递参数，请求完成后处理函数，除了url外，其它参数任意选择！<br />　　<br />$.get("ajax.htm",function(data){$("#a").html(data)　})<br />　　<br />$.get(　 "ajax.asp",<br />　　　　　　{name:"young",age:"25"},<br />　　　　　　function(data){alert("DataLoaded:"+data);}<br />　　　　)<br />　　<br />$.getIfModified(url, params, callback)　用get方式向远程页面传递参数，从最后一次请求后如果数据有变化才作出响应，执行函数callback<br />$.getJSON(url, params, callback)　用get方式向远程json对象传递参数，请求完成后处理函数callback。<br />$.getScript(url, callback)　用get方式载入并运行一个远程javascript文件。请求完成后处理函数callback。<br />$.post(url, params, callback)　用post方式向远程页面传递参数，请求完成后处理函数callback<br />load(url, params, callback)　载入一个远程文件并载入页面DOM中，并执行函数callback<br />　　<br />$("#a").load("ajax.htm",function(){alert("loadisdone");});<br />　　<br />仰天一笑 徐羽 向ajax.htm页面发出请求，将返回结果装入id为a的内容中，然后再执行函数callback。<br />loadIfModified(url, params, callback)　用get方式向远程页面传递参数，从最后一次请求后如果数据有变化才作出响应，将返回结果载入页面DOM中，并执行函数callback<br />ajaxStart(callback) 当ajax请求发生错误是时执行函数callback<br />ajaxComplete(callback)　当ajax请求完成时执行函数callback<br />ajaxError(callback)　当ajax请求发生错误时执行函数callback<br />ajaxStop(callback)　当ajax请求停止时执行函数callback<br />ajaxSuccess(callback)　当ajax请求成功时执行函数callback<br />　<br />　　　　　　　　　　　　　　　　　　　八：jQuery插件<br />　　 随着jQuery的广泛使用，已经出现了大量jQuery插件，如thickbox，iFX，jQuery-googleMap等，简单的引用这些源文件就可以方便的使用这些插件。这里我简单的介绍一些网址供大家参考，这些网站头提供了大量的demo，并且使用及其简单，及时E文不好，也能快速掌握！<br />　　http://jquery.com/plugins　　 官方推荐<br />　　http://interface.eyecon.ro/demos　　效果超级棒，使用更简单，一定有你喜欢的！<br />　　http://www.dyve.net/jquery/<br />　　http://bassistance.de/jquery-plugins<br />　 还有其它很多插件，大家可以google以下，如果大家发现好的了，可以留言共享以下</code></p>