jquery基础教程二[伸缩、隔行变色...]

周一,2008 九 15 22:34:55

在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子
Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行]

<!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>可伸缩块</title> <style type="text/css"> p,div{margin:0;padding:0; font-size: 12px;} .box {float: left; margin-left: 20px; dipaly:inline;} .title1,.title2,.title3{width:280px;background:#cf0;height:20px;line-height: 20px;border:1px solid #aaa; text-align:center;} .content1,.content2,.content3{width:260px;height:350px;border:1px solid #aaa;border-top:none;padding: 10px;} </style> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".title1").click(function(){$(".content1").slideDown("slow");}); $(".title2").click(function(){$(".content2").slideUp("slow");}); $(".title3").click(function(){$(".content3").slideToggle("slow");}); }); </script> </head> <body> <div class="box"> <p class="title1">slideDown</p> <div class="content1"> 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div></div> <div class="box"> <p class="title2">slideUp</p> <div class="content2"> 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div> </div> <div class="box"> <p class="title3">slideToggle</p> <div class="content3"> 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

通过这个例子，你就能做像我侧边栏的收缩效果了，而且很简单，一行代码就行了，怎么样？

下面我们再来看一个很实用的例子
Demo_7：隔行变色, 鼠标滑过变色，点击变色

<!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>StripingTable</title> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script>  <script type="text/javascript"> $(document).ready(function(){ $(".stripe li:even").addClass("alt"); //给class为stripe的列表的偶数行添加class值为alt $(".stripe2 li").mouseover(function(){ //如果鼠标移到class为stripe的列表的li上时，执行函数 $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over，并且当鼠标一出该行时执行函数 $(this).removeClass("over");}); //移除该行的class $(".stripe3 li").click(function(){ $(this).toggleClass("alt");});//点击变色,注意：因为有隔行变色，所以这里必须在触发toggleClass时,remove("alt"). }); </script> <style> body { margin: 0 auto; text-align: center; } ul { width: 500px; margin: 0 auto; text-align:left; list-style: none; border: 1px solid #c2c2c2; border-bottom:none; margin-top: 10px; } li { padding:6px; border-bottom: 1px solid #c2c2c2; } .alt { background:#ecf6fc; /*这行将给所有的li加上背景色*/ } .over { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ } .click{background:yellow;} </style> </head> <body> <ul class="stripe"> <li>隔行变色</li> <li>Name ：Louis</li> <li>E-mail：yltfy2008@gmail.com</li> <li>Q Q：214227707</li> <li>WWW：http://leotheme.cn/</li> <li>……</li> </ul> <ul class="stripe2"> <li>鼠标滑过变色</li> <li>Name ：Louis</li> <li>E-mail：yltfy2008@gmail.com</li> <li>Q Q：214227707</li> <li>WWW：http://leotheme.cn/</li> <li>……</li> </ul> <ul class="stripe3"> <li>点击变色</li> <li>Name ：Louis</li> <li>E-mail：yltfy2008@gmail.com</li> <li>Q Q：214227707</li> <li>WWW：http://leotheme.cn/</li> <li>……</li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

通过这个例子，大家可以很方便得做出评论隔行变色的效果了。

好了，今天就讲这两个实用的例子了。大家可以去试试

上一篇：酷狗推出手机版

下一篇：WordPress“主题壁纸”