一、预期效果

实现一个效果，如下。

品牌列表默认精简显示，单击“显示全部品牌”按钮显示全部品牌，同时列表将推荐的品牌的名字高亮显示，按钮里的文字变成“精简显示品牌”。再次点击“精简显示品牌”回到初始页面。

二、实现过程

html结构如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .SubCategoryBox{

            width:800px;

            border:1px solid #ccc;

            overflow: hidden;

            font-size: 16px;

        }

        .SubCategoryBox li{

            float: left;

            width: 240px;

            list-style: none;

        }

        .showmore{

            clear: both;

            text-align: center;

            padding: 5px 0 5px;

        }

        .showmore a{

            display: inline-block;

            border:1px solid green;

            padding:5px;

        }

        .showmore a:hover{

            background-color: light-green;

        }

    </style>

</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>

1、初始状态

页面加载的时候，只显示前5个品牌和最后一个“其他品牌相机”。所以从第6个开始隐藏后面的品牌（最后一条“其它品牌相机”）除外。

jquery库用1.8.3：

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //获取元素

$category.hide(); //隐藏

2、点击“显示全部品牌”，执行以下操作

显示隐藏的品牌。如果浏览器禁用了javascript，就会跳到一个more.html来显示更多信息，否则return false，禁止跳转。

var $toggleBtn=$("div.showmore>a");//获取点击按钮

$toggleBtn.click(function() {

    $category.show(); //显示隐藏的品牌

    return false; //阻止浏览器跳转

});

此时需要将“显示全部品牌变为“精简显示品牌”。

$(this).find("span") .text("精简显示品牌");

接下来高亮推荐品牌。

$(".SubCategoryBox li")

                .filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")//找到品牌

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

使用filter方法筛选出复核要求的品牌。

至此全部代码如下：

    <script>

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

        var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //获得索引值大于4的品牌集合对象（除最后一条）

        $category.hide(); //隐藏匹配元素

        var $toggleBtn = $("div.showmore>a"); //获取“显示全部品牌”按钮

        $toggleBtn.click(function() {

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

            $(this).find("span").text("精简显示品牌"); //改变按钮文字

            $(".SubCategoryBox li")

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

                .addClass("promoted"); //推荐品牌高亮显示

            return false; //超链接不跳转

        });

    });

    </script>

此时用户点击“显示全部品牌” ，正常显示全部品牌。

3、点击“精简显示品牌”执行以下操作

因为单击同一按钮，事件仍然在刚才的按钮上。要将切换两种状态的效果在一个按钮上进行，可以通过判断元素的显示和隐藏实现。

if(元素显示){
//元素隐藏
}else{
//元素显示
}

“元素显示”部分的代码就是第二步中的，现在只要完成元素隐藏的代码即可。

元素隐藏和显示功能刚好相反，代码如下。

if( $category.is(":visible")){

                //元素隐藏

                $category.hide(); //隐藏匹配元素

                $(this).find("span").text("显示全部品牌"); //改变按钮文字

                $(".SubCategoryBox li").removeClass("promoted"); //全部元素去掉"promoted"

            }

至此任务完成完整的代码为：

  <script>

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

        var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //获得索引值大于4的品牌集合对象（除最后一条）

        $category.hide(); //隐藏匹配元素

        var $toggleBtn = $("div.showmore>a"); //获取“显示全部品牌”按钮

        $toggleBtn.click(function() {

            if ($category.is(":visible")) {

                //元素隐藏

                $category.hide(); //隐藏匹配元素

                $(this).find("span").text("显示全部品牌"); //改变按钮文字

                $(".SubCategoryBox li").removeClass("promoted"); //全部元素去掉"promoted"

            } else {

                //元素显示

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

                $(this).find("span").text("精简显示品牌"); //改变按钮文字

                $(".SubCategoryBox li")

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

                    .addClass("promoted"); //推荐品牌高亮显示

            }

            return false; //超链接不跳转

        });

    });

    </script>

4、优化代码

jquery<=1.8.3中有一个方法更适合以上情境，它能给一个按钮添加一组交互事件，而不需要像上面一样做很多判断

$toggleBtn.click(function() {

            if ($category.is(":visible")) {

                //元素隐藏

            } else {

                //元素显示

            }

            return false; //超链接不跳转

        });

等价为toggtle方法：toggle n.开关触发器

$toggleBtn.toggle(function(){

    //显示元素

},function(){

    //隐藏元素

});

所以最终代码为：

<script>

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

        var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //获得索引值大于4的品牌集合对象（除最后一条）

        $category.hide(); //隐藏匹配元素

        var $toggleBtn = $("div.showmore>a"); //获取“显示全部品牌”按钮

        $toggleBtn.toggle(function() {

                //元素显示

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

                $(this).find("span").text("精简显示品牌"); //改变按钮文字

                $(".SubCategoryBox li")

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

                    .addClass("promoted"); //推荐品牌高亮显示

                return false; //超链接不跳转

            },

            function() {

                //元素隐藏

                $category.hide(); //隐藏匹配元素

                $(this).find("span").text("显示全部品牌"); //改变按钮文字

                $(".SubCategoryBox li").removeClass("promoted"); //全部元素去掉"promoted"

                return false; //超链接不跳转

            });

    });

    </script>

全部代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

.SubCategoryBox {

        width: 800px;

        border: 1px solid #ccc;

        overflow: hidden;

        font-size: 16px;

    }

    .SubCategoryBox li {

        float: left;

        width: 240px;

        list-style: none;

    }

    .showmore {

        clear: both;

        text-align: center;

        padding: 5px 0 5px;

    }

    .showmore a {

        display: inline-block;

        border: 1px solid green;

        padding: 5px;

    }

    .promoted {

        font-weight: 700;

        color: red;

    }

}

    </style>

    <script src="http://code.jquery.com/jquery-1.8.3.min.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>(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>

    <script>

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

        var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //获得索引值大于4的品牌集合对象（除最后一条）

        $category.hide(); //隐藏匹配元素

        var $toggleBtn = $("div.showmore>a"); //获取“显示全部品牌”按钮

        $toggleBtn.toggle(function() {

                //元素显示

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

                $(this).find("span").text("精简显示品牌"); //改变按钮文字

                $(".SubCategoryBox li")

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

                    .addClass("promoted"); //推荐品牌高亮显示

                return false; //超链接不跳转

            },

            function() {

                //元素隐藏

                $category.hide(); //隐藏匹配元素

                $(this).find("span").text("显示全部品牌"); //改变按钮文字

                $(".SubCategoryBox li").removeClass("promoted"); //全部元素去掉"promoted"

                return false; //超链接不跳转

            });

    });

    </script>

</body>

</html>

三、总结

1、.filter（）方法简介

.filter（expr） :筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。

.filter(expr)和.find()对比。

.find()会在元素内寻找匹配元素，对子元素集合操作。
.filter()是筛选元素，对自身集合元素筛选。

一个工作中用到.filter()的例子

需求和实现如下：

“应收”和“实收”两列高亮显示。 $("table tr:not(thead>tr) td").filter(":nth-child(5),:nth-child(6)").css("background","#F4F9FF");
“周六”和“周日”的单元格颜色高亮显示。　　$("td").filter(":contains('周六'),:contains('周日')").css("color","#CC6600");
“周六”和“周日”两行高亮显示。 $("tr").filter(":contains('周六'),:contains('周日')").css("background","#dff0d8");

2、dom加载完成执行

$(document).ready(function() {}可以替换为等价且更简单的写法：$(function(){});

3、jquery判断元素是否显示或隐藏

$("#id").is(':visible');            //true 为显示 false 为隐藏

$("#id").is(":hidden");         //true 为隐藏 false 为显示

jquery中的is(expr|obj|ele|fn)根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

常用：

// 是否是隐藏的

$('#test').is(':visible');

// 判断input元素是否被选中

$('input[name=chkNoChecked]').is(':checked')；

// 是否是第一个子元素

$(this).is(":first-child");

// 是否包含.blue,.red的class

$(this).is(".blue,.red");

// 文本中是否包含Peter这个词

$(this).is(":contains('Peter')");

更多可参考官网文档：http://api.jquery.com/is/

4、链式操作

下面代码，点击按钮时改变内容

$(".showmore").click(function() {

   $(".showmore a span").html("精简显示品牌");

});

可进一步写成：

$(".showmore").click(function() {

    $(this).find("span").text("精简显示品牌");

 });

如果需要同时操作样式可写为：

$(".showmore").click(function() {

    $(this).find("span")

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

              .text("精简显示品牌");

 });

5、不同jqurey版本toggle()方法说明

jquery<=1.8.3的toggle()方法可以实现以上效果。因为它有两种功能。

1、.toggle(function, function, … )

当指定元素被点击时，在两个或多个函数之间轮流切换。如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。

$(selector).toggle(function1(),function2(),functionN(),...)

function1()：必需。规定元素偶数次被点击时要运行的函数。

function2():必需。规定当元素在奇数次被点击时要运行的函数。

functionN(),...可选。规定需要切换的其他函数。

效果可以看w3school:http://www.w3school.com.cn/tiy/t.asp?f=jquery_effect_toggle_function

.toggle(function, function, … )在jquery1.9被删除，以减少混乱和提高模块化程度。具体参考：http://jquery.com/upgrade-guide/1.9/

jQuery Migrate（迁移）插件可以恢复此功能。也可以把原来那块代码拿出来，写成一个插件，如下：

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>

</head>

<body>

<button>test click me</button>

<script>

    $(document).ready(function(){

        $("button").toggle(function(){

            $("body").css("background-color", "green");

        }, function(){

            $("body").css("background-color", "red");

        }, function(){

            $("body").css("background-color", "yellow");

        });

    });

    $.fn.toggle = function( fn ) {

        // Save reference to arguments for access in closure

        var args = arguments,

                guid = fn.guid || jQuery.guid++,

                i = 0,

                toggler = function( event ) {

                    // Figure out which function to execute

                    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;

                    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );

                    // Make sure that clicks stop

                    event.preventDefault();

                    // and execute the function

                    return args[ lastToggle ].apply( this, arguments ) || false;

                };

        // link all the functions, so any of them can unbind this click handler

        toggler.guid = guid;

        while ( i < args.length ) {

            args[ i++ ].guid = guid;

        }

        return this.click( toggler );

    }

</script>

</body>

</html>

2、.toggle()切换元素的可见状态。

语法：

$(selector).toggle(speed,callback,switch)

参数都是可选的。

例子：切换p的显隐。

 $(".btn1").click(function(){

  $("p").toggle();

  });

文中案例来自《锋利的jquery》，但是书中内容难免过时，但也不能因噎废食，知道一些技术的历史，哪怕是过时的，新旧结合，也可以帮助我们更全面的认识掌握技术。

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5416895.html有问题欢迎与我讨论，共同进步。

jquery选择器案例的更多相关文章

jQuery的案例及必知重要的jQuery选择器
Jquery能做什么访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合 Jquery的优势体积小,压缩后只有100KB左右 l强大的选择器出 ...
JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例复选框,综合案例随机图片
知识点梳理课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具插件:PageHelper (j ...
《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单示例2-1 使用javascript实现隔行变色 < ...
jQuery选择器---基本选择器总结
今天要跟大家分享一下jQuery选择器的使用方法,它的选择器分为四大类如图: 基本选择器的使用: 1.id选择器案例: <div id="notMe"><p& ...
jQuery选择器---层次选择器总结
今天要分享的是jQuery层次选择器,层次选择器的分类如图: 接下来就开始了要不先养养眼精神一下: 开始1.祖先选择器: 案例: <form> <label>Name:< ...
jQuery选择器的优点
jQuery选择器的优点相信小伙伴们对选择器并不陌生,从css1到css3的选择器有很多,但是JQuery都能完美的支持,而且API操作起来也特别方便好用,在很大程度上精简了代码,节约了很多性能.那 ...
Jquery 使用和Jquery选择器
jQuery中的顶级对象($) jQuery 中最常用的对象即 $ 对象,要想使用 jQuery 的方法必须通过 $ 对象.只有将普通的 Dom 对象封装成 jQuery 对象,然后才能调用 jQue ...
Unit01： jQuery概述、 jQuery选择器、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

随机推荐

安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.2出现0x80072f8a未指定的错误
本文转载自: http://www.cnblogs.com/JiaoWoWeiZai/p/5892255.html 最近DotNetCore更新到了1.0.1,Azure tools也更新到了2.9. ...
批量导出access某表内容到word文档
一.需求: 需要将表中每一条记录中的某些内容导出在一个word文档中,并将这些文档保存在指定文件夹目录下二.界面,简单设计如下: 三.添加office相关引用添加后可在解决方案资源管理器中看到: ...
jenkins中使用tfs插件做增量的版本发布部署
一配置介绍使用jenkins的tfs插件进行,源码的下载,编译,打包的操作,然后使用windows的批处理命令,在局域网内(或者本机)把打包的release包,删除掉web.config,然后靠配 ...
Codeforces Round #234A
Inna and choose option 题意: 一个由12个字符('O'或'X')组成的字符串,这12个字符可以排列成a*b(a*b=12)的矩阵,要求矩阵某一列都是'X'.用户输入t个 ...
JSTL中的fmt标签小例子
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
如何在MFC界面开发中响应Button按钮的Down和Up事件
通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButto ...
python基础之面向对象高级编程
面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对类和对象的使用类是一个模板,模板中包装了多个"函数"供使用(可以讲多函数中公用的变量封装到对象中) ...
Atitit.atiagent agent分销系统代理系统设计文档
Atitit.atiagent agent分销系统代理系统设计文档 1. 启动项目1 2. 首也2 3. 登录功能2 4. 用户中心2 5. 充值查询3 6. 授权下级代理4 7. 我的提成5 ...
带节日和农历的js日历
带农历的脚本: http://keleyi.com/keleyi/phtml/jstexiao/11.htm http://keleyi.com/tools/rili/ <html> &l ...
SVN版本控制系统学习(中文配置)
先吐槽下往上搜索的一些SVN下载地址,里面乱七八糟啥都有,下载好后点击安装一不注意啥玩意都安装上了, 什么玩意都有,真心不明白这些推送者是怎么想的.搜集了一个WIN32的百度网盘下载地址: http: ...

jquery选择器案例