jQuery 中文入门指南
此文以实例为基础一步步说明了 jQuery 的工作方式。 以下部分为原文翻译: 以下部分为原文翻译:
jQuery 入门指南教程
这个指南是一个对 jQuery 库的说明，要求读者了解 HTML(DOM)和 CSS 的一些常 识。它包括了一个简单的 Hello World 的例子，选择器和事件基础，AJAX、FX 的用法， 以及如何制作 jQuery 的插件。 这个指南包括了很多代码， 你可以 copy 它们，并试着修改它们，看看产生的效果。
内容提要
1. 2. 3. 4. 5. 6. 7. 8. 安装 Hello jQuery Find me：使用选择器和事件 Rate me：使用 AJAX Animate me(让我生动起来)：使用 FX Sort me(将我有序化)：使用 tablesorter 插件(表格排序) Plug me：制作您自己的插件 Next steps(下一步)
安装
一开始，我们需要一个 jQuery 的库，最新的下载可以到这里到。这个指南提供 一个基本包含实例的包供下载. 下载：jQuery Starterkit (译者注：一定要下载这个包，光看文章不实践肯定是不行的。) 下载后解
压缩，然后用你最喜欢的文本编辑器打开 starterkit.html 和 custom.js 这两个文件。(译者注：这两个就是例子文件，所有的例子都用这两个 例子作出,custom.js 写 jQuery 代码,starterkit.html 观察效果.建议用 editPlus 打开) 现在，我们就已经做好了一切准备来进行这个著名的"Hello world"例子.
Hello jQuery
在做所有事情之前，我们要让 jQuery 读取和处理文档的 DOM，必须尽可能快地在 DOM 载入后开始执行事件，所以，我们用一个 ready 事件作为处理 HTML 文档的开 始.看看我们打开的 custom.js 这个文件，里面已经准备好了: $(document).ready(function() { // do stuff when DOM is ready }); 放一个简单的 alert 事件在需要等 DOM 完成载入，所以我们把任务稍稍变复杂一 点：在点击任何一个链接时显示一个 alert. $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); 这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。 (译者注：请照此代码修改 custom.js 并保存，然后用浏览器打开 starterkit.html 观察效果。) 让我们看一下这些修改是什么含义。$("a") 是一个 jQuery 选择器(selector), （译者注： 即<a></a>）$号是 jQuery “类”(jQuery ， 在这里， 它选择所有的 a 标签 "class")的一个别称，因此$()构造了一个新的 jQuery 对象(jQuery object)。 函数 click() 是这个 jQuery 对象的一个方法， 它绑定了一个单击事件到所有选 中的标签(这里是所有的 a 标签)，并在事件触发时执行了它所提供的 alert 方法. 这里有一个拟行相似功能的代码: <a href="#" onclick="alert('Hello world')">Link</a> 不同之处很明显，用 jQuery 不需要在每个 a 标签上写 onclick 事件，所以我们拥 有
了一个整洁的结构文档(HTML)和一个行为文档(JS)，达到了将结构与行为分开 的目的，就像我们使用 CSS 追求的一样. 下面我们会更多地了解到选择器与事件.
me：使用选择器和事件 Find me：使用选择器和事件
jQuery 提供两种方式来选择 html 的 elements， 第一种是用 CSS 和 Xpath 选择器 联合起来形成一个字符串来传送到 jQuery 的构造器（如：$("div > ul a")）； 第二种是用 jQuery 对象的几个 methods(方法)。这两种方式还可以联合起来混 合使用。 为了测试一下这些选择器， 我们来试着在我们 starterkit.html 中选择并修改第 一个 ordered list. 一开始， 我们需要选择这个 list 本身， 这个 list 有一个 ID 叫“orderedlist”， 通常的 javascript 写法是 ElementById("orderedlist").在 jQuery 中，我们这样做： $(document).ready(function() { $("#orderedlist").addClass("red"); }); 这里将 starterkit 中的一个 CSS 样式 red 附加到了 orderedlist 上(译者注： 参 考测试包中的 css 目录下的 core.css，其中定义了 red 样式)。因此，在你刷新 了 starterkit.html 后，你将会看到第一个有序列表(ordered list )背景变 成了红，而第二个有序列表没有变化. 现在，让我们添加一些新的样式到 list 的子节点. $(document).ready(function() { $("#orderedlist > li").addClass("blue"); }); 这样，所有 orderedlist 中的 li 都附加了样式"blue"。 现在我们再做个复杂一点的， 当把鼠标放在 li 对象上面和移开时进行样式切换， 但只在 list 的最后一个 element 上生效。 $(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); }, function() { $(this).removeClass("green"); }); });
还有大量的类似的 CSS 和 XPath 例子，更多的例子和列表可以在这里到。 （译 者注：入门看此文，修行在个人，要想在入门之后懂更多，所以这段话的几个链 接迟早是要必看的！不会又要翻译吧...^_^!） 每一个 onXXX 事件都有效，如 onclick,onchange,onsubmit 等，都有 jQuery 等 价表示方法（译者注：jQuery 不喜欢 onXXX，所以都改成了 XXX，去掉了 on）。 其他的一些事件，如 ready 和 hover，也提供了相应的方法。 你可以在 Visual jQuery 到全部的事件列表，在 Events 栏目下. 用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！ $(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).html( $(this).html() + " BAM! " + i ); }); }); find() 让你在已经选择的 element 中作条件查，因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法 迭代了所有的 li，并可以在此基础上作更多的处理。 大部分的方法，如 addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每 个 li 的 html 文本, 追加一些文字，并将之设置为 li 的 html 文本。（译者注： 从这个例子可以看到.html()方法是获取对象的 html 代码， 而.html('xxx')是设 置'xxx'为对象的 html 代码） 另一个经常碰到的任务是在没有被 jQuery 覆盖的 DOM 元素上 call 一些方法， 想 像一个在你用 AJAX 方式成功提交后的 reset： $(document).ready(function() { // use this to reset a single form $("#reset").click(function() { $("#form")[0].reset(); }); }); （译者注：这里作者将 form 的 id 也写成了 form，源文件有<form id="form">， 这是非常不好的写法，你可以将这个 ID 改成 form1 或者 testForm，然后用 $("#form1")或者$("#testForm")来表示它，再进行测试。） 这个代码选择了所有 ID 为"form"的元素， 并在其第一个上 call 了一个 reset()。 如果你有一个以上的 form，你可以这样做： $(document).ready(function() {
// use this to reset several forms at once $("#reset").click(function() { $("form").each(function() { set(); }); }); }); （译者注：请注意一定要亲自将这些代码写在 custom.js 中并在 starterkit.html 上测试效果才能有所体会！必要时要观察 starterkit.html 的 html 代码） 这样你在点击 Reset 链接后，就选择了文档中所有的 form 元素，并对它们都执 行了一次 reset()。 还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了 filter() 和 not() 方法来解决这个问题。 filter()以过滤表达式来减少不符 合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无 序的 list，你想要选择所有的没有 ul 子元素的 li 元素。 $(document).ready(function() { $("li").not("[ul]").css("border", "1px solid black"); }); 这个代码选择了所有的 li 元素，然后去除了没有 ul 子元素的 li 元素。刷新浏 览器后，所有的 li 元素都有了一个边框，只有 ul 子元素的那个 li 元素例外。 （译者注：请注意体会方便之极的 css()方法，并再次提醒请务必实际测试观察 效果，比方说换个 CSS 样式呢？再加一个 CSS 样式呢？像这样： $("li").not("[ul]").css("border", "1px solid black").css("color","red");） 上面代码中的[expression] 语法是从 XPath 而来，可以在子元素和属性 (elements and attributes)上用作过滤器，比如你可能想选择所有的带有 name 属性的链接: $(document).ready(function() { $("a[@name]").background("#eee"); }); 这个代码给所有带有 name 属性的链接加了一个背景。（译者注：这个颜太 不明显了，建议写成$("a[@name]").background("red");）
jquery修改html内容更常见的情况是以 name 来选择链接， 你可能需要选择一个有特点 href 属性的链 接，这在不同的浏览
器下对 href 的理解可能会不一致，所以我们的部分匹配 ("*=")的方式来代替完全匹配("=")： $(document).ready(function() { $("a[@href*=/content/gallery]").click(function() { // do something with all links that point somewhere to /content/gallery }); }); 到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选 择上一个或者下一个元素，比如一个 FAQ 的页面，答案首先会隐藏，当问题点击 时，答案显示出来，jQuery 代码如下： $(document).ready(function() { $('#faq').find('dd').hide().end().find('dt').click(function() { var answer = $(this).next(); if (answer.is(':visible')) { answer.slideUp(); } else { answer.slideDown(); } }); }); 这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像 '#faq' 只选择了一次，利用 end()方法，第一次 find()方法会结束(undone)， 所以我们可以接着在后面继续 find('dt')，而不需要再写 $('#faq').find('dt')。 在点击事件中的，我们用 $(this).next() 来到 dt 下面紧接的一个 dd 元素， 这让我们可以快速地选择在被点击问题下面的答案。 （译者注：这个例子真是太酷了，FAQ 中的答案可以收缩！从利用 next()的思路 到实现这些效果都有很多地方需要我们消化，注意 if (answer.is(':visible')) 用法，注意 answer.slideUp()；不懂的地方赶紧查我在最开始提到的两个必看 API 文档） 除了选择同级别的元素外，你也可以选择父级的元素。可能你想在用户鼠标移到 文章某段的某个链接时，它的父级元素--也就是文章的这一段突出显示，试试这 个：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。