jQuery 学习笔记之五 (jQuery 案例)
2011-03-07 20:46
363 查看
案例研究
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(){//隐藏元素
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- python 学习笔记十四 jQuery案例详解（进阶篇）
- jquery 学习笔记
- Linux学习笔记——例说makefile 综合案例
- JQuery学习笔记（六）
- jQuery学习笔记（7）——AJAX
- jquery源码学习笔记一：总体结构
- 电商平台学习笔记（八）——面向接口编程案例分析
- jQuery学习笔记之入门
- jQuery 学习笔记 之二 附： jQuery入门指南教程列表
- Hadoop-HBASE案例分析-Hadoop学习笔记<二>
- 20151225jquery学习笔记---编辑器插件
- jquery学习笔记(二)
- JQuery学习笔记
- jquery学习笔记 之二 事件与效果
- jQuery源码学习笔记十（改）
- O'REILLY jQuery Mobile 学习笔记1
- 前端学习笔记-jquery-3-jquery对象与dom对象互相转换
- 如何寻找使用案例及其注意事项，学习笔记
- jQuery学习笔记之插件开发（4）
- jQuery学习笔录1（jQuery学习笔记—选择器(1 准备知识)）