Jquery | 基础 | 事件的链式写法

Posted 如有一味绝境，非历十方生死

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery | 基础 | 事件的链式写法相关的知识，希望对你有一定的参考价值。

 

$(".title").click(function () {
　　$(this).addClass("curcol").next(".content").css("display", "block");
});

 

<!DOCTYPE html>
<html>

<head>
    <title>jQuery事件的链式写法</title>
    <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .iframe {
            border: solid 1px #888;
            font-size: 13px;
        }

        .title {
            padding: 6px;
            background-color: #EEE;
        }

        .content {
            padding: 8px 0px;
            font-size: 12px;
            text-align: center;
            display: none;
        }

        .curcol {
            background-color: #CCC
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".content").html("您好！欢迎来到jQuery的精彩世界。");
            $(".title").click(function () {
                $(this).addClass("curcol").next(".content").css("display", "block");
            });
        });
    </script>
</head>

<body>
    <div class="iframe">
        <div class="title">标题</div>
        <div class="content"></div>
    </div>
</body>

</html>

 

当页面首次加载时，被包含的内容<div> 标记是不可见的，当用户单击主题<div> 标记时，改变自身的背景色，并将内容<div> 标记显示出来。



以上是关于Jquery | 基础 | 事件的链式写法的主要内容，如果未能解决你的问题，请参考以下文章

jq优化

Javscript的函数链式调用基础篇

Backbone前端框架解读

从零开始学 Web 之 jQuery事件冒泡，事件参数对象，链式编程原理

jquery的on方法，支持链式操作？这是什么骚写法，froala上传图片的地址是什么意思？php怎么写？

链式调用就是promise的优点吗？