<!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. leetcode327 Count of Range Sum

    问题描述: 给定一个整数数组nums,返回其所有落在[low, upper]范围内(包含边界)的区间和的数目. 区间和sums(i, j)的定义为所有下标为i到j之间(i ≤ j)的元素的和,包含边界 ...

  2. python3+selenium框架设计06-编写POM测试用例

    之前我们已经把测试基类,配置文件操作,浏览器引擎类封装完成.接下来使用POM的设计思路来创建我们的测试用例.接下来看一个实例,先在项目下新建pageobject文件夹.这个文件夹下放所有要测试的页面类 ...

  3. QT中定时器

    目前涉及到的主要有两种: 1.每隔一段时间执行 QTimer *timer = new QTimer(this); connect(timer, SIGNAL(timeout()), this, SL ...

  4. python学习第39天

    # 数据操作 # 增 # 删 # 改 # 查 # 单表查询 # 多表查询

  5. Laravel 5.2数据库--迁移migration

    Laravel中的migrations文件存放的是数据库表文件等结构,可以说是一个跟git差不多的,可以说像是数据库的版本控制器,所以可以叫做迁移.因为它可以很快速的很容易地构建应用的数据库表结构. ...

  6. Oracle 网络监听配置管理

    Oracle 网络配置与管理 详细信息可以参考以下信息: [学习目标] 一.原理解析 二.配置侦听器(LISTENER) 三.配置客户端网络服务名 四.关于注册 五.查询某服务是静态还是动态注册 Or ...

  7. Windows 批处理大全（附各种实例）

    Windows 批处理大全(附各种实例) 2009年07月19日 21:31:00 阅读数:2552 批处理文件是无格式的文本文件,它包含一条或多条命令.它的文件扩展名为 .bat 或 .cmd.在命 ...

  8. Confluence 6 开始使用

    欢迎来到 Confluence 的开始使用指南文档.在这个稳定中,你将会找到有关对 Confluence 进行评估的指南和其他的一些有用的内容.当你开始使用 Confluence 的时候,这些信息能够 ...

  9. Confluence 6 数据库字符集编码和问题

    数据库字符集编码 你的数据库和 JDBC 数据源连接必须配置为使用 UTF-8 编码(或者根据你配置的数据库来制定正确的 UTF-8 编码字符集,例如在 Oracle 中使用的是 AL32UTF8 ) ...

  10. Confluence 6 查看索引和提示

    查看索引 Confluence 使用被称为 Lucene 的搜索引擎.如果你希望在你的 Confluence站点中查看更多有关索引的细节,你可以下载并且运行 Luke.Luke 是一个开发和诊断工具, ...