<!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. tomcat.apache startup.bat闪退两种解决方法

    tomcat bin文件夹中的startup.bat闪退原因及解决方法两种 方法一:在启动tomcat时闪退,重新检查java的jre运行环境.如果环境变量忘记配置一定会导致了tomcat的闪退. 追 ...

  2. Vue 前端md5加密

    用户注册时将加密后的密码发送给后端存储 当登陆的时候,再将加密后的密码和数据库中加密的密码相匹配. npm: https://www.npmjs.com/package/crypto-browseri ...

  3. 总结JavaScript常用数组操作方法，包含ES6方法

    一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...

  4. 基础篇（1）：c++程序基本结构

    本人是初中生,原用Pascal语言,现转c++,所以写几篇博客,分享一下. 补一句,我是一边转c++一边写博客,所以可能会有错误,望过路大神能指出. 参考书籍:<信息学奥赛一本通>< ...

  5. yarn 无法下载node-sass

    指定node-sass的下载源 yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

  6. java基础不牢固容易踩的坑

    java基础不牢固容易踩的坑 经过一年java后端代码以及对jdk源码阅读之后的总结,对java中一些基础中的容易忽略的东西写下来,给偏爱技术热爱开源的Coder们分享一下,避免在写代码中误入雷区. ...

  7. 关于 cmd 控制台默认代码页编码的几种方法

    造成的中文及特殊字符乱码. 第一种:临时性修改编码 使用 chcp 命令,例如 chcp 65001 ,这回将当前代码页变为 utf-8编码,不过这种方式在关闭 cmd 之后会自动失效. 常用的编码及 ...

  8. Python学习-django-Model操作

    Django之Model操作   一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bi ...

  9. python3 练习题100例 （十六）鸡尾酒疗法

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = 'Fan Lijun' n = input('请输入一个大于1,小于等于20的整 ...

  10. Numpy数据存取与函数

    数据的CSV文件存取 多维数据的存取 NumPy的随机数函数 NumPy的统计函数 NumPy的梯度函数