Jquery选择器练习产品筛选

 1 <!doctype html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8"/>
 5     <title>Jquery选择器练习产品筛选</title>
 6     <style>
 7       ul{
 8           width: 500px;
 9           height: 200px;
10           border: 1px solid #ccc;
11       }
12       ul li{
13           width: 100px;
14           margin: 10px;
15           border:1px solid #ccc;
16           text-align: center;
17           float: left;
18           list-style:none;
19 
20       }
21       .contains{
22           color: red;
23       }
24       .show{
25           width: 500px;
26           height: 50px;
27       }
28       .show span{
29           margin-left:200px;
30           background-color: #ccc;
31           padding: 5px;
32       }
33 
34     </style>
35     <script src="jquery-1.10.2.min.js" type="text/javascript">
36     </script>
37     <script>
38       $(document).ready(
39           function(){
40           var $btn=$(".show span");
41           var $categroy=$("ul li:gt(5):not(:last)");/*:gt(5)获取索引值大于5的元素而且不是最后一个元素*/
42           $categroy.hide();
43            $btn.click(function(){
44               if($categroy.is(":visible")){ /*如果categroy的值为显示时*/
45                   $categroy.hide();
46                   $("ul li").removeClass("contains");
47                   $btn.text("显示所有产品");
48                   
49               }
50               else{                        
51                   $categroy.show();
52                   $("ul li").filter(":contains('佳能'),:contains('索尼')").addClass("contains"); /*filter(":内容")筛选索引中包含内容值相等的元素*/
53                   $btn.text("精选产品");/*修改btn的文本内容*/
54                   return false;  /*超链接不跳转*/
55               }
56            });
57       });
58        
59     </script>
60   </head> 
61   <body>
62      <ul>
63          <li>佳能</li>
64          <li>索尼</li>
65          <li>尼康</li>
66          <li>富士</li>
67          <li>爱国者</li>
68          <li>松下</li>
69          <li>柯达</li>
70          <li>三星</li>
71          <li>宾得</li>
72          <li>柯达</li>
73          <li>三星</li>
74          <li>宾得</li>
75 
76 
77          <li>其他品牌</li>
78 
79      </ul>
80      <div class="show">
81        <span>显示全部品牌</span>
82      </div>
83        
84   </body>
85 </html>
效果
Jquery选择器练习产品筛选
佳能
索尼
尼康
富士
爱国者
松下
柯达
三星
宾得
柯达
三星
宾得
其他品牌
显示全部品牌
if you don't try,you will never know!