<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>demo</title>

    <script src="./scripts/jquery-1.9.1.js"></script>

</head>

<body>

<div class="SubCategoryBox">

    <ul>

        <li><a href="#">佳能</a><i>(30440)</i></li>

        <li><a href="#">索尼</a><i>(27220)</i></li>

        <li><a href="#">三星</a><i>(20800)</i></li>

        <li><a href="#">尼康</a><i>(17821)</i></li>

        <li><a href="#">松下</a><i>(12289)</i></li>

        <li><a href="#">卡西欧</a><i>(8242)</i></li>

        <li><a href="#">富士</a><i>(14894)</i></li>

        <li><a href="#">柯达</a><i>(9520)</i></li>

        <li><a href="#">宾得</a><i>(2195)</i></li>

        <li><a href="#">理光</a><i>(4114)</i></li>

        <li><a href="#">奥林巴斯</a><i>(12205)</i></li>

        <li><a href="#">明基</a><i>(1466)</i></li>

        <li><a href="#">爱国者</a><i>(3091)</i></li>

        <li><a href="#">其他品牌相机</a><i>(7275)</i></li>

    </ul>

    <div class="showmore">

        <a href="more.html"><span>显示全部品牌</span></a>

    </div>

</div>

<script>

    //$(document).ready(function(){});  ===  $().ready(function(){});  ===  $(function(){});

    $(function () { //等待DOM加载完毕

        //从第7条开始隐藏后面的品牌（最后一条“其他品牌相机”除外）

        var $category=$("ul li:gt(5):not(:last)");//获得索引值大于5的品牌集集合对象（除最后一条）

        $category.hide();//隐藏上面获取到的jQuery对象

        //当用户单击“显示全部品牌”按钮时

        var $toggleBtn=$("div.showmore > a");

        $toggleBtn.click(function () {

            if($category.is(":visible")){//如果元素显示

                $category.hide();

                $(this).find('span')

                        //.css("background","url(./images/003.jpg) no-repeat 0 0")

                        .css("background","#ccc")

                        .text("显示全部品牌");

                $('ul li').removeClass("promoted");//去掉高亮样式

            }else{

                $category.show();

                $(this).find('span')

                        //.css("background","url(./images/002.jpg) no-repeat 0 0")

                        .css("background","#0f0")

                        .text("精简显示品牌");

                $("ul li")

                        .filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")

                        .addClass("promoted");//添加高亮样式

            }

            return false;//此语句让浏览器认为用户没有单击该链接，从而阻止该超链接跳转

        });

    });

</script>

</body>

</html>
上面代码中用到的几个jQuery方法的意思是：
    1. show():显示隐藏的匹配元素；
    2. css(name,value):给元素设置方式；
    3. text(string):设置所有匹配元素的文本内容；
    4. filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。注意区分filter()与find()方法。
      find()方法会在元素内寻找匹配元素，是对它的子集操作；
      filter()则是筛选元素，是对自身集合元素进行筛选。
    5. addClass(className):为匹配的元素添加指定的类名，而removeClass()是从匹配的元素中删除指定的类。
    6. :contains(text)，选取含有文本内容为"text"的元素。

[参考文献]

  1. 单东林,张晓菲. 锋利的jQuery(第二版).

jQuery选择器示例的更多相关文章

  1. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  2. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

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

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

  4. jquery选择器总结 转自（永远的麦子）

    jQuery选择器总结 阅读目录 1, 基本选择器? 2, 层次选择器? 3, 过滤选择器? 4, 表单选择器? jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器.下 ...

  5. jQuery 选择器 （基础恶补之三)+Ajax

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...

  6. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  7. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...

  8. 第二章（jQuery选择器）

    2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...

  9. WEB入门之十三 jQuery选择器

    学习内容 jQuery层次选择器 jQuery属性选择器 jQuery表单选择器 jQuery过滤选择器 能力目标 熟悉jQuery各种选择器的使用场合 能熟练使用jQuery各种选择器 本章简介 上 ...

随机推荐

  1. bootstarp v3 学习简记

    1.快速设置浮动通过这两个class让页面元素左右浮动. !important被用来避免某些问题. <div class="pull-left">...</div ...

  2. java设计模式——享元模式

    一. 定义与类型 定义:提供了减少对象数量从而改善应用所需的对象结构的方式,运用共享技术有效地支持大量细粒度的对象 类型:结构性 二. 使用场景 (1)  常常应用于系统底层的开发,以便解决系统的性能 ...

  3. Mysql url参数浅析

    驱动包用的是mysql-connector-java-8.0.11.jar 新版的驱动类改成了com.mysql.cj.jdbc.Driver //北京时间东八区 serverTimezone=GMT ...

  4. java基础 final 修饰成员变量 只能赋值一次问题

    final int a; public Fu(){ a=1; }

  5. Onboard,迷人的引导页样式制作库

    简介 Onboard主要用于引导页制作,源码写的相当规范,值得参考. 项目主页: https://github.com/mamaral/Onboard 实例下载: https://github.com ...

  6. BZOJ4008: [HNOI2015]亚瑟王(期望dp)

    Time Limit: 20 Sec  Memory Limit: 512 MBSec  Special JudgeSubmit: 1952  Solved: 1159[Submit][Status] ...

  7. 【杂题总汇】HDU多校赛第十场 Videos

    [HDU2018多校赛第十场]Videos 最后一场比赛也结束了…… +HDU传送门+ ◇ 题目 <简要翻译> 有n个人以及m部电影,每个人都有一个快乐值.每场电影都有它的开始.结束时间和 ...

  8. HashMap的使用

    HashMap的使用 import java.util.HashMap; import java.util.Iterator; //HashMap<key, value>():键值对的形式 ...

  9. OpenLDAP部署目录服务

        文档信息 目        的:搭建一套完整的OpenLDAP系统,实现账号的统一管理.                     1:OpenLDAP服务端的搭建               ...

  10. vue本人常用插件汇总（常更新）

    1. 移动端UI插件 mint-ui http://mint-ui.github.io/#!/zh-cn 2.vue状态管理vuex,持久化插件:vuex-persist https://github ...