### jQuery定義 jQuery是js的一個庫，<b>封裝</b>了我們開發過程中常用的一些方法，方便我們調用，提高開發效率。 ### jQuery的兩大特點 * 鏈式編程：比如`.show()`和`.html()`可以連寫成`.show().html()`。 * 隱式迭代：隱式 對應的是 顯式。隱式迭代的意思是：在方法的內部進行循環遍歷，而不用我們自己再進行循環，簡化我們的操作，方便我們調用。 ### js中的DOM對象和jQuery對象比較（重點） ~~~ //js的入口函數 window.onload = function(){ alert(1); } //jQuery的入口函數 $(function(){ alert(1); }) ~~~ #### 二者區別 通過jQuery獲取的元素是一個<b>數組</b>,數組中包含著原生JS中的DOM對象。 針對下面這樣一個div結構： ~~~ <div></div> <div class="box"></div> <div id="box"></div> <div class="box"></div> <div></div> ~~~ 通過原生 js 獲取這些元素節點的方式是： ~~~ var myBox = document.getElementById("box"); //通過 id 獲取單個元素 var boxArr = document.getElementsByClassName("box"); //通過 class 獲取的是數組 var divArr = document.getElementsByTagName("div"); //通過標簽獲取的是數組 ~~~ 通過 jQuery 獲取這些元素節點的方式是：（獲取的都是數組） ~~~ //獲取的都是數組，里面包含著原生 JS 中的DOM對象。 var jqBox1 = $("#box"); var jqBox2 = $(".box"); var jqBox3 = $("div"); ~~~ #### 二者的相互轉換 1.DOM對象轉為jQuery對象: ~~~ $(js對象); ~~~ 舉例： ~~~ //假設myBox、boxArr、divArr都是js對象 var box1 = $(myBox) var box2 = $(boxArr) var box3 = $(divArr) ~~~ 2.DOM對象轉為DOM對象（重點） ~~~ jQuery對象[index]; //如下 //$div為jQuery對象 var $div = $(".container>div"); $("#ul1>li").click(function(){ var clickindex = $(this).index(); if(clickindex!=index){ //此處就是通過jQuery對象加索引值轉換的 $div[index].style.display="none"; $div[clickindex].style.display="block"; index=clickindex; } }) ~~~