zoukankan      html  css  js  c++  java
  • jQuery 选择器demo练习

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>品牌列表案例</title>
    <script src="js/jquery-2.1.1.min.js" rel="script"></script>
    <style>
    ul li{
    list-style: none;
    }
    *{
    text-decoration: none;
    }
    span{
    background: #1a272f;
    color: #fff;
    border:1px solid #647787;
    150px;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    margin: 0 50px;
    }
    .highlighted{
    color: #f00;
    text-decoration: underline;
    }
    </style>
    <script>
    $(document).ready(function () {
    //从列表的索引值大于5开始,但是不包含最后一条记录的所有列表元素隐藏
    var $eategory=$('ul li:gt(5):not(:last)');
    //$eategory.hide();//隐藏上面获取到的jQuery对象
    //当用户点击“显示全部品牌”按钮时,所有列表都显示,且文本变为“精简显示品牌”,同时推荐品牌高亮显示
    // 首先获取按钮,
    var $toggleBtn =$('div.showMore > a');
    //给按钮添加点击事件,且列表全部显示,但是超链接不跳转


    //法一:最中规中矩的做法,但是很麻烦也很呆板,没有交互
    /*$toggleBtn.click(function(){
    $eategory.show();//显示全部列表
    //按钮文本改为精简品牌展示
    $('.showMore a span').text("精简显示品牌");
    //品牌推荐高亮显示
    $('ul li').filter(":contains('demo2'),:contains('demo5'),:contains('demo9')").addClass("highlighted");
    return false;//链接不跳转
    });*/



    //法二:相对法一较为灵活,思路清晰易理解,且用户体验更佳。
    $toggleBtn.click(function(){
    if($eategory.is(":hidden")){ //如果元素隐藏
    $eategory.show();//显示全部列表
    $('.showMore a span').text("精简显示品牌");
    //filter:筛选
    $('ul li').filter(":contains('demo2'),:contains('demo5'),:contains('demo9')").addClass("highlighted");
    }else{
    $eategory.hide();
    $('ul li').removeClass("highlighted");
    $('.showMore a span').text("显示全部品牌");
    }
    return false;//链接不跳转
    });


    })

    </script>
    </head>
    <body>
    <div class=”SubCategoryBox”>
    <ul>
    <li><a href="#">佳能</a><i>(30440)</i></li>
    <li><a href="#">demo1</a><i>(30440)</i></li>
    <li><a href="#">demo2</a><i>(30440)</i></li>
    <li><a href="#">demo3</a><i>(30440)</i></li>
    <li><a href="#">demo4</a><i>(30440)</i></li>
    <li><a href="#">demo5</a><i>(30440)</i></li>
    <li><a href="#">demo6</a><i>(30440)</i></li>
    <li><a href="#">demo7</a><i>(30440)</i></li>
    <li><a href="#">demo8</a><i>(30440)</i></li>
    <li><a href="#">demo9</a><i>(30440)</i></li>
    <li><a href="#">demo10</a><i>(30440)</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>
    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    【面积并】 Atlantis
    【动态前k大 贪心】 Gone Fishing
    【复杂枚举】 library
    【双端队列bfs 网格图建图】拯救大兵瑞恩
    【奇偶传递关系 边带权】 奇偶游戏
    【权值并查集】 supermarket
    CF w4d3 A. Pythagorean Theorem II
    CF w4d2 C. Purification
    CF w4d2 B. Road Construction
    CF w4d2 A. Cakeminator
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/9796891.html
Copyright © 2011-2022 走看看