<!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. CentOS 7 配置Maven

    https://blog.csdn.net/wangyang163wy/article/details/75530872 CentOS 7 配置MavenMaven是一个高效的软件项目管理工具,通过M ...

  2. Spotlight LGWR1 一直告警

    http://www.itpub.net/thread-1181372-1-1.html

  3. LeetCode Two Add Two Numbers （JAVA）

    问题简介:输入两个数字链表,输出求和后的链表(链表由数字位数倒序组成) 问题详解: 给定两个非空链表,表示两个非负整数. 数字以相反的顺序存储,每个节点包含一位数字.对两个整数作求和运算,将结果倒序作 ...

  4. BurpSuite使用笔记

    参考:Burp Suite 实战指南 Proxy模块 options--> add 设置监听地址,端口 binding 如果是作为本地浏览器代理默认(127.0.0.1:8080)就可以了. 如 ...

  5. CF1099F Cookies

    题目地址:CF1099F Cookies 树形dp套树形数据结构 对每个节点 \(i\) ,分两步进行: 1.令 \(f_i\) 为Mitya在节点 \(i\) 停止游戏最多可以吃到多少块饼干 我们可 ...

  6. 【转】模块（configparser+shutil+logging)

    [转]模块(configparser+shutil+logging) 一.configparser模块 1.模块介绍 configparser用于处理特定格式的文件,其本质上是利用open来操作文件. ...

  7. Python运维开发基础03-语法基础 【转】

    上节作业回顾(讲解+温习60分钟) #!/usr/bin/env python3 # -*- coding:utf-8 -*- # author:Mr.chen #只用变量和字符串+循环实现“用户登陆 ...

  8. VS2015 发布常见问题

    1. 发布时预编译 所示如下: 遇到的问题 使用abp时引用了System.Collections.Immutable.dll,但是项目编译一直出错, 排查: 查看项目引用,可看到System.Col ...

  9. hibernate框架学习之数据查询（本地SQL）

    本地SQL查询方式 lHibernate框架支持使用原生态SQL语句进行操作数据库 l查询对象SQLQuery由Session获取 •SQLQuery sq = s.createSQLQuery(&q ...

  10. <TCP/IP>记一次关于IP地址和MAC物理地址的思考

    是的,从3月6日第一次上计算机网络课起,我还是今天第一次对这本书里讲的知识点有了自己的疑问..之前看书就是 嗯嗯这好像很有道理,嗯嗯也许再多看几章就知道它在讲什么了.. 不过今天已经自学到了网络层了, ...