<!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. 改Chrome的User Agent,移动版网络

    理论上访问手机版或者iPad等平板电脑版的网络,应该可以剩些流量的,毕竟移动网络是经过优化压缩的,但是PC电脑如果访问移动版的网站呢?我主要使用的浏览器是Chrome,这几天也找了下Chrome下的修 ...

  2. java基础必备单词讲解 day five

    Rectangle width high height area employee tool param version author math guess resources 之前单词复习 path ...

  3. HJ浇花

    题目描述 HJ养了很多花(99999999999999999999999999999999999盆),并且喜欢把它们排成一排,编号0~999999999999999999999999999999999 ...

  4. h5页面苹果端浮动问题

    最近在开发一个h5的app端,前端同事写好页面,我们后端java动态化页面,测试的时候发现安卓端什么浏览器都正常如下图1,可是苹果端无论什么浏览器都出现了底部菜单缺少了两个下图2图一:正常显示 图2, ...

  5. jQuery-laye插件实现 弹框编辑，异步验证，form验证提交

    代码中用到了 jQuery的ajax异步处理,each()循环,submit()页面验证提交form表单,prepend()追加标签,laye插件的弹框效果(如有其它弹框效果可参考官网:http:// ...

  6. php 利用composer引用第三方类库构建项目

    经常看到各种开源库推荐使用 composer 安装代码,却总是看不懂怎么用composer, 这几天静下心来学习了composer的使用,发现这可真是一个好东西,先贴上一个讲的很棒的视频教程: PHP ...

  7. 查找并绘制轮廓 opencv

    findContours(): 第二个参数为一个检测到的轮廓,函数调用后的运算结果都放在这里,每个轮廓存储为1个点向量,用point类型的vector表示. 第三个参数表示轮廓数量,包含了许多元素.每 ...

  8. python几个复习例子

    1.实现1-100的所有的和,程序代码如下: sum = 0 for i in xrange(1,101): sum +=i print (sum) 程序运行结果: 2.实现1-500所有奇数的和,程 ...

  9. convlstm学习资料

    https://guanfuchen.github.io/post/markdown_blog_ws/markdown_blog_2017_11/convolutional_lstm_network_ ...

  10. @property后面可以有哪些修饰符？

    原子性---nonatomic特质 如果不写默认情况为atomic(系统会自动加上同步锁,影响性能) 在iOS开发中尽量指定为nonatomic,这样有助于提高程序的性能 读/写权限---readwr ...