一、jQuery好處： ①寫得少，做的多 ②鏈式編程 ③隱式迭代 ④解決相容性問題 二、頂級對象 Dom中的頂級對象：document >頁面中的頂級對象 document.點出來的是Dom中的屬性和方法 Bom中的頂級對象：window >瀏覽器中的頂級對象 window.點出來的是瀏覽器的屬性和 ...
一、jQuery好處：
①寫得少，做的多
②鏈式編程
③隱式迭代
④解決相容性問題
二、頂級對象
Dom中的頂級對象：document------>頁面中的頂級對象
document.點出來的是Dom中的屬性和方法
Bom中的頂級對象：window-------->瀏覽器中的頂級對象
window.點出來的是瀏覽器的屬性和方法，window.document也可以點出來，document也屬於window
jQuery中的頂級對象：jQuery------>$
$點出來的是jQuery中的方法
三、載入事件
頁面載入事件有如下幾種寫法：
A.window.onload=function(){ } ------>JS中頁面載入事件，只能寫一次，如果寫多個，後面的會把前面的覆蓋
B.$(window).load( function(){ } )------>jQuery頁面的載入事件，與A中代碼作用相同，可以寫多個
上述A和B兩種頁面載入方式，是頁面中所有內容載入完畢後才觸發，載入內容指的是：標簽、文本內容、圖片......等
C.$( document ).ready( function(){ });------>jQuery頁面的載入事件
C方法比A和B方法的執行速度快很多，因為C的執行邏輯是把頁面的基本標簽載入完畢後就可以觸發了。
C也可以寫作 $( function(){ })
四、jQuery中引入文件註意問題
先引入文件，然後再使用，開發的時候引入正常的jQuery文件和壓縮版的文件都沒有問題
建議：開發引入普通版文件，上線後使用壓縮版。
五、jQuery元素與DOM元素的互換
（一）為什麼Jquery對象和DOM對象要互轉？
DOM對象轉Jquery對象操作方便,畢竟Jquery中方法都是封裝好了的,而且相容問題解決的很好,代碼少,方便.
Jquery對象轉DOM對象,因為Jquery中文件一直在更新，很多東西都是隨著使用而進行封裝和升級,不太可能把所有dom中用到的進行封裝,還有很多未知的相容問題沒有封裝進去,所以,有的時候jquery中不能解決的問題,還需要原生的js代碼來解決,所以,jquery對象有的時候需要轉成dom對象來進行。
（二）Jquery對象和DOM對象怎麼轉換？
dom對象---------->Jquery對象
$(dom對象)
Jquery對象---------->dom對象
$(“#btn“)[0]
$(“#btn“).get(0)
六、開關燈示例
示例要求：點擊按鈕開關，網頁實現開燈關燈效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>網頁開關燈</title> 6 <!-- JS效果 --> 7 <script type="text/javascript"> 8 // window.onload=function(){ 9 // var btn=document.getElementById('btn'); 10 // btn.onclick=function(){ 11 // //首先判斷按鈕是開燈還是關燈 12 // if(this.value=="開燈"){ 13 // this.value="關燈"; 14 // document.getElementsByTagName("body")[0].style.backgroundColor="white"; 15 // }else{ 16 // this.value="開燈"; 17 // document.getElementsByTagName("body")[0].style.backgroundColor="black"; 18 // } 19 // } 20 // } 21 </script> 22 23 <!-- Jquery效果 --> 24 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script> 25 <script type="text/javascript"> 26 $(function(){ 27 $("#btn").click(function(){ 28 if($(this).val()=="關燈"){ 29 //.val()方法---->獲取按鈕的value屬性的值 30 //.val("內容");---->設置按鈕的value屬性的值 31 $(this).val("開燈"); 32 $("body").css("backgroundColor","black"); 33 }else{ 34 $(this).val("關燈"); 35 $("body").css("backgroundColor","white"); 36 } 37 }); 38 }) 39 </script> 40 </head> 41 <body> 42 <input type="button" id="btn" value="關燈" /> 43 </body> 44 </html>
