jQuery事件的链式写法

用JavaScript就离不开jquery，事件链也必不可少。

下面的例子参考自《jQuery权威指南》

css中定义了一个框架元素，包含标题和内容。并设置内容初始不可见。

当用户单击Class名称为”title“的元素师，自身增加名称为”control“的样式；同时，将接下来的Class名称为”content“元素显示出来。

可以看出两个功能的实现通过”.“符号连接在一起。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         .iframe{border:solid 1px #888;font-size: 13px;}
 8         .title{padding: 6px;background-color: #EEE;}
 9         .content{padding: 8px 0px;font-size: 12px;text-align: center;display: none;}
10         .curcul{background-color: #CCC;}
11     </style>
12 </head>
13 <body>
14 <div class="title">标题</div>
15 <div class="content"></div>
16 
17 <script src="Script/jquery-2.0.3.js"></script>
18 <script type="text/javascript">
19 //    $(document).ready(function(){
20 //        $("div").html("Hello World");
21 //    });
22     $(function(){
23         $(".content").html("Hell wordl");
24         $(".title").click(function(){
25             $(this).addClass("curcul").next(".content").css("display","block");
26         });
27     });
28 </script>
29 </body>
30 </html>

View Code