jQuery 学习6 操纵元素显示效果的函数

2016-02-19 14:12 4 1 收藏

下面图老师小编要向大家介绍下jQuery 学习6 操纵元素显示效果的函数,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

代码如下:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
html
head
titleCollapsible List Take 1/title
link rel="stylesheet" type="text/css" href="../common.css"
script type="text/javascript"
src="../scripts/jquery-1.2.1.js"/script
script type="text/javascript"
$(function(){
$('li:has(ul)')
.click(function(event){
if (this == event.target) {
if ($(this).children().is(':hidden')) {
$(this)
.css('list-style-image','url(minus.gif)')
.children().show();
}
else {
$(this)
.css('list-style-image','url(plus.gif)')
.children().hide();
}
}
return false;
})
.css('cursor','pointer')
.click();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
/script
style
fieldset { width: 320px }
/style
/head
body
fieldset
legendCollapsible List Take 1/legend
ul
liItem 1/li
liItem 2/li
li
Item 3
ul
liItem 3.1/li
li
Item 3.2
ul
liItem 3.2.1/li
liItem 3.2.2/li
liItem 3.2.3/li
/ul
/li
liItem 3.3/li
/ul
/li
li
Item 4
ul
liItem 4.1/li
li
Item 4.2
ul
liItem 4.2.1/li
liItem 4.2.2/li
/ul
/li
/ul
/li
liItem 5/li
/ul
/fieldset
/body
/html



上面实现列表的折叠已经很简单了,但jQuery提供了一个切换元素状态的函数toggle()。将上面红色字体的代码改为下面的代码,同样可以实现上述功能:
$(this).children().toggle();
$(this).css('list-style-image',
($(this).children().is(':hidden')) ?
'url(plus.gif)' : 'url(minus.gif)');
}
以上三个函数show()、hide()、toggle()在带参数的情况下可以实现元素逐渐的显示和隐藏
hide(speed,callback)
show(speed,callback)
toggle(speed,callback)
speed:可为数字或字符串,把效果的持续时间(可选)指定为毫秒数或预定义的字符串之一:slow、normal或fast。如果省略,就不产生动画并立即在显示屏上显示元素。
callback:回调函数(可选),在动画完成时调用。没有参数传递给这个函数,但函数上下文(this)被设置为以动画隐藏的元素。

动画效果的可折叠列表
代码如下:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
html
head
titleCollapsible List Take 3/title
link rel="stylesheet" type="text/css" href="../common.css"
script type="text/javascript"
src="../scripts/jquery-1.2.1.js"/script
script type="text/javascript"
$(function(){
$('li:has(ul)')
.click(function(event){
if (this == event.target) {
$(this).css('list-style-image',
(!$(this).children().is(':hidden')) ?
'url(plus.gif)' : 'url(minus.gif)');
$(this).children().toggle('slow');
}
return false;
})
.css({cursor:'pointer',
'list-style-image':'url(plus.gif)'})
.children().hide();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
/script
style
fieldset { width: 320px }
/style
/head
body
fieldset
legendCollapsible List Take 3/legend
ul
liItem 1/li
liItem 2/li
li
Item 3
ul
liItem 3.1/li
li
Item 3.2
ul
liItem 3.2.1/li
liItem 3.2.2/li
liItem 3.2.3/li
/ul
/li
liItem 3.3/li
/ul
/li
li
Item 4
ul
liItem 4.1/li
li
Item 4.2
ul
liItem 4.2.1/li
liItem 4.2.2/li
/ul
/li
/ul
/li
liItem 5/li
/ul
/fieldset
/body
/html

来源:http://www.tulaoshi.com/n/20160219/1606409.html

延伸阅读
标签: Web开发
一、下载 官方网址是http://jquery.com/ 官方下载地址:http://docs.jquery.com/Downloading_jQuery 里边有当前版本和历史版本的下载,可以下载下来部署在自己的服务器上 上面也有Google\Microsoft\jQuery的CDN(Content Delivery Network)地址,由于目前jQuery的广泛使用,选择CDN地址可以充分利用缓存和这些互联网大佬们的带宽和服务器资源。...
标签: Web开发
jquery基本信息 jquery的官方网站: www.jquery.com jquery解释: jquery是javascript的类库,提供了大量的javascript的类库和API,方便javascript开发。 jquery API中文参考手册: http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html 前台数据提交到后台demo: 实例图: 功能点: 1....
标签: Web开发
script src=/jslib/jquery/jquery-latest.pack.js/script  p height=1001学习jquery/p spanval()可以取值;val(s)可以赋值/spanbr/ divinput type="text" id="mm" value="mm"button  id=get取值/button button  id=put赋值/button /div button id=an展开/button div id=test...
标签: Web开发
1、属性: 为所有匹配的元素设置一个计算的属性值 //为所有的input添加属性class="btn" //$("input").attr("class","btn"); 2、CSS:为每个匹配的元素添加指定的类名 //对所有的提交按钮添加样式 $("input:submit").addClass("btn"); 3、值:获得第一个匹配元素的当前值 //取的某一按钮的值 //alert($("#Button1").val()); 4、H...
标签: Web开发
基础知识: 想要结构与行为分离当然不能使用button onclick="…"/button之类的东西了,js是写在head之间的,那就说起了 window.onload——这不是一个好东西,所以就有了Jquery颇具创意的 代码如下: $(document).ready(funciton(){ … }); 当然还会更精简: 代码如下: $(function(){ … }); 所以我的第一个Jquery脚本就是这...

经验教程

205

收藏

72
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部