jQuery选择器案例

来源：互联网发布：ff14龙男捏脸数据身高编辑：程序博客网时间：2024/05/16 14:17

jQuery运用选择器简单案例（练习来自《锋利的jQuery》一书）：

HTML代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery1.12.3.js"></script><script type="text/javascript" src="stromae.js"></script><link rel="stylesheet" href="style.css" /></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>

CSS代码如下：

/*全局样式设置*/  *{  margin:0px;  padding:0px;  }   ul,li{      list-style:none;  }      a:link,a:visited {      color:#3399FF;      text-decoration:none;  }  a:hover {      color:red;      text-decoration:underline;  }  body {  width:600px;      margin:50px auto;      font-size:14px;  }  /*具体设置*/ul li {float: left;display: block;/*border: 1px red solid;*/line-height: 20px;width: 200px;text-align: center;}.showmore {clear: both;padding: 10px;}.showmore a {display: block;width: 120px;text-align: center;margin: 0 auto;line-height: 24px;border: 1px solid gray;}.showmore a span {background: url(img/down.gif) no-repeat 0 50%;padding-left: 15px;}.promoted a {color: orangered;}

jQuery代码如下：

$(function(){/* 1、隐藏从第7条至倒数第二条 2、用户单击“显示全部品牌”按钮时，将执行下面操作： (1)显示全部品牌； (2)高亮显示推荐品牌； (3)按钮文本切换成“精简显示品牌” 3、用户点击“精简显示品牌”按钮时，将执行以下操作： (1)显示全部品牌 (2)取消高亮的推荐品牌 (3)按钮文本切换成“显示全部品牌” 4、循环2和3步 *///1、隐藏第7条至倒数第二条var $hidCategory = $("ul li:gt(5):not(:last)");$hidCategory.hide();var $showCategory = $("div.showmore >a");$showCategory.click(function(){if($hidCategory.is(":hidden")){//2.1、用户点击“显示全部品牌”按钮时，显示全部品牌：$hidCategory.show();//2.2高亮显示推荐品牌$("ul li").filter(":contains(佳能),:contains(尼康),:contains(奥林巴斯)").addClass("promoted");//2.3按钮文本切换成“精简显示品牌”$(this).find("span").css("background","url(img/up.gif) no-repeat 0 50%").text("显示精简品牌");}else{//3.1用户点击“显示精简版本”按钮时，隐藏部分品牌：$hidCategory.hide();    //3.2取消高亮的推荐品牌$("ul li").removeClass("promoted");//3.3按钮文本切换成“显示全部品牌”$(this).find("span").css("background","url(img/down.gif) no-repeat 0 50%").text("显示全部品牌");}return false;//超链接不跳转});});

显示效果：

精简显示：

全部显示：

两张小图：

0 0