【jQuery教程】农民的jQuery之旅（三）开始使用jQuery

到现在为止，我们已经使用了所有的选择器（selectors）来选择子元素或者过滤现有的选择项。现在是时候研究一下选择前一个或后一个元素了，这个被称为siblings。考虑一个FAQ页，所有的回答开始都是隐藏的，当问题被点击的时候才会显示出来。jQuery代码如下：

CODE:

$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle();
});
});

点击察看农民的演示

这里我们使用了一些链接来减少代码数量并得到了更好的表现效果，因为“#faq”只被选择了一次。通过使用end()，第一个find()没有被执行，所以我们可以在#faq元素中从下一个find()开始搜索，而不用搜索他的dd子元素。

通过click句柄，这个方法被传递给click()方法，我们使用$(this).next()来找到从当前的dt开始的下一个sibling，这就是我们能够快速的找到被点击的问题的答案。

更深一步，你同样可以选择父元素（就像同XPath更相似的被认为是ancestors）。也许你想要悬浮的链接的父元素段落高亮现实，试着这样做：

CODE:

$(document).ready(function(){
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});
});

点击察看农民的演示

对于所有悬浮的链接，他们的父元素段落被找到并且一个“highlight”类（class）被添加和移除。

在我们继续下边的研究之前先后退一步：jQuery使一些关于如何减少代码因此会更容易的读取和维护。下边的代码是个精简版的$(document).ready(callback)代码：

CODE:

$(function() {
// code to execute when the DOM is ready
});

适用于hello world例子，我们以下边的代码结束：

CODE:

$(function() {
$("a").click(function() {
alert("Hello world!");
});
});

现在，根据我们已经掌握了的基础，我们将要开始探索其他方面的知识了，开始我们的AJAX。

跟这部分内容有关的有趣链接：
jQuery API documentation
Visual jQuery - A categorized browsable API documentation
jQuery Selectors
jQuery Events
jQuery DOM Traversing

剩下的内容涉及到了服务器端编程语言，俺还是先研究明白基础的东西吧，所以剩下的部分等以后再翻译，敬请关注。

让我动起来：使用效果

简单的动画效果可以通过jQuery的show()和hide()来实现。

CODE:

$(document).ready(function(){
$("a").toggle(function(){
$(".stuff").hide('slow');
},function(){
$(".stuff").show('fast');
});
});

利用animate()，你可以创建任何的动画，例如淡入淡出的滑动。

CODE:

$(document).ready(function(){
$("a").toggle(function(){
$(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
},function(){
$(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
});
});

点击第一个链接看看：）

更多的效果可以通过接口插件集合（inte易做图ce plugin collection）来实现。这个站点提供了demo和使用文档。接口在jQuery's plugin list的顶部，还有好多其他的。接下来的部分显示了如何使用tablesorter插件。

跟这部分内容有关的有趣链接：
jQuery Effects Documentation
Inte易做图ce plugin

补充：网页制作,jquery