<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>demo</title> <script src="./scripts/jquery-1.9.1.js"></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>(20800)</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> <script> //$(document).ready(function(){}); === $().ready(function(){}); === $(function(){}); $(function () { //等待DOM加载完毕 //从第7条开始隐藏后面的品牌（最后一条“其他品牌相机”除外） 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(); $(this).find('span') //.css("background","url(./images/003.jpg) no-repeat 0 0") .css("background","#ccc") .text("显示全部品牌"); $('ul li').removeClass("promoted");//去掉高亮样式 }else{ $category.show(); $(this).find('span') //.css("background","url(./images/002.jpg) no-repeat 0 0") .css("background","#0f0") .text("精简显示品牌"); $("ul li") .filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") .addClass("promoted");//添加高亮样式 } return false;//此语句让浏览器认为用户没有单击该链接，从而阻止该超链接跳转 }); }); </script> </body> </html>
上面代码中用到的几个jQuery方法的意思是：
- show():显示隐藏的匹配元素；
- css(name,value):给元素设置方式；
- text(string):设置所有匹配元素的文本内容；
- filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。注意区分filter()与find()方法。
find()方法会在元素内寻找匹配元素，是对它的子集操作；
filter()则是筛选元素，是对自身集合元素进行筛选。 - addClass(className):为匹配的元素添加指定的类名，而removeClass()是从匹配的元素中删除指定的类。
- :contains(text)，选取含有文本内容为"text"的元素。
[参考文献]
- 单东林,张晓菲. 锋利的jQuery(第二版).