初探 jQuery

為什么要學習jQuery？

使用javascript開發過程中，有許多的缺點：

1. 查找元素的方法太少，麻煩。
2. 遍歷偽數組很麻煩，通常要嵌套一大堆的for循環。
3. 有兼容性問題。
4. 想要實現簡單的動畫效果，也很麻煩
5. 代碼冗余。

jQuery初體驗

讓div顯示與設置內容：

$(document).ready(function () {
    $("#btn1").click(function () {
      	//隱式迭代：偷偷的遍歷，在jQuery中，不需要手動寫for循環了，會自動進行遍歷。
        $("div").show(200);
    });

    $("#btn2").click(function () {
        $("div").text("我是內容");
    });
});

優點總結：

1. 查找元素的方法多種多樣，非常靈活
2. 擁有隱式迭代特性，因此不再需要手寫for循環了。
3. 完全沒有兼容性問題。
4. 實現動畫非常簡單，而且功能更加的強大。
5. 代碼簡單、粗暴。

什么是jQuery?

jQuery的官網 http://jquery.com/
jQuery就是一個js庫，使用jQuery的話，會比使用JavaScript更簡單。

js庫：把一些常用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就可以了。（animate.js、common.js）

jQuery其實就是一個js文件，里面封裝了一大堆的方法方便我們的開發，其實就是一個加強版的common.js，因此學習jQuery，其實就是學習jQuery這個js文件中封裝的一大堆方法。

jQuery的版本

官網下載地址：http://jquery.com/download/
jQuery版本有很多，分為1.x 2.x 3.x

大版本分類：

1.x版本：能夠兼容IE678瀏覽器
2.x版本：不兼容IE678瀏覽器
3.x和2.x版本jquery都不再更新版本了，現在只更新3.x版本。
4.x版本：不兼容IE678，更加的精簡（在國內不流行，因為國內使用jQuery的主要目的就是兼容IE678）

關於壓縮版和未壓縮版

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

jQuery的入口函數

使用jQuery的三個步驟：

1. 引入jQuery文件
2. 入口函數
3. 功能實現

關於jQuery的入口函數：

//第一種寫法
$(document).ready(function() {
	
});
//第二種寫法
$(function() {
	
});

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

1.	JavaScript的入口函數要等到頁面中所有資源（包括圖片、文件）加載完成才開始執行。
2.	jQuery的入口函數只會等待文檔樹加載完成就開始執行，並不會等待圖片、文件的加載。

jQuery對象與DOM對象的區別

1. DOM對象：使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。
2. jQuery對象：jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
3. jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合（偽數組））
4. DOM對象與jQuery對象的方法不能混用。

DOM對象轉換成jQuery對象：【聯想記憶：花錢】

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

jQuery對象轉換成DOM對象：

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

選擇器

什么是jQuery選擇器

jQuery選擇器是jQuery為我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。注意：jQuery選擇器返回的是jQuery對象。

jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，並且jQuery還添加了很多更加復雜的選擇器。【查看jQuery文檔】

jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。所以我們平時真正能用到的只是少數的最常用的選擇器。

基本選擇器

名稱	用法	描述
ID選擇器	$(“#id”);	獲取指定ID的元素
類選擇器	$(“.class”);	獲取同一類class的元素
標簽選擇器	$(“div”);	獲取同一類標簽的所有元素
並集選擇器	$(“div,p,li”);	使用逗號分隔，只要符合條件之一就可。
交集選擇器	$(“div.redClass”);	獲取class為redClass的div元素

總結：跟css的選擇器用法一模一樣。

層級選擇器

名稱	用法	描述
子代選擇器	$(“ul>li”);	使用>號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素
后代選擇器	$(“ul li”);	使用空格，代表后代選擇器，獲取ul下的所有li元素，包括孫子等

跟CSS的選擇器一模一樣。

過濾選擇器

這類選擇器都帶冒號:

名稱	用法	描述
: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元素中，選擇索引號為偶數的元素

篩選選擇器(方法)

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

名稱	用法	描述
children(selector)	$(“ul”).children(“li”)	相當於$(“ul>li”)，子類選擇器
find(selector)	$(“ul”).find(“li”);	相當於$(“ul 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()	找上一次兄弟