jQuery學習(一)——jQuery入門
阿新 • • 發佈：2017-08-23
完成 生效 ready 技術 button 覆蓋問題 包括 寫入 屬性和方法
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>
jQuery學習(一)——jQuery入門