<!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. Spring返回json数据

    第一种形式:使用注解@ResponseBody @RequestMapping(value = "/admin/jq", method = RequestMethod.GET) @ ...

  2. QML Delegate中访问该持有者的方式 附加属性（转载）

    http://blog.csdn.net/yuxiaohen/article/details/17226971   用法很奇葩记录一下,实测可以,用于弱化delegate与持有者的依赖 delegat ...

  3. 如何为Android平台编译 opencv3 和 opencv_contrib (Linux)

    编译出来的opencv库有问题,正在调试中 ...... 本文以编译opencv 3.3.0 和 opencv_contrib 3.3.0为例,系统为 Linux x64 (Fedora 21),具体 ...

  4. jq扩展

    方法一(不常用)$.myjq = function(){alert("hello myjQuery);}方法二声明:$.fn.myjq=function(){$(this).text(&qu ...

  5. 【Leetcode】【Easy】Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  6. linux下查看数据库版本的5中方法

    1.在Linux终端窗口中,输入mysql -V查看MySQL版本信息[sky@qin ~]# mysql -Vmysql  Ver 14.14 Distrib 5.1.29-rc, for pc-l ...

  7. Nginx能干啥?

    Nginx能干的事很多,很强大.官方文档详见点我. Nginx的命令行参数 -? | -h 打印帮助信息 -c file 读取指定配置文件,而不是默认的nginx.conf -g directives ...

  8. yii2.0中解决post的400错误

    不想用gii的表单自己写表单,但是又遇到了400错误,怎么解决?下面为你解答一下:

  9. January 19 2017 Week 3 Thursday

    What a man needs most is appreciated. 人性最深切的需求就是渴望别人的赞赏. Being appreciated by others is very importa ...

  10. 08提权 系统文件权限和远程连接IP绕过 安装后门

    大家都知道08权限的系统权限设置很严格  面对限制IP连接的情况 我们及时拿到system权限 有账号也上不去这种情况下只能弄shift后门 或者放大镜了  但08权限 在system权限也操作不了系 ...