jQuery02_ZenDei技術網路在線

一、使用jQuery為標簽添加屬性或者樣式 1、$("#id名").css("css屬性名"，"屬性值")；比如：$("tbody tr:even").css("background-color","yellow"); 2、使用addClass（"class名"），然後在引入的css文件中寫樣式：. ...

一、使用jQuery為標簽添加屬性或者樣式

　　1、$("#id名").css("css屬性名"，"屬性值")；比如：$("tbody tr:even").css("background-color","yellow");

　　2、使用addClass（"class名"），然後在引入的css文件中寫樣式：.class名{。。。}；比如：$("tbody tr:even").addClass("even"); css中：.even{back-groundcolor：red；}

二、js和jQuery當前對象的區別、事件的區別

　　1、js中用this來表示當前操作的對象；而jQuery中用${this}來表示當前操作的對象；

　　註：這裡指的是，要使用jQuery屬性，或者使用jQuery中的方法時，就必須用${this}.屬性名；如：${this}.value；但是，jQuery代碼中也可以用this代表當前對象，前提是js和jQuery屬性或者方法不混用；

　　2、jQuery中的事件去掉了前邊的on；

三、jQuery中的遍歷（遍歷集合，js中只有集合，沒有）

　　註：關於方式二，可以遍歷對象，例如：

四、文檔處理操作：　

　　1、追加內容（A、B是jQuery對象）

　　apend: A.append(B) 將B追加到A的內容的末尾處；

　　appendTo: A.appendTo(B) 將A加到B內容的末尾處；

　　2、刪除

　　　　a、empty()；返回值：jQuery，刪除匹配的元素集合中所有的子節點。

　　　　b、remove（[expr]）；返回值：jQuery；從DOM中刪除所有匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除。

　　　　c、detach([expr])；返回值：jQuery；這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來。

五、屬性操作、表單對象屬性；

　　1、val（）、text（）、html（）；

　　2、表單對象屬性：

　　　　enabled、disabled、checked、selected，下麵以selected為例：

　　　　結果只顯示出被選中的option，即獲得了被選中的option對象；

六、jQuery案例

1、省市二級聯動

　　（1）步驟分析：

第一步：確定事件(change事件),在綁定的函數裡面獲取用戶選擇的省份

第二步：創建二維數組來存儲省份和城市

第三步：遍歷二維數組中的省份(與用戶選擇的省份進行比較)【使用JQ的遍歷操作】

第四步：接著遍曆數組中的城市

第五步：創建一個城市文本節點

第六步：創建option元素節點

第七步：將文本節點添加到元素節點中【使用JQ的文檔操作方法】

第八步：獲取第二個下拉列表並將option元素節點添加進去

第九步：清除第二個下拉列表的option內容

　　（2）代碼實現：

 1 js代碼：
 2 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
 3 <script>
 4     $(function(){
 5         //2.創建二維數組用於存儲省份和城市
 6         var cities = new Array(3);
 7         cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");
 8         cities[1] = new Array("長沙市","郴州市","株洲市","岳陽市");
 9         cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
10         cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");
11         
12         $("#province").change(function(){
13             //10.清除第二個下拉列表的內容
14             $("#city").empty();
15             
16             //1.獲取用戶選擇的省份
17             var val = this.value;
18             //alert(val);
19             //3.遍歷二維數組中的省份
20             $.each(cities,function(i,n){
21                 //alert(i+":"+n);
22                 //4.判斷用戶選擇的省份和遍歷的省份
23                 if(val==i){
24                     //5.遍歷該省份下的所有城市
25                     $.each(cities[i], function(j,m) {
26                         //alert(m);
27                         //6.創建城市文本節點
28                         var textNode = document.createTextNode(m);
29                         //7.創建option元素節點
30                         var opEle = document.createElement("option");
31                         //8.將城市文本節點添加到option元素節點中去
32                         $(opEle).append(textNode);
33                         //9.將option元素節點追加到第二個下拉列表中去
34                         $(opEle).appendTo($("#city"));
35                     });
36                 }
37             });
38             
39         });
40     });
41 </script>
42 
43 html代碼（部分）：
44 <tr>
45                             <td>籍貫</td>
46                             <td>
47                                 <select onchange="changeCity(this.value)">
48                                     <option>--請選擇--</option>
49                                     <option value="0">湖北</option>
50                                     <option value="1">湖南</option>
51                                     <option value="2">河北</option>
52                                     <option value="3">河南</option>
53                                 </select>
54                                 <select id="city">
55                                     
56                                 </select>
57                             </td>
58                         </tr>

View Code

2、下拉列表左右選擇

　　　　效果圖：

　　（1）步驟分析：

第一步：確定事件(滑鼠單擊事件click)
第二步：獲取左側下拉列表被選中的option($(“#left option:selected”)) [假設左側select定義了一個id=left]
第三步：將獲取到的option添加到右側的下拉列表中去。(append方法的使用)

　　（2）代碼實現：

 1 js代碼：
 2 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
 3 <script>
 4     $(function(){
 5         /*1.選中單擊去右邊*/
 6         $("#selectOneToRight").click(function(){
 7             $("#left option:selected").appendTo($("#right"));
 8         });
 9         
10         /*2.單擊全部去右邊*/
11         $("#selectAllToRight").click(function(){
12             $("#left option").appendTo($("#right"));
13         });
14         
15         /*3.選中雙擊去右邊*/
16         $("#left option").dblclick(function(){
17             $("#left option:selected").appendTo($("#right"));
18         });
19     });
20 </script>
21 
22 html代碼：
23 <td>
24                     <span style="float: left;">
25                         <font color="green" face="宋體">已有商品</font><br/>
26                         <select multiple="multiple" style="width: 100px;height: 200px;" id="left">
27                             <option>IPhone6s</option>
28                             <option>小米4</option>
29                             <option>錘子T2</option>
30                         </select>
31                         <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">&gt;&gt;</a></p>
32                         <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">&gt;&gt;&gt;</a></p>
33                     </span>
34                     <span style="float: right;">
35                         <font color="red" face="宋體">未有商品</font><br/>
36                         <select multiple="multiple" style="width: 100px;height: 200px;" id="right">
37                             <option>三星Note3</option>
38                             <option>華為6s</option>
39                         </select>
40                         <p><a href="#" >&lt;&lt;</a></p>
41                         <p><a href="#" >&lt;&lt;&lt;</a></p>
42                     </span>
43                 </td>

View Code

七、jQuery事件總結（jQuery里的事件都是方法）

　　1、ready（）頁面載入事件（頁面載入順序問題，及解決方案）；如：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <title>頁面未載入執行失敗</title>
 7         <script type="text/javascript">
 8             document.getElementById("panel").onclick = function() {
 9                 alert("元素已經載入完畢 !");
10             }
11             /*
12                 執行錯誤，為什麼？
13                 因為dom還未載入完畢。
14             */
15         </script>
16     </head>
17 
18     <body>
19         <div id="panel">click me.</div>
20     </body>
21 
22 </html>

載入遇到的順序問題　　

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <title>4-1-2</title>
 7     </head>
 8     <!--解決辦法：
 9         方式一：將JS代碼移到需要操作的html代碼後面，一般建議放到body的外面
10         方式二：將JS代碼放到一個頁面載入函數中去-->
11 
12     <body>
13         <div id="panel">click me.</div>
14         <script type="text/javascript">
15                 document.getElementById("panel").onclick = function() {
16                     alert("元素已經載入完畢 !");
17                 }
18                 /*正確執行*/
19         </script>
20     </body>
21 
22 </html>

問題的解決方案

　　2、bind（"click",function(){}）綁定函數事件；如：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <title>點擊展開</title>
 7         <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
 8         <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
 9         <script type="text/javascript">
10             $(function() {
11                 $("#panel h5.head").bind("click", function() {
12                     var $content = $(this).next();
13                     if($content.is(":visible")) {
14                         $content.hide();
15                     } else {
16                         $content.show();
17                     }
18                 })
19             })
20         </script>
21     </head>
22 
23     <body>
24         <div id="panel">
25             <h5 class="head">什麼是jQuery?</h5>
26             <div class="content">
27                 jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 創建於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的相容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程式員的設計思路和編寫程式的方式。
28             </div>
29         </div>
30     </body>
31 
32 </html>

點擊展開　　

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <title>滑鼠滑過</title>
 7         <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
 8         <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
 9         <script type="text/javascript">
10             $(function() {
11                 $(".head").mouseover(function() {
12                     $(this).next().show();
13                 }).mouseout(function() {
14                     $(this).next().hide();
15                 })
16             })
17         </script>
18     </head>
19 
20     <body>
21         <div id="panel">
22             <h5 class="head">什麼是jQuery?</h5>
23             <div class="content">
24                 jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 創建於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的相容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程式員的設計思路和編寫程式的方式。
25             </div>
26         </div>
27     </body>
28 
29 </html>

滑鼠滑過

　　3、next（）返回後面那個緊鄰的同輩元素；如：

HTML 代碼:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
jQuery 代碼:
$("p").next()；
結果：返回的是每個段落的後面緊鄰的同輩元素（第一個p後面的p，第二個p對象後面的div對象）：
<p>Hello Again</p><div><span>And Again</span></div>

如果只有一個p：<p>Hello Again</p><div><span>And Again</span></div>
則$("p").next()；結果返回的只有<div><span>And Again</span></div>

　　4、事件移除：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <title>事件移除</title>
 7         <style type="text/css">
 8             * {
 9                 margin: 0;
10                 padding: 0;
11             }
12             
13             body {
14                 font-size: 13px;
15                 line-height: 130%;
16                 padding: 60px;
17             }
18             
19             p {
20                 width: 200px;
21                 background: #888;
22                 color: white;
23                 height: 16px;
24             }
25         </style>
26         <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
27         <script type="text/javascript">
28             $(function() {
29                 $('#btn').bind("click", function() {
30                     $('#test').append("<p>我的綁定函數1</p>");
31                 });
32                 $('#delAll').click(function() {
33                     $('#btn').unbind("click");
34                 });
35             })
36         </script>
37     </head>
38 
39     <body>
40         <button id="btn">點擊我</button>
41         <div id="test"></div>
42         <button id="delAll">刪除所有事件</button>
43     </body>
44 
45 </html>

事件移除

　　5、事件合成：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <title>合成事件hover</title>
 7         <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
 8         <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
 9         <script type="text/javascript">
10             $(function() {
11                 $(".head").hover(function() {
12                     $(this).next().show();
13                 }, function() {
14                     $(this).next().hide();
15                 })
16             })
17         </script>
18     </head>
19 
20     <body>
21         <div id="panel">
22             <h5 class="head">什麼是jQuery?</h5>
23             <div class="content">
24                 jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 創建於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的相容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程式員的設計思路和編寫程式的方式。
25             </div>
26         </div>
27     </body>
28 
29 </html>

事件合成hover 　　

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <title>合成事件toggle</title>
 7         <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
 8         <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
 9         <script type="text/javascript">
10             $(function() {
11                 $(".head").toggle(function() {
12                     $(this).next().hide();
13                 }, function() {
14                     $(this).next().show();
15                 })
16             })
17         </script>
18     </head>
19 
20     <body>
21         <div id="panel">
22             <h5 class="head">什麼是jQuery?</h5>
23             <div class="content">
24                 jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 創建於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的相容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程式員的設計思路和編寫程式的方式。
25             </div>
26         </div>
27     </body>
28 
29 </html>

事件合成toggle