网站地图
【www.gdgbn.com--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");
});
});
更多的效果可以通过 接口插件集合（interface plugin collection） 来实现。这个站点提供了demo和使用文档。接口在jQuery"s plugin list的顶部，还有好多其他的。接下来的部分显示了如何使用tablesorter插件。