slideup()和slideDown()方法的使用
最近比较闲，并且前段时间因为一个JQuery的问题卡的很是头疼，现在正好抽点功夫来学学JQuery。从helloworld的学习一直都觉得Jquery其实蛮好理解的，到slidedown()方法和slideUp()方法时，才看到这里有很多的方法都不知道是个什么意思，搞的一知半解的。baidu了一下，终于也明白个七八成了。现在把它写在这里，也是给遇到同样问题的朋友一个找答案的地方，虽然网上有很多，不过我自己写的终归是自己的，到时候再遇到同样的问题的时候我也不用到处乱找了，呵呵。先看一个我从中文入门教程上看到的例子：
<!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 Starterkit</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#faq').find('dd').css('color','red'); //这里是我添加的样式
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
</script>
</head>
<body>
<h1>jQuery </h1>
<div class="stuff">
<h3>Bird FAQ - click the questions to show the answers</h3>
<dl id="faq">
<dt>问题 1</dt>
<dd>问题 1 的答案</dd>
<dt>问题 2</dt>
<dd>问题 2 的答案</dd>
<dt>问题 3</dt>
<dd>问题 3的答案</dd>
<dt>问题 4</dt>
<dd>问题 4的答案</dd>
</dl>
</div>
</body>
</html>
之前的疑问主要有：
end() 、next()、slideUp()、slideDown() 四个方法。
在ready方法内：首先设置答案dd的字体样式为red。
然后用ID选择器 $('#faq') 获取到这个dl列表，然后find('dd')是去获取id为faq里的标签为dd的元素，调用hide()方法将其隐藏。这时候例子里调用了一个end()，返回到之前的faq对象，(这里可能会有点绕,
$('#faq') 此时对象为faq对象；
$('#faq').find('dd')此时的对象为dd
$('#faq').find('dd').end()此时又返回到faq元素.) 。接着获取dt的元素的onclick事件。在里面调用该对象的next()方法，就是调用当前的dd元素的下一个标签的内容，也就是该问题的答案咯。然后判断其样式，如果可见调用slideUp()将其隐藏，否则调用slideDown()方法显示。
第一次写这么多东西，没什么条理，多多包涵了各位！
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/mzygssk/archive/2010/05/25/5622476.aspx