jQuery链式编程 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height: 400px;width: 200px;border: 1px solid blanchedalmond">
        <div class="item">
            <div class="header">标题一</div>
            <div class="content">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题四</div>
            <div class="content hide">内容</div>
        </div>

    </div>

    <script src="jquery.js"></script>
    <script>
        $('.header').click(function () {
            //当前点击的标签$(this)
            //获取某个标签的下一个标签
            //获取某个标签的父标签
            //得获取所有的兄弟标签
            //添加样式和移除样式
            //筛选器
            // $(this).next()获取下一个
            // $(this).prev()获取上一个
            // $(this).parent()获取父标签
            // $(this).children()获取所有的孩子标签
            // $(this).siblings()获取所有的兄弟标签
            //find('i1')子子孙孙中查找


            // $(this).next().removeClass('hide');
            // $(this).parent().siblings().find('.content').addClass('hide');
            //jquery链式编程


            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
        })
    </script>
</body>
</html>

 注释：

            筛选：
            
                $('i1:eq(1)')
                $('i1).eq(1)
                    
                // $(this).next()获取下一个
                $(this).nextAll([expr])
                $(this).nextUntil([e|e][,f])
                // $(this).prev()获取上一个
                $(this).prevAll([expr])
                $(this).prevUntil([e|e][,f])
                // $(this).parent()获取父标签
                $(this).parents([expr])
                $(this).parentsUntil([e|e][,f])
                // $(this).children()获取所有的孩子标签
                // $(this).siblings()获取所有的兄弟标签
                //find('i1')子子孙孙中查找
                // $(this).next().removeClass('hide');
                // $(this).parent().siblings().find('.content').addClass('hide');
                
                first()
                last()
                hasClass(class)

posted @ 2021-02-05 17:37  安好_世界  阅读(88)  评论(0)  编辑  收藏  举报