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; 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)