<!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. C#浏览器中在线操作文档

    源码地址:https://github.com/SeaLee02/FunctionModule   文件夹 UploadFiles/WebDemo/COM/OnlineEdit.aspx 就是源码 用 ...

  2. 4.Spring Cloud初相识--------Feign负载均衡

    前言: 在上一节里,我们学习了ribbon的使用. 我们了解到ribbon是一个客户端负载均衡机制. 而我们今天要讲的Feign呢,也是一款客户端负载均衡机制. 或者这样说,Feign封装了ribbo ...

  3. android动画解析（初级）

    效果图: ObjectAnimator继承自ValueAnimator的,底层的动画实现机制也是基于ValueAnimator来完成的,因此ValueAnimator仍然是整个属性动画当中最核心的一个 ...

  4. Mac中Mysql开启远程访问（不同于linux直接改配置文件）

    在mac中安装Mysql Workbench 用root用户连上安装的Mysql.  开启远程访问的服务 如下图可以看到是root用户绑定的是localhost  如果不做修改的话,直接访问是访问不了 ...

  5. php 变量的8类类型

    整形,布尔,浮点形,字符串,数组,资源,对象和null php数据类型之查看和判断数据类型 php数据类型之自动转换和强制转换

  6. 改进的平台设备驱动——dev和drv完全分离

    这是平台设备: 1 #include <linux/fs.h> #include <linux/init.h> #include <linux/delay.h> # ...

  7. python 函数 闭包 （节省内存空间 html 获取网页的源码）

    #闭包:嵌套函数,内部函数调用外部函数的变量 # def outer(): # a = 1 # def inner(): # print(a) # inner() # outer() def oute ...

  8. B1008 数组元素循环右移问题 （20分）

    B1008 数组元素循环右移问题 (20分) 思路 1 2 3 4 5 6 5 6 1 2 3 4 6个数,循环右移2位. 也可以理解为 先翻转 6 5 4 3 2 1 然后再两部分,分别翻转 5 6 ...

  9. 统计输入任意的字符中中英文字母，空格和其他字符的个数 python

    这里用到了三个函数: #判断是否为数字:str.isdigit()#是否为字母:str.isalpha()#是否为空格:str.isspace() def tongji(str): alpha = 0 ...

  10. Ubuntu14.0.4系统如何获取root权限

    Ubuntu14.0.4系统如何获取root权限 | 浏览:9684 | 更新:2014-08-21 10:38 7 分步阅读 本文主要讲解如何简单实用命令获取root权限 工具/原料 Ubuntu1 ...