<!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. JavaSE 面试题总结

    一. JavaSE 4 1. 面向对象的特征有哪些方面 4 2. String是最基本的数据类型吗? 4 3. super()与this()的区别? 4 4. JAVA的事件委托机制和垃圾回收机制 4 ...

  2. 史上最简单的SpringCloud教程 | 第八篇: 消息总线(Spring Cloud Bus)

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springcloud/2017/07/12/sc08-bus/ 本文出自方志朋的博客 最新Finchley版本请 ...

  3. 知识总结和记录——HTML

    文档结构 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...

  4. 【经典问题】bzoj2957: 楼房重建

    经典问题:动态维护上升子序列长度 进阶问题:[经典问题]#176. 栈 Description 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无 ...

  5. 私有maven库发布及使用流程

    ## 私有maven库发布流程 ### 环境配置 - idea环境下,如果使用内置maven,需要手动生成settings.xml,并关联. - 操作如下 - 生成settings.xml 右键pom ...

  6. spring-开发需要jar包

    需要的开发包 Spring核心开发包: Commons-logging.jar Spring-beans.jar Spring-context.jar Spring-core.jar Spring-e ...

  7. js将人民币数字转大写

    function numberToUpper(money) { var cnNums = new Array("零", "壹", "贰", ...

  8. Centos7 使用LVM进行新加磁盘管理

    centos7使用LVM管理一块新的磁盘   注意!文中凡是带#的都是命令标志.   一些重要概念: LV(Logical Volume)- 逻辑卷, VG(Volumne Group)- 卷组, P ...

  9. scrapy--json(喜马拉雅Fm)

    已经开始听喜马拉雅Fm电台有2个月,听里面的故事,感觉能听到自己,特别是蕊希电台,始于声音,陷于故事,忠于总结.感谢喜马拉雅Fm陪我度过了这2个月,应该是太爱了,然后就开始对Fm下手了.QAQ 该博客 ...

  10. [Bzoj4289]PA2012 Tax（Dijkstra+技巧建图）

    Description 给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价是进入终点的边的边 ...