- 浏览: 1499098 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (798)
- struts2 (42)
- servlet (20)
- quartz (4)
- jquery & ajax (24)
- tomcat (5)
- javascript (15)
- struts1 (8)
- 搜索关键字及链接 (3)
- fckeditor (3)
- Apache (5)
- spring (22)
- linux (3)
- 企业应用 (8)
- 综合应用 (13)
- 服务器 (2)
- 数据库 (85)
- 性能调优 (21)
- 网络应用 (15)
- 缓存技术 (8)
- 设计模式 (39)
- 面试题 (7)
- 程序人生&前辈程序员 (29)
- java基础 (59)
- hibernate (75)
- log4j (4)
- http (11)
- 架构设计 (28)
- 网页设计 (12)
- java邮件 (4)
- 相关工具 (11)
- ognl (7)
- 工作笔记 (18)
- 知识面扩展 (12)
- oracle异常 (1)
- 正则表达式 (2)
- java异常 (5)
- 项目实践&管理 (1)
- 专业术语 (11)
- 网站参考 (1)
- 论坛话题 (2)
- web应用 (11)
- cxf&webservice (22)
- freemarker (3)
- 开源项目 (9)
- eos (1)
- ibatis (6)
- 自定义标签 (3)
- jsp (3)
- 内部非公开文档(注意:保存为草稿) (0)
- 国内外知名企业 (2)
- 网店 (3)
- 分页 (1)
- 消费者习惯 (2)
- 每日关注 (1)
- 商业信息 (18)
- 关注商业网站 (1)
- 生活常识 (3)
- 新闻 (2)
- xml&JSON (5)
- solaris (1)
- apache.common (3)
- BLOB/CLOB (1)
- lucene (2)
- JMS (14)
- 社会进程 (8)
- SSH扩展 (2)
- 消费心理 (1)
- 珠三角 (1)
- 设计文档 (1)
- XWork&webwork (1)
- 软件工程 (3)
- 数据库及链接 (1)
- RMI (2)
- 国内外知名企业&人物 (1)
最新评论
-
司c马:
简介易懂、
OutputStream和InputStream的区别 -
在世界的中心呼喚愛:
解决我的问题
Java获取客户端的真实IP地址 -
bo_hai:
都是些基本的概念呀!
SSO -
tian_4238:
哥们,你也是搞水利这块的吧。
巧用SQLQuery中的addScalar -
loveEVERYday:
java.util.Date、java.sql.Date、java.sql.Time、java.sql.Timestamp小结
最近比较闲,并且前段时间因为一个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
发表评论
-
20 个非常有用的jQuery 工具提示插件
2011-09-05 10:16 1107http://www.oschina.net/news/210 ... -
55 个 jQuery 表单插件
2011-08-29 14:46 1211http://www.oschina.net/news/208 ... -
jquery(百科解释)
2011-08-04 17:08 1173Jquery是继prototype之后又一个优秀的Javasc ... -
常用jquery方法大全
2011-07-18 14:17 3常用jquery方法大全.docx -
几种流行的AJAX框架对比:Jquery,Mootools,Dojo,ExtJs,Dwr
2011-07-06 11:34 1856Ajaxian在2007年底对Ajax工具进行了调查,部分调查 ... -
Web前端开发工程师必读的15个设计博客
2011-03-01 18:01 1345http://sd.csdn.net/a/20110301/2 ... -
jquery-web素材
2011-01-21 14:33 1215http://www.htmldrive.net -
Web设计师值得收藏的10个jQuery特效
2010-12-28 10:43 1548jQuery已经不是什么新鲜的事儿,以前总把它认为是非 ... -
反向ajax
2010-12-17 17:49 1276http://192.168.17.114:8080/dwr/ ... -
$.ready()
2010-12-06 16:40 751$(document).ready(function(){ ... -
JQuery中each()的使用方法说明
2010-12-03 11:02 1707JQuery中的each函数在1.3.2的官方文档中的描述如下 ... -
flot
2010-11-29 22:12 1616flot 是一个基本于Jquery的开源Javascript库 ... -
Jquery Messager右下角弹出消息插件
2010-11-29 17:38 2302http://www.94this.com.cn/myCode ... -
JS制作网页的FISHEYE效果
2010-11-03 11:30 1431http://d.download.csdn.net/down ... -
常用jquery方法大全
2010-09-29 11:48 1705更详细的见附件 jQuery中常用的函数方法总结 j ... -
js offsetHeight offsetWidth 解说
2010-09-17 10:42 19444scrollHeight: 获取对象的滚动高度。 scrol ... -
jQuery中的Ajax几种请求方法
2010-08-09 14:04 1975jQuery确实是一个挺好的轻量级的JS框架,能帮助我 ... -
通过jquery实现ajax调用
2010-08-06 16:12 1589要素:struts1 一、 1、test.jsp < ... -
相关知识
2010-08-05 16:17 13081、英文指南http://www.visualjquery.c ... -
ajax 回调 多浏览器
2010-08-05 10:34 1275var xmlHttp; function get ...
相关推荐
其中,slideUp 和 slideDown 是 jQuery 提供的两种动画方法,用于实现元素的高度变化,进而产生内容的展开或收起的效果。当我们想要通过点击事件来触发动画时,jQuery 的事件监听器就可以派上用场。 在给定的文件中...
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY() 属性,给需要动画的元素添加上一个动画class。 先上效果图: 1.蒙层的结构: <!-- 购物车蒙层 --> ...
这样,你可以像使用普通布局一样添加和控制滑动视图,同时还能保持滑动效果的流畅性和一致性。 在实际项目中,你可能还需要考虑一些其他因素,例如动画的缓动函数(interpolator),这将决定动画的速度变化。例如,...
这通常涉及到JavaScript或jQuery中的几个关键函数,如`slideUp()`, `slideDown()` 和 `slideToggle()`。这些方法是jQuery库提供的强大功能,用于创建平滑的动画效果,使元素以滑动的方式显示或隐藏。在这篇文章中,...
这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
代码开始部分引入了jQuery库文件,这是使用`slideDown()`和`slideUp()`等jQuery方法的前提条件。 2. **初始化变量和状态** 通过jQuery的`$(function(){...})`来确保DOM完全加载后再执行脚本。使用变量`flag`来...
该行为等同于jQuerys的slideUp和slideDown方法。 它使用requestAnimationFrame并且没有外部依赖关系。 在此处查看演示: : 安装 yarn add es6-slide-up-down // or npm install es6-slide-up-down 用法 import { ...
slideToggle+slideup实现手机端折叠菜单效果 ...使用slideToggle和slideup函数来实现手机端折叠菜单效果是一种简洁、方便和高效的方法。开发者可以根据自己的需求,选择合适的函数和样式来实现折叠菜单效果。
在上述示例代码中,我们看到了如何使用jQuery的hover()方法来实现鼠标悬停和离开时触发不同的动画效果。hover()方法接受两个函数参数,第一个函数参数用于处理鼠标悬停事件(mouseenter),第二个函数参数用于处理...
jQuery 拥有以下滑动方法: slideDown() 向下滑动元素 slideUp()向上滑动元素 slideToggle()在 slideDown() 与 slideUp() 方法之间进行切换。 jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素。 ...
主要使用了jquery库的slideUp和slideDown方法,再配合华丽的样式就可以实现非常好看的手风琴滑动收缩菜单,可用于前后台左右侧导航菜单,好处在于不占据空间。Demo及在线演示效果:...
`slideUp()`方法常与`slideDown()`方法结合使用,以实现元素的展开和收起效果。 此外,`slideUp()`方法还可以与其他jQuery动画方法结合,如`fadeIn()`和`fadeOut()`,创建更复杂的视觉效果。同时,可以使用`stop()`...
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class。 先上效果图: 1.蒙层的结构: <!-- 购物车蒙层 --> ...
它的工作方式类似于jQuery的slideToggle(),slideDown()和slideUp(),但不使用display:none。 使用CSS3过渡和element.scrollHeight设置高度未知的元素的高度的动画。 也是一回事。 特征: 滑动高度已知或...
- `slideUp()`和`slideDown()`用于元素的上下滑动效果,可以用来隐藏或显示元素。同样,它们也支持设置动画时间。 3. **切换显示/隐藏(Toggle)** - `toggle()`函数允许你在一个元素上交替执行两个或多个功能,...