jQuery 学习笔记之五 (jQuery 案例)
案例研究 1. 用户进入该页面时,品牌列表默认是精简显示的(即不完整的品牌列表)。 2. 用户可以单击商品列表下方的"显示全部品牌"按钮来显示全部的品牌。 单击"显示全部品牌"按钮的同时,列表会将推荐的品牌的名字高亮显示,按钮里德文字也换成了"精简显示品牌"。 <!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=utf-8" /> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body {font-size:12px;text-align:center;} a { color:#04D; text-decoration:none;} a:hover { color:#F50; text-decoration:underline;} .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} .SubCategoryBox ul { list-style:none;} .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;} .showmore { clear:both; text-align:center;padding-top:10px;} .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} .promoted a { color:#F50;} </style> <!-- 引入jQuery --> <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 等待DOM加载完毕. var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条) $category.hide(); // 隐藏上面获取到的jQuery对象。 var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮 $toggleBtn.click(function(){ if($category.is(":visible")){ $category.hide(); // 隐藏$category $('.showmore a span') .css("background","url(img/down.gif) no-repeat 0 0") .text("显示全部品牌"); //改变背景图片和文本 $('ul li').removeClass("promoted"); // 去掉高亮样式 }else{ $category.show(); // 显示$category $('.showmore a span') .css("background","url(img/up.gif) no-repeat 0 0") .text("精简显示品牌"); //改变背景图片和文本 $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") .addClass("promoted"); //添加高亮样式 } return false; //超链接不跳转 }) }) </script> </head> <body> <div class="SubCategoryBox"> <ul> <li ><a href="#">佳能</a><i>(30440) </i></li> <li ><a href="#">索尼</a><i>(27220) </i></li> <li ><a href="#">三星</a><i>(20808) </i></li> <li ><a href="#">尼康</a><i>(17821) </i></li> <li ><a href="#">松下</a><i>(12289) </i></li> <li ><a href="#">卡西欧</a><i>(8242) </i></li> <li ><a href="#">富士</a><i>(14894) </i></li> <li ><a href="#">柯达</a><i>(9520) </i></li> <li ><a href="#">宾得</a><i>(2195) </i></li> <li ><a href="#">理光</a><i>(4114) </i></li> <li ><a href="#">奥林巴斯</a><i>(12205) </i></li> <li ><a href="#">明基</a><i>(1466) </i></li> <li ><a href="#">爱国者</a><i>(3091) </i></li> <li ><a href="#">其它品牌相机</a><i>(7275) </i></li> </ul> <div class="showmore"> <a href="more.html"><span>显示全部品牌</span></a> </div> </div> </body> </html> (1)从第7条开始隐藏后面的品牌(最后一条"其它品牌机箱"除外)。 (2)当用户单击"显示全部品牌"按钮时,将执行以下操作。 1.显示隐藏的品牌。 2."显示全部品牌"按钮文本切换成"精简显示品牌"。 3. 高亮推荐品牌。 (3)当用户单击"精简显示品牌'按钮时,将执行以下操作。 1.从第5条开始隐藏后面的品牌(最后一条"其他品牌相机"除外)。 2.精简显示品牌 按钮文本切换为 "显示全部品牌" 3.去掉高亮显示的推荐品牌。 (4)循环进行(2)步和第(3)步 下面逐步来完成以上的效果。 (1)从第5条开始隐藏后面的品牌(最后一条"其他品牌相机"除外)。 var $category = $('ul li:gt(5):not(:last)'); $category.hide(); //隐藏上面获到的jQuery对象 $(ul li:gt(5):not(:last))的意思是先后去<ul>元素下索引值大于5的<li>元素的集合元素, 然后去掉集合元素中的最后一个元素。这样,既可将从第7条开始至倒数第2条的所有品牌都获取到。 最后通过hide()方法隐藏这些元素。 (2)当用户单击"显示全部品牌"按钮时,执行以下操作,首先获取到按钮,代码如下: var $togglebtn = $('div.showmore>a');//获取 "显示全部品牌" 按钮 然后给按钮添加事件,使用show()方法吧隐藏的品牌列表显示出来。 $toggleBtn=$('div.showmore>a');//获取"显示全部品牌" 按钮 然后给按钮添加事件,使用show() 方法把隐藏的品牌列表显示出来 $toggleBtn.click(function(){ $category.show(); return false; }); 由于给超链接添加onclick事件,因此需要使用 "return false" 语句让浏览器认为用户没有点击该超级链接,从而阻止该超级链接跳转,之后,需要将"显示全部品牌"按钮文本切换成"精简显示品牌" $(".showmore a span") .css("background","url(img/up.gif) no-repeat 0 0 ") .text("精简显示品牌"); 这里完成了两部操作,即把按钮的背景色的图片换为向上的图片,同时也改变了按钮文本内容,将其替换为"精简显示品牌"。 $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") .addClass("promoted"); //添加高亮样式 使用filter()方法筛选出符合要求的品牌,然后为他们添加promoted样式。在这里推荐了3个品牌。 $(function(){ //等待Dom加载完毕 var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条); $category.hide(); //隐藏上面获取到的jQuery对象 var $toggleBtn = $('div.showmore>a'); $toggleBtn.click(function(){ $category.show(); $('.showmore a span') .css("background","url(img/up.gif) no-repeat 0 0") .text("精简显示品牌"); $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") .addClass("promoted"); return false; }) });
在jQuery中有一个方法更适合上面的情况,它能给一个按钮加一组交互事件,而不需要像上例一样去判断,上列的代码如下:
toggleBtn.click(function(){
if($category.is(":visible")){
//代码隐藏 code
}else{
//元素显示 code
}});
如果改为toggle()方法,代码则可以直接写成以下形式:
$toggleBtn.toggle(function(){
//toggle()方法用来交替一组动作 //显示元素
},function(){
//隐藏元素
});
出处:http://www.cnblogs.com/liuyong/
作者喜欢研究 Sql Server ,ASP.NET MVC , Jquery WCF 等技术,同时关心分布式架构的设计应用。转载请保留原文链接,谢谢!