<!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;
            width: 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>

jQuery 选择器demo练习的更多相关文章

  1. jquery选择器demo

    大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. 在.NET中使用JQuery 选择器精确提取网页内容

    1. 前言 相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. jQuery-认识JQuery，jQuery选择器

    认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...

  5. jQuery 选择器 （基础恶补)

    jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  6. [JS] jQuery选择器

    jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id=lastname 的元素 .class $(& ...

  7. jQuery 选择器（转）

    jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元 ...

  8. jQuery 选择器【1】

    jQuery 选择器 请使用我们的 jQuery 选择器检测器 来演示不同的选择器. 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname&q ...

  9. JavaScript（15）jQuery 选择器

    jQuery 选择器 选择器同意对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器同意通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器同意对 ...

随机推荐

  1. 创建 Pull Request

    Pull Request 是开发者使用 GitHub 进行协作的利器.这个功能为用户提供了友好的页面,让提议的更改在并入官方项目之前,可以得到充分的讨论. 最简单地来说,Pull Request 是一 ...

  2. MySQL绿色版安装整套流程

    https://www.cnblogs.com/LiuChunfu/p/6426918.html

  3. Shell-cat url-list.txt | xargs wget -c

    假如你有一个文件包含了很多你希望下载的 URL,你能够使用 xargs下载所有链接: cat url-list.txt | xargs wget -c

  4. CentOS6.6 双网卡双网关配置

    1.需求: 内网IP:10.63.215.7 网关:10.63.215.254 外网IP:180.168.29.92 网关:180.168.29.89 内外网均可以Ping通,可直接访问 2.IP配置 ...

  5. linux syscall 详解【转】

    转自:https://blog.csdn.net/feixin620/article/details/78416560 引言:分析Android源码的过程中,要想从上至下完全明白一行代码,往往涉及ap ...

  6. Linux网络底层收发探究【转】

    转自:https://blog.csdn.net/davion_zhang/article/details/51536807 本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  7. liunx之Centos6.8杀毒软件的安装

    作者:邓聪聪 为了防止服务器中病毒,安装了类似与Windowns的杀毒软件Clanav,过程如下 首先下载clamav的软件包,官方下载地址为http://www.clamav.net/downloa ...

  8. LSH(Locality Sensitive Hashing)原理与实现

    原文地址:https://blog.csdn.net/guoziqing506/article/details/53019049 LSH(Locality Sensitive Hashing)翻译成中 ...

  9. Unity-Rigidbody碰撞穿透

    首先,说说碰撞的条件:1.rigidbody(刚体),一般用在主动移动的物体上,比如角色.2.collider,碰撞器,一般用于受力物体上,比如障碍块. 发生概率即触发方式: 1.刚体速度足够快,被撞 ...

  10. csrfguard3.1 部署笔记

    1:git clone 导入csrfguard 2:点击菜单栏View->Tool  Windows->Maven projects 3:Lifecycle clean build 4:t ...