jquery选择器练习demo

最新推荐文章于 2022-06-29 16:26:03 发布

weixin_30678349

最新推荐文章于 2022-06-29 16:26:03 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hu-bo/p/6548744.html

本文介绍了一个使用jQuery选择器实现品牌列表精简与展开效果的案例。通过jQuery选择器定位特定元素，并结合事件处理函数实现品牌项的显示与隐藏。同时，通过修改样式达到视觉上的精简或展开。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery选择器综合案例</title>

<link rel="stylesheet" type="text/css" href="../fenglijquery/css/goodName.css">
</head>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   //第一步从第七条开始隐藏后面的品牌 (除最后一个除外)
   var $category=$("ul li:gt(5):not(:last)");//ul标签中的索引大于5中的元素不是最后一个
   $category.hide("slow");
   //当用户显示全部获取按钮对象
   var $toggleBtn=$("div.showmore > a")//标签样式为showmore的div元素的子元素a标签
   $toggleBtn.click(function(event){
       //判断是否为显示
       if($category.is(":visible")){
           $category.hide();
           $(this).find("span")
                    .css("background","url(img/down.gif)no-repeat 0 0")
                    .text("显示全部品牌");
           //去掉高亮显示
           $("ul li").removeClass("promoted");

       }else{

           $category.show();
           //将显示的全部品牌更改为显示精简品牌 $(this)其实也就是$toggleBtn
           //find()是对子集进行操作 filter是对自身元素集合进行操作
           $(this).find('span')
                    .css("background","url(img/up.gif) no-repeat 0 0")
                    .text("精简显示品牌");//正在处理的元素的后代元素的好方法。也就是a标签中span元素
                    //进行高亮显示
              $("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
                        .addClass("promoted")//添加高亮显示样式
       }
       // event.preventDefault();

             return false   //连接不跳转让浏览器认为用户没有点击此链接
         })
});
//上面我们是添加了if判断来处理一个按钮上的交互事件但是jquery中海油更简单的处理方式
$toggleBtn.toggle(function(){
   //显示元素
},function(){
   //隐藏元素
})

</script>


<body>

<p>精简：</p>
<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>