jQuery 选择器demo练习

Posted 2021-01-13 lindablog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 选择器demo练习相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>品牌列表案例</title>
    <script src="js/jquery-2.1.1.min.js" rel="script"></script>
    <style>
        ul li{
            list-style: none;
        }
        *{
            text-decoration: none;
        }
        span{
            background: #1a272f;
            color: #fff;
            border:1px solid #647787;
            width: 150px;
            padding: 5px;
            text-align: center;
            vertical-align: middle;
            border-radius: 5px;
            margin: 0 50px;
        }
        .heighLight{
            color: #f00;
            text-decoration: underline;
        }
    </style>
    <script>
        $(document).ready(function () {
            //从列表的索引值大于5开始，但是不包含最后一条记录的所有列表元素隐藏
            var $eategory=$(‘ul li:gt(5):not(:last)‘);
            $eategory.hide();//隐藏上面获取到的jQuery对象
            //当用户点击“显示全部品牌”按钮时，所有列表都显示，且文本变为“精简显示品牌”，同时推荐品牌高亮显示
            // 首先获取按钮，
             var $toggleBtn =$(‘div.showMore > a‘);
            //给按钮添加点击事件，且列表全部显示，但是超链接不跳转
            $toggleBtn.click(function(){
                $eategory.show();//显示全部列表
                //按钮文本改为精简品牌展示
                $(‘.showMore a span‘).text("精简显示品牌");
                //品牌推荐高亮显示 filter:筛选复合条件的元素
                $(‘ul li‘).filter(":contains(‘demo2‘),:contains(‘demo5‘),:contains(‘demo9‘)").addClass("heighLight");
                return false;//链接不跳转
            });
        })

    </script>
</head>
<body>
<div class=”SubCategoryBox”>
    <ul>
        <li><a href="#">佳能</a><i>(30440)</i></li>
        <li><a href="#">demo1</a><i>(30440)</i></li>
        <li><a href="#">demo2</a><i>(30440)</i></li>
        <li><a href="#">demo3</a><i>(30440)</i></li>
        <li><a href="#">demo4</a><i>(30440)</i></li>
        <li><a href="#">demo5</a><i>(30440)</i></li>
        <li><a href="#">demo6</a><i>(30440)</i></li>
        <li><a href="#">demo7</a><i>(30440)</i></li>
        <li><a href="#">demo8</a><i>(30440)</i></li>
        <li><a href="#">demo9</a><i>(30440)</i></li>
        <li><a href="#">demo10</a><i>(30440)</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>

以上是关于jQuery 选择器demo练习的主要内容，如果未能解决你的问题，请参考以下文章