jQuery

1. 初識jQuery

如以下gif圖所示，點擊按鈕:讓div顯示與設置內容

1.1 使用JavaScript的方式去實現

    <script>
        // 1.獲取對象
        var oBtn1 = document.getElementById("btn1");
        var oBtn2 = document.getElementById("btn2");
        var oDivs = document.getElementsByTagName("div");
        // 2.註冊事件:顯示div
        oBtn1.onclick = function () {
            //3.遍歷獲取到每一個div
            for (var i = 0; i < oDivs.length; i++) {
                oDivs[i].style.display = "block";
            }
        }
        //3.註冊事件:給div設置文本內容
        oBtn2.onclick = function () {
            for (var i = 0; i < oDivs.length; i++) {
                oDivs[i].innerText = "Amo Xiang is so Cool";
            }
        }
    </script>

使用JavaSript的方式去實現的話，會發現以下幾點弊端:

獲取元素的方法太少且長，麻煩。
遍歷僞數組很麻煩，通常要嵌套一大堆的for循環。
註冊的事件會覆蓋。
有兼容性問題。
實現動畫很麻煩

1.2 使用jQuery的方式去實現

	<!-- 要想使用jQuery的話，必須先進行引入 -->
    <script src="../jquery-1.12.4.js"></script>
    <script>
        $("#btn1").click(function () {
            $("div").show(500);
        });
        $("#btn2").click(function () {
            $("div").text("Amo Xiang is so cool");
        });
    </script>

所謂沒有對比就沒有傷害，有了對比，處處戳中要害，由jQuery的實現代碼對比來看的話，有以下的優勢:
1. 獲取元素的方式非常的簡單，而且非常的豐富。
2. jQuery的隱式迭代特性，不再需要書寫for循環語句。
3. 使用jQuery完全不用考慮兼容性問題。
4. jQuery提供了一系列動畫相關的函數，使用非常方便。
5.代碼簡單、粗暴。

2. 什麼是jQuery?

jQuery是一個快速的、輕量的、功能豐富的js庫。
js庫：把一些常用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就可以了。（animate.js、common.js）
jQuery官網

3. 使用的步驟

引包（引入js文件）

<script src="../jquery-1.12.4.js"></script>

入口函數

<script src="../jquery-1.12.4.js"></script>
<script>
    $(function () {
    	console.log(1111);
    })
    $(document).ready(function () {
        console.log(2222);
    });        
</script>

功能實現

 $("#btn1").click(function () {
 	$("div").show(500);
 });

4. 版本介紹

4.1 jQuery版本有很多，分爲1.x 2.x 3.x，大版本分類

1.x版本：能夠兼容IE678瀏覽器（最終版本1.12.4）
2.x版本：不兼容IE678瀏覽器（最終版本2.2.4）
3.x版本：不兼容IE678，更加的精簡（在國內不流行，因爲國內使用jQuery的主要目的就是兼容IE678）,3.x版本只是在原來的基礎上增加了一些新的特性。也是jQuery目前正在更新的版本

4.2 壓縮版和未壓縮版

jquery-1.12.4.min.js:壓縮版本，適用於生產環境，因爲文件比較小，去除了註釋、換行、空格等東西，但是基本沒有可閱讀性。
jquery-1.12.4.js:未壓縮版本，適用於學習與開發環境，源碼清晰，易閱讀。

5. 入口函數

5.1 好處

等待文檔加載完成，保證能夠獲取到元素
形成了一個沙箱，防止全局變量污染。

5.2 兩種寫法

//第一種寫法
$(document).ready(function() {
	//要執行的東東.....
});
//第二種寫法
$(function() {
	//要執行的東東.....
});

5.3 jQuery入口函數與js入口函數的對比

JavaScript的入口函數要等到頁面中所有資源（包括圖片、文件）加載完成纔開始執行
jQuery的入口函數只會等待文檔樹加載完成就開始執行，並不會等待圖片、文件的加載
js的入口函數執行要比jQuery的入口函數執行得晚一些
在沒有寫入口函數的時候，在加載文檔完成前如果是使用原生js去獲取元素會報錯，但是jQuery不會報錯

6. jQuery對象與DOM對象(重點)

6.1 基本概念

DOM對象：使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。
jQuery對象：jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合（僞數組））

6.2 jQuery對象與DOM對象的區別

DOM對象與jQuery對象的方法不能混用。
DOM對象可以和jQuery對象相互轉化

6.3 DOM對象轉換成jQuery對象

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉jQuery對象

6.4 jQuery對象轉換成DOM對象

var $li = $("li");
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)

6.5 $詳解

在jQuery中$其實就是一個函數，根據傳入參數的不同，可以實現不同的功能

傳入對應的css選擇器等，選擇頁面上的元素
傳入函數例如我們的入口函數 $(function(){});
傳入DOM對象，可以將DOM對象轉換成jq對象，實質上$===jQuery，因$使用起來比較簡潔

7. 選擇器

7.1 什麼是jQuery選擇器?

jQuery選擇器是jQuery爲我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。注意：jQuery選擇器返回的是jQuery對象。
jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，並且jQuery還添加了很多更加複雜的選擇器。【查看jQuery文檔】
jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，可以有很多種方法獲取到。所以我們平時真正能用到的只是少數的最常用的選擇器

7.2 css選擇器

jQuery完全兼容css選擇器跟css的選擇器一模一樣

名稱	用法	描述
ID選擇器	$(“#id”);	獲取指定ID的元素
類選擇器	$(“.class”);	獲取同一類class的元素
標籤選擇器	$(“div”);	獲取同一類標籤的所有元素
並集選擇器	$(“div,p,li”);	使用逗號分隔，只要符合條件之一就可。
交集選擇器	$(“div.redClass”);	獲取class爲redClass的div元素
子代選擇器	$(“ul>li”);	使用>號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素
後代選擇器	$(“ul li”);	使用空格，代表後代選擇器，獲取ul下的所有li元素，包括孫子等

7.3 過濾選擇器

這類選擇器都帶有冒號的

名稱	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號爲2的元素，索引號index從0開始。
:odd	$(“li:odd”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號爲奇數的元素
:even	$(“li:even”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號爲偶數的元素
:first	$(“li:first”).css(“color”, ”red”);	獲取到的li元素中的第一個
:last	$(“li:last”).css(“color”, ”red”);	獲取到的li元素中的最後一個

7.4 篩選選擇器(方法)

篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，篩選選擇器主要是方法

名稱	用法	描述
children(selector)	$(“ul”).children(“li”)	獲取當前元素的所有子元素中的li元素
find(selector)	$(“ul”).find(“li”);	獲取當前元素中的後代元素中的li元素
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟節點，不包括自己本身。
parent()	$(“#first”).parent();	查找父親
eq(index)	$(“li”).eq(2);	相當於`$("li:eq(2)")`,index從0開始
next()	$(“li”).next()	找下一個兄弟
prev()	$(“li”).prev()	找上一次兄弟

7.5 幾個簡單案例

【案例：下拉菜單】this+children+mouseenter+mouseleave
【案例：突出展示】siblings+find
【案例：手風琴】next+parent
【案例：淘寶精品】index+eq

8. 其他補充

8.1 mouseover與mouseenter

mouseover 和 mouseenter都有鼠標經過的意思，但是在註冊鼠標經過事件的時候，推薦使用mouseenter
mouseenter 與 mouseover 的不同：
- mouseover與mouseout是一對事件，當鼠標經過當前元素或者當前元素的子元素的時候，mouseover事件都會觸發【事件冒泡】
- mouseenter與mouseleave是一對事件，只有當鼠標經過當前元素時，事件會觸發，鼠標經過子元素，mousenter事件是不會觸發的

8.2 index方法

index()方法返回的是當前元素在所有兄弟元素裏面的索引

<ul>
  <li><a href="#">我是鏈接</a></li>
  <li><a href="#">我是鏈接</a></li>
  <li><a href="#">我是鏈接</a></li>
  <li><a href="#">我是鏈接</a></li>
  <li><a href="#">我是鏈接</a></li>
  <li><a href="#">我是鏈接</a></li>
  <li><a href="#">我是鏈接</a></li>
  <li><a href="#">我是鏈接</a></li>
  <li><a href="#">我是鏈接</a></li>
</ul>

當碰到這種結構的時候，推薦給li註冊事件，這樣通過index方法才能獲取到正確的索引值

8.3 區分jQuery與Javascript

JavaScript是一門編程語言，jQuery僅僅是用JavaScript實現的一個JavaScript庫，目的是簡化我們的開發

jQuery基礎-01