<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

 <link rel="stylesheet" type="text/css" href="css/default.css" />

<!-- 引入jQuery -->

<script src="../../scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

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

    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();                            //  隐藏$category

                $(this).find('span')

                    .css("background","url(img/down.gif) no-repeat 0 0")

                    .text("显示全部品牌");                  //改变背景图片和文本

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

          }else{

                $category.show();                            //  显示$category

                $(this).find('span')

                    .css("background","url(img/up.gif) no-repeat 0 0")

                    .text("精简显示品牌");                  //改变背景图片和文本

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

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

          }

        return false;                              //超链接不跳转

    })

})

</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>(20808) </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>

</body>

</html>

第2章 jQuery选择器的更多相关文章

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

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

  2. 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

  3. 第二章 jQuery选择器

    选择器是行为与文档内容之间的纽带,其目的是能轻松的找到文档中的元素. jQuery中的选择器继承了CSS的风格.利用jQuery选择器,可以非常便捷快速地找出特定的DOM元素,然后给它们添加相应的行为 ...

  4. JQuery制作网页—— 第六章 jQuery选择器

    1.jQuery选择器:jQuery选择器类似于CSS选择器,用来选取网页中的元素.       Eg:$("h3").css("background",&qu ...

  5. 第1章jquery选择器

    一.jquery等价于$ jquery选择器继承了css选择器的风格. $("#ID")代替了document.getElementById()函数,即通过id获取元素. $(&q ...

  6. 第六章 jQuery选择器

    jQuery选择器概述: 选择器jQuery基础,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器. 什么是jQuery选择器: jQuery选择器拥有良好的浏览器兼容性,不用使用 ...

  7. 第四章:JQuery选择器

    一.使用选择器的目的 从页面上的万万千千个元素中选择自己需要的. 二.选择器的分类 1.基本选择器 *:标签 *:类 *:ID 交集  AB   AB共同的部分    并集  A,B  AB使用相同的 ...

  8. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  9. 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器

    <锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...

随机推荐

  1. VC添加文件到工程出错问题--FileTool.dll

    原文:http://blog.csdn.net/bingdianlanxin/article/details/45112737 在我们的软件开发中,经常需要导入其他文件到我们的工程. 一般,我们会选择 ...

  2. 用C语言指针作为函数返回值

    转载:http://c.biancheng.net/cpp/html/3242.html C语言允许函数的返回值是一个指针(地址),我们将这样的函数称为指针函数.下面的例子定义了一个函数 strlon ...

  3. 通过JavaScript创建Qml对象

    有两种方法可以创建,都是全局对象Qt提供的方法 一:用Qt.createComponent加载一个qml文件并创建Component 二:用Qt.createQmlObject从一个qml字符串创建C ...

  4. 【Leetcode】【Medium】Gas Station

    There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...

  5. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  6. Cache及(HttpRuntime.Cache与HttpContext.Current.Cache)

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/avon520/archive/2009/11/25/4872704.aspx .NET中Cache有两种调用方式:Ht ...

  7. Go语言（二） 继承和重载

    继承 package main import "fmt" type Skills []string type person struct { name string age int ...

  8. 双十一问题：kafka消费能力低下原因思考

    抛去cpu.内存等机器原因,在每个分区皆分配一个进程消费的情况下,利用扩机器来提高kafka消费速率已无能为力 此时发现,在实际洪峰时段的消费速率元达不到先前压测时的消费速率 原因思考: 1.洪峰时段 ...

  9. [零基础学JAVA]Java SE基础部分-01. Java发展及JDK配置

    转自:http://redking.blog.51cto.com/27212/114976 重点要会以下两个方面: 1. 抽象类与接口 2. API==>类集 这是两个最重要部分,这两个部分理解 ...

  10. Java使用iText生成word文件的完美解决方案（亲测可行）

    JAVA生成WORD文件的方法目前有以下种: 一种是jacob 但是局限于windows平台 往往许多JAVA程序运行于其他操作系统 在此不讨论该方案 一种是pio但是他的excel处理很程序 wor ...