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(){    //隐藏元素});<br><br>