<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery入门指南</title>
<link href="../cssjs/api.css" rel="stylesheet" type="text/css" />
</head>
<body><table width="100%" height="48" border="0" bgcolor="#6DBCE7" style="border-bottom:1px solid #5B92DB">
<tr>
<td>jQuery API </td>
<td align="right">jQuery API 中英文对照版 </td>
</tr>
<tr>
<td colspan="2" style="font-weight:bold;font-size:14px;">jQuery入门指南</td>
</tr>
</table><table width="100%" border="0" cellpadding="6" cellspacing="6"><tr><td>
<strong>jQuery入门指南</strong><br />
<br />
这个指南是一个对jQuery库的说明，要求读者了解DOM的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。<br />
<br />
这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。<br />
<br />
内容提要<br />
<ol>
<br />
<li><a href="#1">安装</a><br />
</li>
<li><a href="#2">Hello jQuery</a><br />
</li>
<li><a href="#3">Find me:使用选择器和事件</a><br />
</li>
<li><a href="#4">Rate me:使用AJAX</a><br />
</li>
<li><a href="#5">Animate me(让我生动起来):使用FX</a><br />
</li>
<li><a href="#6">Sort me(将我有序化):使用tablesorter插件(表格排序)</a><br />
</li>
<li><a href="#7">Plug me:制作您自己的插件</a><br />
</li>
<li><a href="#8">Next steps(下一步)</a><br />
</li>
</ol>
<br />
<strong>一.安装</strong><br /><a name="1" id="1"></a>
一开始,我们需求一个jQuery的库,最新的下载可以到<a href="http://jquery.com/src" target="_blank">这里</a>找到。<br />
这个指南提供一个基本包含实例的包供下载.<br />
<br />
下载: <a href="http://jquery.bassistance.de/jquery-starterkit.zip">jquery-starterkit</a><br />
<br />
<strong>(译者Keel注:一定要下载这个包，光看文章不实践肯定是不行的。)</strong><br />
<br />
下载后解压缩，然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件<strong>。</strong><br />
<strong>(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)<br />
</strong><br />
<br />
现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.<br />
<br />
<strong><a name="2" id="2"></a>二.Hello jQuery</strong>在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:<br />
<br />
<blockquote class="code">$(document).ready(function() {<br />
// do stuff when DOM is ready//当文档载入后从此处开始执行代码<br />
}); </blockquote>
<br />
<br />
下面我们放一个简单的alert事件在一个function中,因为这个alert不需求等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.<br />
<blockquote class="code">$(document).ready(function() {<br />
$("a").click(function() {<br />
alert("Hello world!");<br />
});<br />
});<br />
</blockquote>
<br />
这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。<br />
<strong>(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)<br />
</strong><br />
让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里，它选择所有的a标签（<strong>译者Keel注：即<a></a></strong>），$号是 jQuery “类”(jQuery "class")的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.<br />
这里有一个拟行相似功能的代码:<br />
<br />
<a href="#" onclick="alert('Hello world')">Link</a><br />
<br />
不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.<br />
<br />
下面我们会更多地了解到选择器与事件.<br />
<br />
<br />
<strong><a name="3" id="3"></a>三.Find me:使用选择器和事件</strong><br />
jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。<br />
<br />
为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个ordered list.<br />
<br />
一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们这样做：<br />
<blockquote class="code">$(document).ready(function() {<br />
$("#orderedlist").addClass("red");<br />
});<br />
</blockquote>
<br />
这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注：参考测试包中的css目录下的core.css，其中定义了red样式)。因此，在你刷新了starterkit.html后，你将会看到第一个有序列表(ordered list )背景色变成了红色，而第二个有序列表没有变化.<br />
<br />
现在，让我们添加一些新的样式到list的子节点.<br />
<blockquote class="code">$(document).ready(function() {<br />
$("#orderedlist ><br />
li").addClass("blue");<br />
});<br />
</blockquote>
<br />
这样，所有orderedlist中的li都附加了样式blue。<br />
<br />
现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。<br />
<blockquote class="code">$(document).ready(function() {<br />
$("#orderedlist<br />
li:last").hover(function() {<br />
$(this).addClass("green");<br />
}, function() {<br />
$(this).removeClass("green");<br />
});<br />
});<br />
</blockquote>
<br />
<br />
还有大量的类似的<a href="http://jquery.com/docs/Base/Expression/CSS">CSS</a>和<a href="http://jquery.com/docs/Base/Expression/XPath">XPath</a>例子，更多的例子和列表可以在<a href="http://jquery.com/docs/Base/Expression">这里</a>找到。<br />
（译者Keel注：入门看此文，修行在个人，要想在入门之后懂更多，所以这段话的几个链接迟早是要必看的！不会又要翻译吧...^_^!）<br />
<br />
每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（译者Keel注：jQuery不喜欢onXXX，所以都改成了XXX，去掉了on）。其他的一些<a href="http://jquery.com/docs/EventModule">事件</a>，如ready和hover,也提供了相应的方法。<br />
<br />
你可以在<a href="http://visualjquery.com">Visual jQuery</a>找到全部的事件列表，在Events栏目下。<br />
<br />
用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！<br />
<br />
<blockquote class="code">$(document).ready(function() {<br />
$("#orderedlist").find("li").each(function(i) {<br />
$(this).html(<br />
$(this).html() + " BAM! " + i );<br />
});<br />
}); </blockquote>
<br />
<br />
find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li，并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。（译者Keel注：从这个例子可以看到.html()方法是获取对象的html代码，而.html('xxx')是设置'xxx'为对象的html代码） <br />
<br />
另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法，想像一个在你用AJAX方式成功提交后的reset：<br />
<br />
<br />
<br />
<blockquote class="code">$(document).ready(function() {<br />
// use this to reset a<br />
single form<br />
$("#reset").click(function() {<br />
$("#form")[0].reset();<br />
});<br />
});<br />
</blockquote>
<br />
（译者Keel注：这里作者将form的id也写成了form，源文件有<form id="form">，这是非常不好的写法，你可以将这个ID改成form1或者testForm，�
jQuery中文参考手册.rar
需积分: 17 185 浏览量
2008-11-05
10:52:00
上传
评论
收藏 307KB RAR 举报
jQuery中文参考手册.rar （202个子文件） 
api.css 703B dtree.css 540B Thumbs.db 19KB
jquery.gif 4KB nolines_plus.gif 870B nolines_minus.gif 861B folder.gif 217B folderopen.gif 164B base.gif 141B page.gif 131B plus.gif 89B plusbottom.gif 88B minus.gif 86B minusbottom.gif 85B join.gif 69B line.gif 66B joinbottom.gif 66B empty.gif 62B jQuery中文参考手册.htm 569B
zhinan.html 25KB left.html 21KB $.ajax.html 12KB tabs.html 9KB DOM.html 6KB bind.html 5KB animate.html 5KB prepend.html 5KB Events.html 5KB $(expr,%20context).html 5KB append.html 5KB unbind.html 4KB slideUp.html 4KB slideToggle.html 4KB slideDown.html 4KB index.html 4KB after.html 4KB Draggable.html 4KB before.html 4KB ajaxSubmit.html 4KB ready.html 4KB fieldValue.html 4KB filter.html 4KB $.map.html 4KB next.html 4KB $.extend.html 4KB parents.html 4KB prev.html 4KB Sortable.html 4KB Accordion.html 4KB add(elements).html 4KB Tooltip.html 4KB offset.html 4KB children.html 4KB siblings.html 4KB load.html 4KB is.html 4KB $.post.html 4KB parent.html 4KB one.html 4KB $.get.html 4KB $.each.html 4KB $.noConflict().html 4KB toggle.html 4KB trigger.html 4KB $.getIfModified.html 4KB css(key,value).html 4KB each.html 4KB attr(key,%20fn).html 4KB $.extend(prop).html 4KB wrap(elem).html 4KB wrap.html 4KB attr(key,value).html 4KB removeClass.html 4KB $(fn).html 4KB fadeTo.html 4KB Ajax.html 4KB css(name).html 3KB ajaxForm.html 3KB hover.html 3KB remove.html 3KB $(elements).html 3KB height(val).html 3KB insertBefore.html 3KB width(val).html 3KB fadeOut.html 3KB fadeIn.html 3KB $.meta.setType.html 3KB prependTo.html 3KB $.cookie1.html 3KB $.getJSON.html 3KB $.merge.html 3KB show(speed,callback).html 3KB insertAfter.html 3KB clone.html 3KB not(elems).html 3KB hide(speed,callback).html 3KB loadIfModified.html 3KB appendTo(expr).html 3KB Effects.html 3KB $.browser.html 3KB共 202 条
- 1
- 2
- 3
评论0