JQuery 學習總結及實例

本文轉載自查看原文 2013-04-26 00:29 16669 jQuery

1、JQuery簡介

普通JavaScript的缺點：每種控件的操作方式不統一，不同瀏覽器下有區別，要編寫跨瀏覽器的程序非常麻煩。因此出現了很多對JavaScript的封裝庫，比如Prototype、Dojo、ExtJS、JQuery等，這些庫對JavaScript進行了封裝，簡化了開發。這些庫是對JavaScript的封裝，也就是咱們調用JQuery的一句函數，JQuery內部這句函數幫我們調用JavaScript中的代碼幾十句，因為 JQuery就是JavaScript語法寫的一些函數類，內部仍然是調用JavaScript實現的，所以並不是代替JavaScript的。使用JQuery的代碼、編寫JQuery的擴展插件等仍然需要JavaScript的技術， Jquery本身就是一堆JavaScript函數。

（1、Jquery是最火的JavaScript庫，已集成到VS2010，MS的Ajax toolkit和JQuery結合也是最方便，JQuery的擴展插件也是非常多。

（2、JQuery的優點：尺寸小、使用簡單方便（Write Less, Do More，吃得少干得多。

鏈式編程（$("#div1").draggble().show().hide().fly()）、

隱式迭代（自動對於多個元素進行迭代方法調用））、

屏蔽瀏覽器差異跨瀏覽器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件豐富、開源、免費。

（3、VS中JavaScript、JQuery的自動完成功能：在VS2010中直接有，VS008需要安裝VisualStudio 和VS90SP1-KB958502-x86補丁會更強更好用, 下

載地址見備注。然后引用 jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放到同目錄下，不需要在頁面引用。

（4、vsdoc是vs2008sp1以后增加的一個技術，將js文件對應的vsdoc（相當於js庫提供的方法的說明庫）放到和js一起，就有會第三方js的自動提示的功能

2、簡單的JQuery之Ready

（1、注冊事件的函數，和普通的dom不一樣，不需要在元素上標記on**這樣的事件。

$(document).ready(function(){

alert("加載完畢！");

});

（2、當頁面Dom元素加載完畢時執行代碼，可以簡寫為：

$(function(){

alert("加載完畢！");

});

（3、和onload類似，但是onload只能注冊一次（沒有C#中的+=機制），后注冊的取代先注冊的，而ready則可以多次注冊都會被執行。

window.onload=function(){alert("1")};window.onload=function(){alert("2")};//結果只彈出2

（4、 JQuery的ready和Dom的onload的區別(*)：onload是所有Dom元素創建完畢、圖片、Css等都加載完畢后才被觸發，而ready則是Dom元素創建完畢后就被觸發，這樣可以提高網頁的響應速度。在jQuery中也可以用$(window).load()來實現onload那種事件調用的時機。

$(function(){alert("1111");});//簡寫方式

3、JQuery的函數

$.map(array,fu) 得到函數的返回值和$.each(array,fn)調用函數處理沒有返回值

map函數和each函數

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         /*$.map(array,fu)
 8         var arr1 = [1, 2, 3];
 9         var arrOne = $.map(arr1, function (item) { return item * 2; });
10         alert(arrOne);*/
11 
12         /*$.each(array,fn)*/
13         var arr2 = [1, 2, 3];
14         //$.each(arr2, function (key, item) { alert(key+" and "+item); });//兩個參數返回的是key+值
15         //$.each(arr2, function (item) { alert(item); });//一個參數返回的是key
16         $.each(arr2, function () { alert(this); });//沒有參數自覺返回值
17      </script>
18 </head>
19 <body>
20 
21 </body>
22 </html>

4、JQuery對象和Dom對象

（1、$('#div1')得到的就是jQuery對象，jQuery對象只能調用jQuery對象封裝的方法，不能調用Dom對象的方法，Dom對象也不能調用jQuery對象的方法，所

以 alert($('#div1').innerHTML是錯的，因為innerHTML是DOM對象的屬性。

（2、Array是JS語言本身的對象，不是Dom對象，因此不需要轉換為Jquery對象才能用

（3、將Dom對象轉換為JQuery對象的方法，$(dom對象)；當調用jQuery沒有封裝的方法的時候必須用Dom對象，轉換方法：vardomobj = jqobj[0]或者

vardomobj=jqobj.get(0)

（4、在引用外部js的Script標簽內不能再寫js代碼，引用外部js的Script標簽也不能用簡寫方法閉合。

JQuery對象和Dom對象

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         /*JQuery 對象*/
 8         //$(function () { alert($('#div1').html()); });
 9 
10         /*Dom對象轉化為JQuery對象*/
11         //$(function () { var dom1 = document.getElementById("div1"); $(dom1).html("<font color='black'>測試black</font>"); });
12 
13         /*JQuery對象轉化為Dom對象 +一個[0]*/
14         //$(function () { var jquery1 = $(div1)[0]; alert(jquery1.innerHTML); });
15 
16         /*JQuery 修改樣式css 還有val*/
17         //$(function () { $('#div1').css("background", "gray"); });//css兩個參數是設置值
18         //$(function () { alert($('#div1').css("background")); }); //css一個參數是取值
19         //$(function () { $('#myInput').val(new Date()); }); //val一個參數是設置值
20         //$(function () { alert($('#myInput').val()); }); //val沒有參數是取值
21 
22      </script>
23 </head>
24 <body>
25     <div id="div1">
26        <font color="red">測試red</font>
27         <input type="text" name="name" value="kong" id="myInput" />
28     </div>
29 </body>
30 </html>

5、JQuery 選擇器

（1、$(“#div1”).html();

（2、$("TagName")來獲取所有指定標簽名的jQuery對象，相當於getElementsByTagName：

例如獲得所有的P：$("p").html("我們都是P");

（3、標簽選擇器，擁有樣式的標簽選擇器

☆ 多條件選擇器： $("p,div,span.menuitem")，同時選擇p標簽、div標簽和擁有menuitem樣式的span標簽元素（類似於CSS選擇器）

☆ 注意選擇器表達式中的空格不能多不能少。易錯！

☆ 層次選擇器：

☆☆$("div li") 獲取 div 下的所有 li 元素（后代，子、子的子 …… ）

☆☆$("div > li") 獲取 div 下的直接 li 子元素

☆☆$(".menuitem +div")獲取樣式名為menuitem之后的第一個div元素（不常用）

☆☆$(".menuitem ~div")獲取樣式名為menuitem之后所有的div元素（不常用）

案例1：

JQuery選擇器1

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6 
 7     <script type="text/javascript">
 8         $(function () {
 9             $('.test').click(
10                 function () {
11                     alert($(this).text());
12                 }
13              ); 
14         });
15     </script>
16     <style type="text/css"> 
17          .test{ background-color:Red} 
18      </style>
19 </head>
20 <body>
21     <div id="div1">
22         <p class="test">
23             test1</p>
24         <p class="test">
25             test2</p>
26         <p class="test">
27             test3</p>
28     </div>
29 </body>
30 </html>

6、JQuery的迭代

如何判斷對象是否存在，jQuery選擇器返回的是一個對象數組 ( 數組中的每個對象還是 Dom 對象 )，調用text()、html()、click()之類方法的時候其實是對數組中每個元素迭代調用每個方法，因此即使通過id選擇的元素不存在也不會報錯，如果需要判斷指定的id是否存在，應該寫：

if($("#btn1").length <= 0) {

alert("id為btn1的元素不存在！");

}

7、節點遍歷

（1、 next() 方法用於獲取節點之后的挨着的第一個同輩元素，
（2、$(".menuitem").next("div") 、 nextAll() 方法用於獲取節點之后的所有同輩元素， $(".menuitem").nextAll("div") prev 、 prevAll 之前的元素

（3、siblings() 方法用於獲取所有同輩元素，$(".menuitem").siblings("li") siblings 、next 等所有能傳遞選擇器的地方能夠使用的語法都和 $() 語法一樣。

節點遍歷

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         /*next() 和nextAll()的用法
 8         $(function () {
 9             $("div").click(function () {
10             //alert($(this).next().text());
11             //alert($(this).next("p").text());
12             //alert($(this).nextAll().text());
13             //alert($(this).nextAll("div").text());
14         });
15         });*/
16         /*高亮顯示所以next*/
17         //$(function () { $("div").click(function () { $(this).nextAll("div").css("background","red"); }); });
18         /*高亮顯示自己而已*/
19         //$(function () { $("div").click(function () { $(this).css("background", "red"); $(this).siblings().css("background","white"); }); });
20         $(function () { $("div").click(function () { $(this).css("background", "red").siblings().css("background", "white"); }); });
21     
22     
23     </script>
24 </head>
25 <body>
26     <div>
27         aa</div>
28     <div>
29         bb</div>
30     <div>
31         cc</div>
32     <p>
33         p1</p>
34     <p>
35         p2</p>
36     <div>
37         dd</div>
38     <div>
39         ee</div>
40 </body>
41 </html>

8、鏈式編程

鏈式編程就是對象一棒棒向下傳，能不能正確傳下來要看返回值，html()不能傳，prevAll().nextAll()也傳錯。

$("#tableRating td").click(function() {$(this).prevAll().next().html("a"); });//經典！

案例1：樣式的增刪：addClass和removeClass

添加樣式和移除樣式

 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 <head>
 4     <title></title>
 5      <style type="text/css"> 
 6          .menuitem{background-color:Yellow; } 
 7          .highlight { background-color: Red;} 
 8      </style> 
 9     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
10     <script type="text/javascript">
11         $(function () { $(".menuitem").click(function () { $(this).addClass("highlight").siblings().removeClass("highlight"); }); });
12        
13     </script>
14 </head>
15 <body>
16      <p class="menuitem">111111</p><br /> 
17      <p class="menuitem">111111</p><br /> 
18      <p class="menuitem">111111</p><br />
19 </body>
20 </html>

案例2：五角星評分

五角星評分

 1 /* 
 2             $(function() { 
 3             $("#ratings td").html("<img src='images/star_off.gif' />") 
 4             .mouseover(function() { $("#ratings td").html("<img src='images/star_on.gif' />"); $(this).nextAll().html("<img src='images/star_off.gif' />"); }); 
 5              
 6             }); 
 7             */ 
 8  
 9             $(function() { 
10             $("#ratings td").html("<img src='images/star_off.gif' />") 
11                 .mouseover(function() { $("#ratings td").html("<img src='images/star_on.gif' />") 
12                 .siblings().html("<img src='images/star_on.gif' />"); 
13                 $(this).nextAll().html("<img src='images/star_off.gif' />"); 
14             }); 
15                  
16             }); 
17 
18 
19 <table id=ratings> 
20     <tr><td></td><td></td><td></td><td></td><td></td></tr> 
21     </table>

9、基本過濾選擇器
（1、:first  選取第一個元素。 $("div:first") 選取第一個 <div>
（2、:last  選取最后一個元素。 $("div:last") 選取最后一個 <div>
（3、:not( 選擇器 )  選取不滿足 " 選擇器 " 條件的元素，
$("input:not(.myClass)") 選取樣式名不是 myClass 的 <input>
（4、:even 、 :odd ，選取索引是奇數、偶數的元素： $("input:even") 選
取索引是奇數的 <input>
（5、:eq( 索引序號 ) 、 :gt( 索引序號 ) 、 :lt( 索引序號 )  選取索引等於、大於、小於索引序號的元素，比如 $("input:lt(5)") 選取索引小於 5 的 <input>

（6、$(":header") 選取所有的 h1 …… h6 元素（ * ）
$("div:animated") 選取正在執行動畫的 <div> 元素。（ * ）
案例1：

$("#table1 tr:last").css("color", "red");
$("#table1 tr:gt(0):lt(3)").css("color", "red");//lt(3)是從gt(0)后得到的新序列中的序號，不要寫成lt(4);
$("#table1 tr:gt(0):even").css("background", "red"); //表頭不參與"正文表格的奇數行是紅色背景",所以gt(0)去掉表頭

10、相對選擇器

不僅可以使用選擇器進行進行絕對定位，還可以進行相對定位，（雙重選擇）

只要在 $() 指定第二個參數，第二個參數為相對的元素 . $("ul", $(this)).css("background", "red"); //ul下面的+包含本身=ul下面的本身

View Code

 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 <head>
 4     <title></title>
 5 
 6     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             $("#t1 tr").click(function () {
10                 $("td", $(this)).css("background", "Yellow");
11             });
12         });
13     </script>
14 </head>
15 <body>
16      <table id="t1"> 
17         <tr><td>姓名</td><td>成績</td></tr> 
18         <tr><td>tom</td><td>100</td></tr> 
19         <tr><td>lucy</td><td>99</td></tr> 
20         <tr><td>jim</td><td>95</td></tr> 
21         <tr><td>david</td><td>85</td></tr> 
22         <tr><td>candy</td><td>84</td></tr> 
23         <tr><td>平均分</td><td>90</td></tr> 
24     </table> 
25 </body>
26 </html>

11、屬性過濾選擇器：
（1、$("div[id]") 選取有 id 屬性的 <div>
（2、 $("div[title=test]") 選取 title 屬性為 " test " 的 <div> ， JQuery 中沒有對getElementsByName 進行封裝，用 $("input[name=abc]")
（3、$("div[title!=test]") 選取 title 屬性不為 " test " 的 <div>
還可以選擇開頭、結束、包含等，條件還可以復合。（ * ）

屬性過濾

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("input[value=顯示選中項]").click(function () {
 9                 alert($("input:checked").val());
10             });
11             $("input[type=checkbox]").click(function () {
12                 $("input:checked").css("background-color", "Red"); 
13                 alert($("input:checked").css("background-color"));
14             });
15 
16         });
17         
18     </script>
19 </head>
20 <body>
21     <input type="checkbox" value="北京" />北京<br />
22     <input type="checkbox" value="南京" />南京<br />
23     <input type="checkbox" value="東京" />東京<br />
24     <input type="checkbox" value="西安" />西安<br />
25     <input type="checkbox" value="開封" />開封<br />
26     <input type="button" value="顯示選中項" /><br />
27 </body>
28 </html>

12、表單對象選擇器

        $("#form1:enabled") 選取 id 為 form1 的表單內所有啟用的元素
     $("#form1:disabled") 選取 id 為 form1 的表單內所有禁用的元素
     $("input:checked") 選取所有選中的元素（ Radio 、 CheckBox ）
     $("select:selected") 選取所有選中的選項元素（下拉列表）

表單對象

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("input[name=names]").click(function () {
 9                 var names = $("input[name=names]:checked");
10                 var msg = $("#msgNames");//ID記得加#
11                 var array = new Array();
12 
13                 //$(value)是將Dom對象轉化為JQuery對象,即將元素的value值更新到key上 
14                 names.each(function (key, values) {
15                     array[key] = $(values).val();
16                 });
17 
18                 msg.text("共選中" + names.length + "個,他們是：" + array.join(","));
19             });
20         });
21     </script>
22 </head>
23 <body>
24     <input type="checkbox" name="names" value="tom" />tom
25     <input type="checkbox" name="names" value="jim" />jim
26     <input type="checkbox" name="names" value="lily" />lily
27     <p id="msgNames">
28     </p>
29 </body>
30 </html>

13、JQuery的Dom操作

   （1 、使用 html() 方法讀取或者設置元素的 innerHTML ：
                  alert($("a:first").html());
                  $("a:first").html("hello");
      （2 、使用 text() 方法讀取或者設置元素的 innerText ：
                  alert($("a:first").text());
                  $("a:first").text("hello");
      （3 、使用 attr() 方法讀取或者設置元素的屬性，對於JQuery沒有封裝的屬性（所有瀏覽器沒有差異的屬性）用 attr 進行操作。
                  alert($("a:first").attr("href"));
                  $("a:first").attr("href", "http://www.rupeng.com");
      （4 、使用 removeAttr 刪除屬性。刪除的屬性在源代碼中看不到，這是和清空屬性的區別

14、動態創建Dom節點

       （1、使用 $(html 字符串) 來創建 Dom 節點，並且返回一個 jQuery 對象，然后調用 append 等方法將新創建的節點添加到 Dom 中：
          例子：var link = $("<a href='http://www.baidu.com'> 百度 </a>");
               $("div:first").append(link);
    （2、$() 創建的就是一個 jQuery 對象，可以完全進行操作
             var link = $("<a href='http://www.baidu.com'> 百度 </a>");
              link.text("百度");
              $("div:first").append(link);

動態添加Dom對象

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         /*$(function () {
 8             var link = "<a href='http://www.cnblogs.com/daomul' >myBlog</a>";
 9             $("#myTable").append(link);
10         });*/
11 
12         $(function () {
13             var data = { "daomul": "http://www.cnblogs.com/daomul", "bokeyuan": "http://www.cnblogs.com" };
14             $.each(data, function (key, value) {
15                 var tr = "<tr><td>" + key + "</td><td><a href=" + value + ">"+key+"</a></td></tr>";
16                 $("#myTable").append(tr);
17             });
18         });
19     </script>
20 </head>
21 <body>
22     <table border="0" cellpadding="0" cellspacing="0" id="myTable">
23         <tr>
24             <td>
25             </td>
26         </tr>
27     </table>
28 </body>
29 </html>

（3、append 方法用來在元素的末尾追加元素。

         //$("#select1 option:selected").remove().appendTo($("#select2")) ;
            $("#select1 option:selected").appendTo($("#select2")) ;
         prepend ，在元素的開始添加元素。
         after ，在元素之后添加元素（添加兄弟）
         before ：在元素之前添加元素（添加兄弟）

15、刪除節點
     （1、remove() 刪除選擇的節點
               案例：清空 ul 中的項， $("ul li.testitem").remove(); 刪除 ul 下 li 中有 testitem 樣式的元素。
           remove 方法的返回值是被刪除的節點對象，還可以繼續使用被刪除的節點。比如重新添加到其他節點下
                  var lis = $("#ulSite li").remove();
                  $("#ulSite2").append(lis);
    （2、remove掉后再重新移動： var items = $("#select1 option:selected").remove();  $("#select2").append(items);
                           更狠的： $("#select1 option:selected").appendTo($("#select2"))

權限管理

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("#moveToRight").click(function () {
 9                 var item = $("#select1 option:selected").remove();
10                 item.attr("selected", false);
11                 $("#select2").append(item);
12             });
13             $("#moveToLeft").click(function () {
14                 var item = $("#select2 option:selected").remove();
15                 item.attr("selected", false);
16                 $("#select1").append(item);
17             });
18             $("#AllToRight").click(function () {
19                 var item = $("#select1 option").remove();
20                 $("#select2").append(item);
21             });
22             $("#AllToLeft").click(function () {
23                 var item = $("#select2 option").remove();
24                 $("#select1").append(item);
25             });
26 
27         });
28     </script>
29 </head>
30 <body>
31     <select style="float: left; width: 15%; height: 100px" id="select1" multiple="multiple">
32         <option>添加</option>
33         <option>刪除</option>
34         <option>修改</option>
35         <option>查詢</option>
36         <option>打印</option>
37     </select>
38     <div style="float: left; width: 15%">
39         <input style="float: left; width: 100%;" type="button" id="moveToRight" value=">" />
40         <input style="float: left; width: 100%;" type="button" id="moveToLeft" value="<" />
41         <input style="float: left; width: 100%;" type="button" id="AllToRight" value=">>" />
42         <input style="float: left; width: 100%;" type="button" id="AllToLeft" value="<<" />
43     </div>
44     <select style="float: left; width: 15%; height: 100px" id="select2" multiple="multiple">
45     </select>
46 </body>
47 </html>

（3、empty() 是將節點清空，不像 remove 那樣還可以添加到其他元素中。

16、Dom實例改編

案例1：加法計算器

加法計算器

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("#eq").click(function () {
 9                 var text1 = $("#txt1").val();//有參數則說明是設置值
10                 var text2 = $("#txt2").val();
11                 var txt3 = parseInt(text1, 10) + parseInt(text2, 10);
12                 $("#txt3").val(txt3);
13             });
14         });
15     </script>
16 </head>
17 <body>
18      <input type="text" id="txt1" />+ 
19     <input type="text" id="txt2" /> 
20     <input type="button" id="eq" value="=" /> 
21     <input type="text" id="txt3" />
22 </body>
23 </html>

案例2：全選全部選按鈕

全選全不選按鈕

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("#selAll").click(function () {
 9                 $("#playlist input").attr("checked", true);
10             });
11             $("#unselAll").click(function () {
12                 $("#playlist input").attr("checked", false);
13             });
14             $("#reverse").click(function () {
15                 $("#playlist input").each(function () {
16                     //關鍵語句！！！
17                     $(this).attr("checked", !$(this).attr("checked"));
18                 });
19             });
20         });
21     </script>
22 </head>
23 <body>
24    <div id="playlist"> 
25         <input type="checkbox" />1111111111<br /> 
26         <input type="checkbox" />22222222222<br /> 
27         <input type="checkbox" />33333333333<br /> 
28         <input type="checkbox" />4444444444<br /> 
29         <input type="checkbox" />444<br /> 
30     </div> 
31     <input type="button" value="全選" id="selAll" /> 
32     <input type="button" value="全不選" id="unselAll" /> 
33     <input type="button" value="反選" id="reverse" /> 
34 
35 </body>
36 </html>

案例3：倒計時注冊頁面

倒計時注冊頁面

 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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         var InteruptID;
 8         var stopSecond=10;
 9         $(function () {
10             $("#btnReg").attr("disabled", true);
11             InteruptID = setInterval("stopTimeRole()",1000);
12         });
13 
14         function stopTimeRole() {
15             if (stopSecond <= 0) {
16                 $("#btnReg").attr("disabled", false);
17                 $("#btnReg").val("同意");
18                 clearInterval(InteruptID);
19                 return;
20             }
21             stopSecond--;
22             $("#btnReg").val("同意，還剩下"+stopSecond+"秒，請閱讀注冊事項");
23         }
24     </script>
25 </head>
26 <body>
27    <input type="button" id="btnReg" value="同意" />
28 </body>
29 </html>

案例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 <head>
 4     <title></title>
 5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("#myUL li").css("cursor", "pointer").mousemove(function () {
 9                 $(this).css("background", "red").siblings().css("background", "white");
10             }).click(function () {
11                 $(this).css("background","white").appendTo("#newUL");
12             });
13         });
14     </script>
15 </head>
16 <body>
17     <ul id="myUL">
18         <li>中國</li>
19         <li>美國</li>
20         <li>日本</li>
21         <li>新加坡</li>
22         <li>意大利</li>
23         <li>法國</li>
24         <li>德國</li>
25     </ul>
26     <ul id="newUL">
27     </ul>
28 </body>
29 </html>

17、節點操作

        （1、替換節點： $("br").replaceWith("<hr/>");
             例子：將 <br/> 替換為 <hr/> ：$("br").replaceWith("<hr/>");
        （2、包裹節點：wrap() 方法用來將所有元素逐個用指定標簽包裹：
                $("b").wrap("<font color='red'></font>") 將所有粗體字紅色顯示

18、樣式操作

（1、獲取樣式 attr("class") ，設置樣式 attr("class","myclass myclass2 myclass3") ，追加樣式 addClass("myclass")( 不影響其他樣式 ) ，

移除樣式 removeClass("myclass") ，切換樣式（如果存在樣式則去掉樣式，如果沒有樣式則添加樣式） toggleClass("myclass") ，
判斷是否存在樣式： hasClass("myclass")

例子：開關燈：$(document.body).toggleClass(” night“);

19、練習

練習1：黑白切換，設置body中的顏色切換Filter

黑白切換

 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 <head>
 4     <title>黑白切換</title>
 5     <style type="text/css"> 
 6         .blackwhite{filter:Gray;} 
 7     </style> 
 8 
 9     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
10     <script type="text/javascript">
11         $(function () {
12             $("#btn").click(function () {
13                 $(document.body).toggleClass("blackwhite");
14             });
15         });
16     </script>
17 </head>
18 <body>
19     <input type="button" value="切換" id="btn" /><br />
20     <img src="images/DSCF3362.JPG" alt=""/>
21 </body>
22 </html>

練習2：聚集控件高亮：$("body *") ，選擇器 * 表示所有類型的控件

聚集控件高亮

 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 <head>
 4 <!-- 
 5    練習：聚焦控件的高亮顯示。 顏色定義為 class 樣式。  $("body  * ") ，選擇器 * 表示 所有類型的控件。 
 6 --> 
 7 
 8     <title>聚集控件高亮</title>
 9     <style type="text/css"> 
10         .highlight{background-color:Gray;} 
11     </style> 
12 
13     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
14     <script type="text/javascript">
15         $(function () {
16             $("body * ").click(function () {
17                 $(this).addClass("highlight").siblings().removeClass("highlight");
18             });
19         });
20     </script>
21 </head>
22 <body>
23     <input type="text" /> 
24     <div> 
25         daomul 
26     </div> 
27     <p> 
28         http://www.cnblogs.com/daomul/
29     </p> 
30 
31 </body>
32 </html>

練習3：搜索框

搜索框效果

 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 <head>
 4 <!-- 
 5    練習：聚焦控件的高亮顯示。 顏色定義為 class 樣式。  $("body  * ") ，選擇器 * 表示 所有類型的控件。 
 6 --> 
 7 
 8     <title>搜索框效果</title>
 9 
10     <!--練習：搜索框效果。焦點放入控件，如果文本框中的值是 " 請輸入關鍵詞 " ，那么 
11         將文本清空，並且顏色設置為黑色。如果焦點離開控件，如果文本框中是空值， 
12         那么將文本框填充為 " 請輸入關鍵詞 " ，顏色設置為灰色（ Gray ）。 顏色定義為 
13         class 樣式。-->
14 
15     <style type="text/css">  
16         .Graycolor{background-color:Gray;} 
17     </style> 
18 
19     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
20     <script type="text/javascript">
21         $(function () {
22             $("#myInput").addClass("Graycolor")
23             .focus(function () {
24                 if ($(this).val() == "請輸入關鍵詞") {
25                     $(this).val("").removeClass("Graycolor");
26                 }
27             })
28             .blur(function () {
29                 if ($(this).val() == "") {
30                     $(this).val("請輸入關鍵詞").addClass("Graycolor");
31                 }
32             });
33         });
34     </script>
35 </head>
36 <body>
37     <input type="text" value="請輸入關鍵詞" id="myInput"/> 
38     
39 </body>
40 </html>

20、RadioButton的操作

      （1、取得 RadioButton 的選中值：$("input[name=gender]:checked").val()
          <input id="Radio2" checked="checked" name="gender"  type="radio" value=" 男 " /> 男
          <input  id="Radio1" checked="checked" name="gender" type="radio" value=" 女 " /> 女
          <input id="Radio3" checked="checked" name="gender" type="radio" value=" 未知 " /> 未知 </p>
     （2、設置 RadioButton 的選中值： $("input[name=gender]").val([" 女 "]);
                                              或者 $(":radio[name=gender]").val([" 女 "]);
            注意 val 中參數的 [] 不能省略

RadioButton

 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 <head>
 4     <!-- 
 5    練習：聚焦控件的高亮顯示。 顏色定義為 class 樣式。  $("body  * ") ，選擇器 * 表示 所有類型的控件。 
 6 -->
 7     <title>RadioButton</title>
 8     
 9     <style type="text/css">
10       
11     </style>
12     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
13     <script type="text/javascript">
14         $(function () {
15             $("#getValue").click(function () {
16                 alert($("input[name=gender]:checked").val());
17             });
18             $("#setValue").click(function () {
19                 $("input[name=gender]").val(["女"]);
20                 $(":checkbox").val(["籃球", "冰球"]);
21                 $(":checkbox[value=羽毛球]").attr("checked", true); 
22             });
23         });
24     </script>
25 </head>
26 <body>
27     <input name="gender" type="radio" value="男" />男<br />
28     <input name="gender" type="radio" value="女" />女<br />
29     <input name="gender" type="radio" value="保密" />保密<br />
30     <input type="checkbox" value="籃球" />籃球<br /> 
31     <input type="checkbox" value="足球" />足球<br /> 
32     <input type="checkbox" value="羽毛球" />羽毛球<br /> 
33     <input type="checkbox" value="冰球" />冰球<br />
34     <input type="button" value="設值" id="setValue" />
35     <input type="button" value="取值" id="getValue" />
36 </body>
37 </html>

      （3、對 RadioButton 的選擇技巧對於 CheckBox 和 Select 列表框也適用。除了可以使用 val 批量設置 RadioButton 、 CheckBox 等的選中以
             外，還可以設定 checked 屬性來單獨設置控件的選中狀態
                                $("#btn1").attr("checked",true)

21、JQuery事件

（1、事件綁定： $("#btn").bind("click",function(){}) ，每次都這么調用太麻煩，所以 jQuery 可以用 $("#btn").click(function(){}) 來進行簡化
（2、合成事件 hover ， hover(enterfn,leavefn) ，當鼠標放在元素上時調用enterfn 方法，當鼠標離開元素的時候調用 leavefn 方法

合成事件hover

 1 <head> 
 2     <title>合成事件_hover</title> 
 3  
 4     <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 
 5     <script type="text/javascript"> 
 6         $(function() { 
 7             /* 
 8             $("p").mouseenter(function() { 
 9                 $(this).text("客官來了！"); 
10             }) 
11             .mouseleave(function() { 
12                 $(this).text("大爺慢走！"); 
13             }); 
14             */ 
15             $("p").hover(function() { $(this).text("來了") }, function() { $(this).text("慢走")}); 
16         }); 
17     </script> 
18 </head> 
19 <body> 
20     <p>你好！</p> 
21 </body>

      （3、事件冒泡： JQuery 中也像 JavaScript 一樣是事件冒泡。如果想獲得事件相關的信息，只要給響應的匿名函數增加一個參數： e ，
                             e 就是調用事件對象的 stopPropagation() 方法終止冒泡。 e. stopPropagation();
                  $("tr").click(function(e) { alert("tr 被點擊 "); e.stopPropagation(); });// 注意函數的參數是 e
      （4、阻止默認行為：有的元素有默認行為，比如超鏈接點擊后會轉向新鏈接、提交按鈕默認會提交表單，
                                 如果想阻止默認行為只要調用事件對象的preventDefault() 方法和 window.event.returnValue=false 效果一樣。
                  $("a").click(function(e) { alert(" 所有超鏈接暫時全部禁止點擊 ");
                                                     e.preventDefault(); });

事件綁定

 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 <head>
 4     <!-- 
 5    練習：聚焦控件的高亮顯示。 顏色定義為 class 樣式。  $("body  * ") ，選擇器 * 表示 所有類型的控件。 
 6 -->
 7     <title>RadioButton</title>
 8     
 9     <style type="text/css">
10       
11     </style>
12     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
13     <script type="text/javascript">
14         $(function () {
15             //$("#p1").click(function (e) { alert(e.pageX + ":" + e.pageY); });
16             //$("#tr1").click(function (e) { });
17 
18             $("#p1").click(function (e) { alert("下面是p的："); alert($(this).html()); alert($(e.target).html()); });
19             $("#tr1").click(function (e) { alert("下面是tr的："); alert($(this).html()); alert($(e.target).html()); });
20         }); 
21 
22     </script>
23 </head>
24 <body>
25    <table id="t1"> 
26         <tr id="tr1"> 
27             <td id="td1"> 
28                 <p id="p1">nihao</p> 
29             </td> 
30         </tr> 
31     </table> 
32 </body>
33 </html>

22、事件其他（ * ）
（1、屬性： pageX 、 pageY 、 target獲得觸發事件的元素 ( 冒泡的起始，和this不一樣) which如果是鼠標事件獲得按鍵（1左鍵，2中鍵，3右鍵）。
altKey 、 shiftKey 、 ctrlKey 獲得 alt 、shift、ctrl 是否按下，為bool值。 keyCode 、 charCode 屬性發生事件時的keyCode （鍵盤碼，小

            盤的1和主鍵盤的 keyCode 不一樣）、charCode （ ASC 碼）。
      （2、移除事件綁定： bind() 方法即可移除元素上所有綁定的事件，如果 unbind("click") 則只移除 click 事件的綁定。 bind:+= ； unbind:-=
      （3、一次性事件：如果綁定的事件只想執行一次隨后立即 unbind 可以使用 one() 方法進行事件綁定：
                       $(":button").one( "click", function() { alert(" 點了 "); });
23、鼠標

    （1、獲得發生事件時鼠標的位置
                $(document).mousemove(function(e) {
                      document.title = e.pageX + "," + e.pageY;
                 });
    （2、在 mousemove 、 click 等事件的匿名響應函數中如果指定一個參數 e ，那么就可以從 e 讀取發生事件時的一些信息，比如對mousemove 等鼠標事件   來

說，就可以讀取 e.pageX 、 e.pageY 來獲得發生事件時鼠標在頁面的坐標。
案例1：跟着鼠標飛

跟着鼠標飛

 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 <head>
 4     <title></title>
 5     
 6     <style type="text/css">
 7       
 8     </style>
 9     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
10     <script type="text/javascript">
11         $(function () {
12             $(document).mousemove(function (e) {
13                 $("#fly").css("left", e.pageX).css("top",e.pageY);
14             });
15         });
16 
17     </script>
18 </head>
19 <body>
20    <div id="fly" style="position:absolute"> 
21         <img src="images/DSCF3362.JPG" style="width:100px;height:100px;" alt=""/> 
22     </div> 
23 </body>
24 </html>

案例2：點擊小圖顯示詳情

點擊小圖顯示詳情

 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 <head>
 4     <title></title>
 5     <style type="text/css">
 6         
 7     </style>
 8     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 9     <script type="text/javascript">
10         var data = { "images/1小.bmp": ["images/1.JPG", "zzz", "21"],
11             "images/2小.bmp": ["images/2.jpg", "yyy", "22"],
12             "images/3小.bmp": ["images/3.JPG", "xxx", "23"]
13         };
14         $(function () {
15             $.each(data, function (key, value) {
16                 var smallPic = $("<img src='" + key + "' style='width:100px;height:100px;'></img>");
17                 //給小圖加上三個額外的屬性
18                 smallPic.attr("bigPci", value[0]);
19                 smallPic.attr("Name", value[1]);
20                 smallPic.attr("Height", value[2]);
21                 smallPic.mouseover(function (e) {
22                     $("#ditailImg").attr("src", $(this).attr("bigPci"));
23                     $("#detailName").text("Name:"+$(this).attr("Name"));
24                     $("#detailHeight").text("Height:"+$(this).attr("Height"));
25                     $("#details").css("left", e.pageX).css("top", e.pageY).css("display", "");
26                 });
27                 $("body").append(smallPic);
28             });
29             $("#closeDetails").click(function () {
30                 $("#details").css("display","none");
31             });
32         });
33 
34     </script>
35 </head>
36 <body>
37     <div style="display: none; position: absolute;" id="details">
38         <img id="ditailImg" src="" style="width:200px;height:200px;"/>
39         <p id="detailName">
40         </p>
41         <p id="detailHeight">
42         </p>
43         <p><input id="closeDetails" type="button" value="關閉" /></p>
44     </div>
45 </body>
46 </html>

24、動畫及QQ風格控件

     （1、show() 、 hide() 方法會顯示、隱藏元素。用 toggle() 方法在顯示、隱藏之間切換
                     $(":button[value=show]").click(function() { $("div").show(); });
                     $(":button[value=hide]").click(function() { $("div").hide(); });
    （2、如果 show 、 hide 方法不帶參數則是立即顯示、立即隱藏，如果指定速度參數則會用指定時間進行動態顯示、隱藏，單位為毫秒，也可以使用三個內置的速

度： fast （200 毫秒）、 normal （400 毫秒）、 slow （600 毫秒）， jQuery 動畫函數中需要速度的地方一般也可以使用這個三個值。

模擬QQTab效果

 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 <head>
 4     <title></title>
 5     <style type="text/css">
 6         ul{list-style-type:none;}
 7         .header{background-color:Green;}
 8         .body{border-color:Blue;border-style:solid;border-width:5px;}
 9     </style>
10     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
11     <script type="text/javascript">
12         //有body樣式的li
13         $(function () {
14             $("#qq li:odd").addClass("body"); //偶數行
15             $("#qq li:even").addClass("header").click(function () {//奇數行
16                 $(this).next("li.body").show("fast").siblings("li.body").hide("fast");
17             });
18             //初始打開第一個表頭
19             $("#qq li:first").click();
20         });
21     </script>
22 </head>
23 <body>
24    <h1 style="margin-left:50px">QQTab效果</h1> 
25     <ul id="qq" style="width:30%"> 
26         <li>我的好友</li> 
27         <li>mm<br />baba<br />mama<br /></li> 
28         <li>我的女友<br /></li> 
29         <li>gemen<br /></li> 
30         <li>陌生人</li> 
31         <li>meinv<br />shuaige<br /></li> 
32     </ul> 
33 
34 </body>
35 </html>

25、JQuery Cookie 使用
      （1、使用方法， Cookie 保存的是鍵值對
           *1 、添加對 jquery.cookie.js
           *2 、設置值， $.cookie(' 名字 ', ' 值 ') 。 cookie 中保存的值都是文本。
           *3 、讀取值， var v=$.cookie(' 名字 ')
                      alert($.cookie(" 用戶名 "));
                     $.cookie(" 用戶名 ","tom"); 在同域名的另外一個頁面中也能讀取到。
      （2、設置值的時候還可以指定第三個參數， $.cookie(' 名字 ', ' 值 ', { expires: 7, path: '/',domain: 'itcast.cn', secure: true }) ，
              expires 表示要求瀏覽器保留 Cookie 幾天，這個值只是給瀏覽器的建議，可能沒到時間就已經被清除了。可以實現 " 勾選【記錄我的用戶
              名 10 天】 " 的功能。如果不設定 expires 在瀏覽器關閉以后就清除， options 參數用哪個設置哪個

案例：記住背景色

記住背景色

 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 <head>
 4     <title></title>
 5     <style type="text/css">
 6     </style>
 7     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 8     <script src="js/jquery.cookie.js" type="text/javascript"></script>
 9     <script type="text/javascript">
10         if ($.cookie("UserName")) { //讀取上次記錄的用戶名 
11             $("username").val($.cookie("UserName"));
12         }
13         $("#btnLogin").click(function () {
14             $.cookie("UserName", $("#username").val())//用戶填寫的用戶名保存到Cookie中 
15         });
16 
17         $(function () {
18             $("#tableColor td").click(function () {
19                 var bgColor = $(this).css("background-color");
20                 $(document.body).css("background-color", bgColor);
21                 $.cookie("backcolor", bgColor, {expires:2});
22             });
23 
24             if ($.cookie("backcolor")) {
25                 $(document.body).css("background-color", $.cookie("backcolor"));
26             }
27         });
28 
29     </script>
30 </head>
31 <body>
32     <table id="tableColor">
33         <tr>
34             <td style="background-color: Red">
35                 紅色
36             </td>
37             <td style="background-color: Green">
38                 綠色
39             </td>
40             <td style="background-color: Yellow">
41                 黃色
42             </td>
43         </tr>
44     </table>
45     <input type="text" id="username" />
46     <input type="button" value="登錄" id="btnLogin" />
47 </body>
48 </html>

26、JQueryUI

下載地址：http://jqueryui.com/下發包

View Code

 1 <head> 
 2     <title>JQueryUI的使用</title> 
 3     <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 
 4     <link href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> 
 5     <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> 
 6      
 7     <script type="text/javascript"> 
 8         $(function() { 
 9             $("#mydialog").dialog(); 
10             $("#testtab").tabs(); 
11         }); 
12     </script> 
13 </head> 
14 <body> 
15     <div id="mydialog">你好，我是對話框</div> 
16     <div id="testtab"> 
17         <ul> 
18             <li><a href="#tabBasic">基本設置</a></li> 
19             <li><a href="#tabAdv">高級設置</a></li> 
20         </ul> 
21             <div id="tabBasic">用戶名：<input type="text"/></div> 
22             <div id="tabAdv">刷新頻率：<input type="text" /></div> 
23     </div> 
24 </body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 鋒利的jQuery學習總結 jQuery學習總結（一）——jQuery基礎與學習資源 jQuery插件編寫學習+實例——無限滾動文件包含漏洞學習總結(結尾有實例) ECharts學習總結(四):echarts的實例方法 jquery ui draggable,droppable 學習總結 JavaScript學習總結(五)——jQuery插件開發與發布 jQuery學習筆記（三）：選擇器總結 jquery ui draggable,droppable 學習總結 React學習實例總結，包含yeoman安裝、webpack構建