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
slideup()和slideDown()方法的使用相关推荐
- 用原生JavaScript写出类似jQuery中slideUp和slideDown效果
JavaScript是本人自学的第一门语言,也是本人目前最喜欢的一门语言.由于是自学,加上没有做过任何项目(只是偶尔自己做一些小效果玩玩),所以水平不咋地,写得不好之处,欢迎各位指正. 前言 在我自学 ...
- 原生JavaScript实现jQuery中的slideUp和slideDown滑动效果
参考文章:用原生JavaScript写出类似jQuery中slideUp和slideDown效果_johnworks的博客-CSDN博客 作者:johnworks 目录 一.前言 二.第一次尝试 ...
- jQuery 效果 ——slideDown() 方法、slideToggle() 方法、slideUp() 方法
slideDown() 方法 定义和用法 slideDown() 方法通过使用滑动效果,显示隐藏的被选元素. 语法 $(selector).slideDown(speed,callback) 参数 描 ...
- jQuery中的slideUp()、slideDown()、hide()、show()
slideUp(speed,[callback]) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配的元素以" ...
- 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
- 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例 1
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
- 解决slideup或slidedown图片抖动
[百度上说加上stop(true),但在我这里没用] 使用JQuery的slideup或者slidedown时,图片出现抖动,在最前面加上以下即可
- jQuery 的 slideUp 和 slideDown 下拉卷动问题
最初公司前端写了个导航菜单,鼠标停留时弹出下拉菜单,移走鼠标时收缩下拉菜单,可就是这个简单的功能,T!!M!!D!!你屮它屮快了的时候,下拉菜单就不完整了,就像~~~包茎?? 本来官方提供的方法,会出 ...
- jQuery中的slideUp()、slideDown()、hide()、show() 的比较
slideUp(speed,[callback]) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配的元素以" ...
最新文章
- 构建DevOps功能：云计算自动化
- 用python怎样做学生管理系统用类的形式-Python配置管理的几种方式
- 给Clouderamanager集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤（图文详解）...
- chrome Native Client 让你可以使用 C 以及 C++ 语言开发 Web 应用
- oraclf 复杂查询练习_SQL复杂查询—练习（四）
- traceping是什么意思_关于CCNA ,ping 与trace 有什么区别
- R交互图_shiny包
- Linux-系统编程-知识点概述
- 40个免费flash相册程序
- JAVA中如何创建一个二维数组，然后给二维数组赋值！
- matlab高等数学实验答案,MATLAB高等数学实验-(第2版)
- 安装配置MySQL5.7详细教程
- 基于IDS模型设计的ICS
- 中国学生的最大噩梦，都来源于这个男人
- BUUCTF——rsa系列（4）
- main线程 子线程 顺序_在主线程main中开启子线程thread示例
- AUM、MAU与DAU
- 解释@Transactional注解的用法
- java调用shell脚本，解决传参和权限问题
- 何时使用领域驱动设计(DDD)