码迷,mamicode.com
首页 > Web开发 > 详细

jQuery事件的链式写法

时间:2015-06-23 15:00:42      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:

用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事件的链式写法

标签:

原文地址:http://www.cnblogs.com/yueyanglou/p/4595214.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!