<!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. Flask三种导入配置文件的方式

    # 配置对象,里面定义需要给 APP 添加的一系列配置 class Config(object): DEBUG = True # 从配置对象中加载配置 app.config.from_object(C ...

  2. linux 权限管理

  3. 51NOD 数字1的数量

    题目描述: 给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个数. 例如:n = 12,包含了5个1.1,10,12共包含3个1,11包含2个1,总共5个1. Input ...

  4. Markdown超链接及脚注

    Markdown链接及脚注 [时间:2017-02] [状态:Open] [关键词:markdown,标记语言,页内链接,超链接,脚注] 本文内容来自Markdown 11种基本语法,仅对其中我不熟悉 ...

  5. FlowNet2.0 安装指南

     \(安装环境: \color{red}{Ubuntu16.04 + CUDA8.0 + cuDNN5.0}\) 安装 CUDA CUDA 安装准备 CUDA 官方安装文档 首先查看是否电脑具有支持 ...

  6. Java序列化Serializable

    1.什么是序列化和反序列化 Serialization(序列化)是一种将对象以一连串的字节描述的过程:deserialization(反序列化)是一种将这些字节重建成一个对象的过程. 2.什么情况下需 ...

  7. Lyk Love painting/convex hull/mumsic

    这场比赛真的是...打的好颓废啊... 所有题面的传送门 T1 分析: 我们发现 二分答案 + \(n^3\) \(dp\) 判断可行性 可以拿 60 分(于是就写好了啊!) 然后我们发现上面的 \( ...

  8. node ，npm和nvm 版本的管理

    node npm :node 的包管理 nvm :node 的版本管理 node -v ---->查看node 的版本  (v---->version) npm -v ----->n ...

  9. js 测试性能

    console.time('querySelector');for(var i=0; i<1000; i++){document.querySelector('body');}console.t ...

  10. Linux 安装Python和Django

    1.下载python源码包 网址: https://www.python.org/ 在Downloads中打开Source code 由于 Django1.11.15不兼容3.7版本的python 所 ...