1、jQuery基礎 Jquery它是一個庫(框架)，要想使用它，必須先引入！ jquery-1.8.3.js：一般用於學習階段。 jquery-1.8.3.min.js：用於項目使用階段 官網下載後，複製到當前WEB項目的js文件夾下，如下： 引入代碼：<script type="text/jav ...
1、jQuery基礎
Jquery它是一個庫(框架)，要想使用它，必須先引入！
jquery-1.8.3.js：一般用於學習階段。
jquery-1.8.3.min.js：用於項目使用階段
官網下載後，複製到當前WEB項目的js文件夾下，如下：
引入代碼：<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
2、JS和JQ頁面載入的區別
傳統的JavaScript頁面載入函數是最後一個生效，它會覆蓋之前的。它的載入順序比jQuery的要慢。【它是整個文檔載入完畢後才會執行】
jQuery的頁面載入函數可以存在多個(不會發生覆蓋)，它會按照順序進行執行。【dom數載入完成】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS與JQ頁面載入的區別</title> 6 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 7 <script> 8 window.onload=function(){ 9 alert("張三"); 10 } 11 //傳統的頁面載入會存在覆蓋問題，載入比JQ慢（整個頁面載入完畢（包括裡面的其他內容，比如圖片）） 12 window.onload=function(){ 13 alert("李四"); 14 } 15 16 //JQ的載入比JS載入要快！（當整個dom樹結構繪製完畢就會載入） 17 jQuery(document).ready(function(){ 18 alert("王五"); 19 }); 20 21 //JQ不存在覆蓋問題，載入的時候是順序執行 22 $(document).ready(function(){ 23 alert("蘇牧") 24 }); 25 26 //簡寫方式 27 $(function(){ 28 alert("汾九"); 29 }); 30 </script> 31 </head> 32 <body> 33 </body> 34 </html>
3、JS和JQ方式獲取的區別
JS:document.getElementById();
JQ:$(“#id”);
案例事先要創建一個名為“驚喜”的HTML文件，並放在同一個文件夾下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS和JQ獲取的區別</title> 6 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 7 <script> 8 $(function(){ 9 //1.JS方式獲取 10 /*document.getElementById("btn").onclick=function(){ 11 location.href="驚喜.html" 12 }*/ 13 //2.JQ方式獲取 14 $("#btn").click(function(){ 15 location.href="驚喜.html" 16 }); 17 }); 18 </script> 19 </head> 20 <body> 21 <input type="button" value="點我有驚喜！" id="btn" /> 22 </body> 23 </html>
4、DOM對象和JQuery對象的轉換
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM對象與Jquery對象轉換</title> 6 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 7 <script> 8 function write1(){ 9 //1.JS的DOM操作，DOM對象無法操作JQ對象裡面的屬性和方法 10 document.getElementById("span1").innerHTML="萌萌噠！"; 11 //document.getElementById("span1").html("萌萌噠！"); 12 13 var spanEle=document.getElementById("span1"); 14 15 //5.將DOM對象轉換成JQuery對象 16 $(spanEle).html("胖胖噠！"); 17 } 18 19 $(function(){ 20 $("#btn").click(function(){ 21 //2.JQ的JQuery操作，JQ對象無法操作JS裡面的屬性和方法！！！ 22 //$("#span1").innerHTML="呵呵噠！" 23 $("#span1").html("呵呵噠！"); 24 25 //3.JQuery對象向DOM對象轉換方式一 26 $("#span1").get(0).innerHTML="美美噠！"; 27 28 //4.JQuery對象向DOM對象轉換方式二 29 $("#span1")[0].innerHTML="棒棒噠！"; 30 }); 31 }); 32 </script> 33 </head> 34 <body> 35 <input type="button" value="JS寫入" onclick="write1()"/> 36 <input type="button" value="JQ寫入" id="btn"/><br /> 37 男神：<span id="span1">你好帥!</span> 38 </body> 39 </html>
註意：JQ對象只能操作JQ裡面的屬性和方法
JS對象只能操作JS裡面的屬性和方法。
