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

 

你可能感兴趣的:(jquery)