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="../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>