JQuery 學習總結及實例 !! （轉載）
出自new:http://www.jianshu.com/users/1967b163cb61/latest_articles
一、JQuery簡介 普通JavaScript的缺點：每種控件的操做方式不統一，不一樣瀏覽器下有區別，要編寫跨瀏覽器的程序很是麻煩。所以出現了不少對JavaScript的封裝庫，好比Prototype、Dojo、ExtJS、JQuery等，這些庫對JavaScript進行了封裝，簡化了開發。這些庫是對JavaScript的封裝，也就是我們調用JQuery的一句函數，JQuery內部這句函數幫咱們調用JavaScript中的代碼幾十句，由於JQuery就是JavaScript語法寫的一些函數類，內部仍然是調用JavaScript實現的，因此並非代替JavaScript的。使用JQuery的代碼、編寫JQuery的擴展插件等仍然須要JavaScript的技術，Jquery自己就是一堆JavaScript函數。 （一、Jquery是最火的JavaScript庫，已集成到VS2010，MS的Ajax toolkit和JQuery結合也是最方便，JQuery的擴展插件也是很是多。 （二、JQuery的優勢：尺寸小、使用簡單方便（Write Less, Do More，吃得少幹得多。 鏈式編程（$("#div1").draggble().show().hide().fly()）、 隱式迭代 （自動對於多個元素進行迭代方法調用））、 屏蔽瀏覽器差別跨瀏覽器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件豐富、 開源、免費。 （三、VS中JavaScript、JQuery的自動完成功能：在VS2010中直接有，VS008須要安裝VisualStudio 和VS90SP1-KB958502-x86補丁會更強更好用, 下 載地址見備註。而後引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放到同目錄下，不須要在頁面引用。 （四、vsdoc是vs2008sp1之後增長的一個技術，將js文件對應的vsdoc（至關於js庫提供的方法的說明庫）放到和js一塊兒，就有會第三方js的自動提示的功能 二、簡單的JQuery之Ready （一、註冊事件的函數，和普通的dom不同，不須要在元素上標記on**這樣的事件。 $(document).ready(function(){ alert("加載完畢！"); }); （二、當頁面Dom元素加載完畢時執行代碼，能夠簡寫爲： $(function(){ alert("加載完畢！"); }); （三、和onload相似，可是onload只能註冊一次（沒有C#中的+=機制），後註冊的取代先註冊的，而ready則能夠屢次註冊都會被執行。 window.onload=function(){alert("1")};window.onload=function(){alert("2")};//結果只彈出2 （四、JQuery的ready和Dom的onload的區別(*)：onload是全部Dom元素建立完畢、圖片、Css等都加載完畢後才被觸發，而ready則是Dom元素建立完畢後就被觸發，這樣能夠提升網頁的響應速度。在jQuery中也能夠用$(window).load()來實現onload那種事件調用的時機。 $(function(){alert("1111");});//簡寫方式 三、JQuery的函數 $.map(array,fu) 獲得函數的返回值和$.each(array,fn)調用函數處理沒有返回值 複製代碼 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> 複製代碼 四、JQuery對象和Dom對象 （一、$('#div1')獲得的就是jQuery對象，jQuery對象只能調用jQuery對象封裝的方法，不能調用Dom對象的方法，Dom對象也不能調用jQuery對象的方法，所 以 alert($('#div1').innerHTML是錯的，由於innerHTML是DOM對象的屬性。 （二、Array是JS語言自己的對象，不是Dom對象，所以不須要轉換爲Jquery對象才能用 （三、將Dom對象轉換爲JQuery對象的方法，$(dom對象)；當調用jQuery沒有封裝的方法的時候必須用Dom對象，轉換方法：vardomobj = jqobj[0]或者 vardomobj=jqobj.get(0) （四、在引用外部js的Script標籤內不能再寫js代碼，引用外部js的Script標籤也不能用簡寫方法閉合。 複製代碼 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> 複製代碼 五、JQuery 選擇器 （一、$(「#div1」).html(); （二、$("TagName")來獲取全部指定標籤名的jQuery對象，至關於getElementsByTagName： 例如得到全部的P：$("p").html("咱們都是P"); （三、標籤選擇器，擁有樣式的標籤選擇器 ☆ 多條件選擇器：$("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： 複製代碼 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> 複製代碼 六、JQuery的迭代 如何判斷對象是否存在，jQuery選擇器返回的是一個對象數組(數組中的每一個對象仍是Dom對象)，調用text()、html()、click()之類方法的時候實際上是對數組中每一個元素迭代調用每一個方法，所以即便經過id選擇的元素不存在也不會報錯，若是須要判斷指定的id是否存在，應該寫： if($("#btn1").length <= 0) { alert("id爲btn1的元素不存在！"); } 七、節點遍歷 （一、 next() 方法用於獲取節點以後的挨着的第一個同輩元素， （二、$(".menuitem").next("div") 、 nextAll() 方法用於獲取節點以後的所 有同輩元素， $(".menuitem").nextAll("div") prev 、 prevAll 以前的元素 （三、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> 複製代碼 八、鏈式編程 鏈式編程就是對象一棒棒向下傳，能不能正確傳下來要看返回值，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> 複製代碼 九、基本過濾選擇器 （一、:first 選取第一個元素。 $("div:first") 選取第一個 <div> （二、:last 選取最後一個元素。 $("div:last") 選取最後一個 <div> （三、:not( 選擇器 ) 選取不知足 " 選擇器 " 條件的元素， $("input:not(.myClass)") 選取樣式名不是 myClass 的 <input> （四、:even 、 :odd ，選取索引是奇數、偶數的元素： $("input:even") 選 取索引是奇數的 <input> （五、:eq( 索引序號 ) 、 :gt( 索引序號 ) 、 :lt( 索引序號 ) 選取索引等於、大於、小於索引序號的元素，好比 $("input:lt(5)") 選取索引小於 5 的 <input> （六、$(":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)去掉表頭 十、相對選擇器 不只可使用選擇器進行進行絕對定位，還能夠進行相對定位， （雙重選擇） 只要在 $() 指定第二個參數，第二個參數爲相對的元素 . $("ul", $(this)).css("background", "red"); //ul下面的+包含自己=ul下面的自己 複製代碼 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> 複製代碼 十一、屬性過濾選擇器： （一、$("div[id]") 選取有 id 屬性的 <div> （二、 $("div[title=test]") 選取 title 屬性爲 " test " 的 <div> ， JQuery 中沒有對getElementsByName 進行封裝，用 $("input[name=abc]") （三、$("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> 複製代碼 十二、表單對象選擇器 $("#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> 複製代碼 1三、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 刪除屬性。刪除的屬性在源代碼中看不到，這是和清空屬性的區別 1四、動態建立Dom節點 （一、使用 $(html 字符串) 來建立 Dom 節點，而且返回一個 jQuery 對象，而後調用 append 等方法將新建立的節點添加到 Dom 中： 例子：var link = $("<a href='http://www.baidu.com'> 百度 </a>"); $("div:first").append(link); （二、$() 建立的就是一個 jQuery 對象，能夠徹底進行操做 var link = $("<a href='http://www.baidu.com'> 百度 </a>"); link.text("百度"); $("div:first").append(link); 複製代碼 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> 複製代碼 （三、append 方法用來在元素的末尾追加元素。 //$("#select1 option:selected").remove().appendTo($("#select2")) ; $("#select1 option:selected").appendTo($("#select2")) ; prepend ，在元素的開始添加元素。 after ，在元素以後添加元素（添加兄弟） before ：在元素以前添加元素（添加兄弟） 1五、刪除節點 （一、remove() 刪除選擇的節點 案例：清空 ul 中的項， $("ul li.testitem").remove(); 刪除 ul 下 li 中有 testitem 樣式的元素。 remove 方法的返回值是被刪除的節點對象，還能夠繼續使用被刪除的節點。好比從新添加到其餘節點下 var lis = $("#ulSite li").remove(); $("#ulSite2").append(lis); （二、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> 複製代碼 （三、empty() 是將節點清空，不像 remove 那樣還能夠添加到其餘元素中。 1六、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> 複製代碼 1七、節點操做 （一、替換節點： $("br").replaceWith("<hr/>"); 例子：將 <br/> 替換爲 <hr/> ：$("br").replaceWith("<hr/>"); （二、包裹節點 ：wrap() 方法用來將全部元素逐個用指定標籤包裹： $("b").wrap("<font color='red'></font>") 將全部粗體字紅色顯示 1八、樣式操做 （一、獲取樣式 attr("class") ，設置樣式 attr("class","myclass myclass2 myclass3") ，追加樣式 addClass("myclass")( 不影響其餘樣式 ) ， 移除樣式 removeClass("myclass") ，切換樣式（若是存在樣式則去掉樣式，若是沒有樣式則添加樣式） toggleClass("myclass") ， 判斷是否存在樣式： hasClass("myclass") 例子：開關燈：$(document.body).toggleClass(」night「); 1九、練習 練習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的操做 （一、取得 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> （二、設置 RadioButton 的選中值： $("input[name=gender]").val([" 女 "]); 或者 $(":radio[name=gender]").val([" 女 "]); 注意 val 中參數的 [] 不能省略 複製代碼 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> 複製代碼 （三、對 RadioButton 的選擇技巧對於 CheckBox 和 Select 列表框也適用。除了可使用 val 批量設置 RadioButton 、 CheckBox 等的選中以 外，還能夠設定 checked 屬性來單獨設置控件的選中狀態 $("#btn1").attr("checked",true) 2一、JQuery事件 （一、事件綁定： $("#btn").bind("click",function(){}) ，每次都這麼調用太麻煩，因此 jQuery 能夠用 $("#btn").click(function(){}) 來進行簡化 （二、合成事件 hover ， hover(enterfn,leavefn) ，當鼠標放在元素上時調用enterfn 方法，當鼠標離開元素的時候調用 leavefn 方法 複製代碼 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> 複製代碼 （三、事件冒泡： JQuery 中也像 JavaScript 同樣是事件冒泡。若是想得到事件相關的信息，只要給響應的匿名函數增長一個參數： e ， e 就是調用事件對象的 stopPropagation() 方法終止冒泡。 e. stopPropagation(); $("tr").click(function(e) { alert("tr 被點擊 "); e.stopPropagation(); });// 注意函數的參數是 e （四、阻止默認行爲：有的元素有默認行爲，好比超連接點擊後會轉向新連接、提交按鈕默認會提交表單， 若是想阻止默認行爲只要調用事件對象的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> 複製代碼 2二、事件其餘（ * ） （一、屬性： pageX 、 pageY 、 target得到觸發事件的元素 ( 冒泡的起始，和this不同) which若是是鼠標事件得到按鍵（1左鍵，2中鍵，3右鍵）。 altKey 、 shiftKey 、 ctrlKey 得到 alt 、shift、ctrl 是否按下，爲bool值。 keyCode 、 charCode 屬性發生事件時的keyCode （鍵盤碼，小 盤的1和主鍵盤的 keyCode 不同）、charCode （ ASC 碼）。 （二、移除事件綁定： bind() 方法便可移除元素上全部綁定的事件，若是 unbind("click") 則只移除 click 事件的綁定。 bind:+= ； unbind:-= （三、一次性事件：若是綁定的事件只想執行一次隨後當即 unbind 可使用 one() 方法進行事件綁定： $(":button").one("click", function() { alert("點了"); }); 2三、鼠標 （一、得到發生事件時鼠標的位置 $(document).mousemove(function(e) { document.title = e.pageX + "," + e.pageY; }); （二、在 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> 複製代碼 2四、動畫及QQ風格控件 （一、show() 、 hide() 方法會顯示、隱藏元素。用 toggle() 方法在顯示、隱藏之間切換 $(":button[value=show]").click(function() { $("div").show(); }); $(":button[value=hide]").click(function() { $("div").hide(); }); （二、 若是 show 、 hide 方法不帶參數則是當即顯示、當即隱藏，若是指定速度參數則會用指定時間進行動態顯示、隱藏，單位爲毫秒 ，也可使用三個內置的速 度： fast （200 毫秒）、 normal （400 毫秒）、 slow （600 毫秒）， jQuery 動畫函數中須要速度的地方通常也可使用這個三個值。 複製代碼 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> 複製代碼 2五、JQuery Cookie 使用 （一、使用方法， Cookie 保存的是鍵值對 *1 、添加對 jquery.cookie.js *2 、設置值， $.cookie(' 名字 ', ' 值 ') 。 cookie 中保存的值都是文本。 *3 、讀取值， var v=$.cookie(' 名字 ') alert($.cookie(" 用戶名 ")); $.cookie(" 用戶名 ","tom"); 在同域名的另一個頁面中也能讀取到。 （二、設置值的時候還能夠指定第三個參數， $.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> 複製代碼 2六、JQueryUI 下載地址：http://jqueryui.com/下發包 複製代碼 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> 複製代碼
相關文章
- 1. jquery學習筆記總結（轉載）
- 2. 實習總結之jquery實例
- 3. jQuery學習總結
- 4. 轉載：repo學習總結
- 5. openwrt學習總結(轉載)
- 6. JavaWeb學習總結(轉載)
- 7. jquery學習總結
- 8. JQuery--學習總結
- 9. jquery mobile 學習總結
- 10. JavaWeb學習總結——Session（轉載） JavaWeb學習總結——Session
- 更多相關文章...
- • jQuery Mobile 實例 - jQuery Mobile 教程
- • XML 總結 下一步學習什麼呢？ - XML 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
相關文章