首页 > 代码库 > 06 同时给多个元素绑定事件

06 同时给多个元素绑定事件

 

1 要求

  同时给多个相同元素绑定相同的时间

  例如:给一个无序列表中的每一个li元素绑定一个事件,单击每个li元素的时候改变背景颜色和文本颜色

 

2 思路

  利用jQuery的on()实现同时绑定

 

3 准备

  3.1 jQuery的 on()方法 怎么使用?

  在选择元素上绑定一个或多个事件的事件处理函数。

  on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。要附加一个事件,只运行一次,然后删除自己, 请参阅.one()

    3.1.1 语法

      on(events,[selector],[data],fn)

      技术分享

  3.2 jQuery的 css()方法 怎么使用 

    访问匹配元素的样式属性。

     jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀(在适当的时候),比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

     3.2.1 语法   

      css(name|pro|[,val|fn])

技术分享

    3.2.2 实例

技术分享

 

  

技术分享
 1 <!DOCTYPE html><!--  给浏览器解析,我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8 
 9     <script type="text/javascript" src="../js/test.js"></script>
10     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
11 
12     <!-- <link rel="shortcut icon" href="http://www.mamicode.com/img/study04.ico"> -->
13     <style type="text/css">
14         ul li {
15             display: block;
16             width: 100px;
17             height: 30px;
18             border-bottom: solid 1px red;
19             margin-bottom: 3px;
20             background-color: skyblue;
21 
22             text-align: center;
23             line-height: 30px;
24         }
25 
26         #box {
27             width: 100px;
28             height: 100px;
29             margin-top: 20px;
30             background-color: green;
31         }
32 
33         
34     </style>
35     <script type="text/javascript">
36         $(function() {
37 
38             // 给id为box的元素绑定单击事件
39            $("#box").on("click", function() {
40                    // 单击事件触发时就将背景颜色更改为红色,将文本颜色更改为黄色
41                    $(this).css({"background-color":"red", "color" : "yellow"}); 
42                    // alert("helllo ");
43            });
44 
45            $("#ul01").on("click", "li", function() {
46                    // alert($(this).html());
47                    // 单击前先将所有的li元素恢复到默认情况
48                    $("#ul01 li").css({"background-color" : "skyblue", "color" : "black"});
49                    // 单击那个li元素就将那个li元素的背景颜色变成红色,文本颜色变成黄色
50                    $(this).css({"background-color" : "red", "color" : "yellow"});
51            });
52         });
53     </script>
54 </head>
55 
56 <body>
57     <ul id="ul01">
58         <li>我是1</li>
59         <li>我是2</li>
60         <li>我是3</li>
61         <li>我是4</li>
62     </ul>
63 
64     <div id="box">hello world</div>
65     
66 </body>
67 </html>
同时给多个元素绑定事件源代码

 

      

 

06 同时给多个元素绑定事件