jQuery选择器示例 

<!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(第二版).

posted on 2016-12-09 20:59  zhangzhongjiang  阅读(458)  评论(0)  编辑  收藏  举报

导航