jQuery介紹（上篇）

jQuery介紹（上篇）

如今前端的開發，已經愈來愈離不開jQuery了，由於它可讓JS的開發變得愈來愈簡單，並且還解決了瀏覽器的兼容性問題。

咱們來簡單的將JS與jQuery作個對比：

	JavaScript	jquery
入口函數	只能有一個，若是有多個，後面的會覆蓋前面	能夠有多個，而且不會發生覆蓋的狀況
代碼容錯性	代碼容錯性差，代碼出現錯誤，會影響到後面代碼的運行。	代碼容錯性好，屏蔽錯誤，而且不會影響後面代碼的運行。
瀏覽器兼容性	兼容性差，好比早期火狐不支持innerText	對瀏覽器兼容性作了封裝，所以不存在兼容性問題
操做複雜性	DOM操做複雜，對於一些簡單的動畫效果，實現起來比較麻煩	DOM操做簡單，支持隱式迭代，實現動畫很是簡單。

一．jQuery詳細解釋

1.版本介紹

Ø1.1大版本分類

jquery大版本分爲1.x和2.x（3.0）

區別：2.x版本再也不支持IE6/7/8

Ø1.2同一版本分類

jQuery每個版本又分爲壓縮版和未壓縮版：

ljquery.js：未壓縮版本（開發版本），代碼可讀性高，推薦在開發和學習階段使用，方便查看源代碼。

ljquery.min.js：壓縮版本，去除了註釋、換行、空格、而且將一些變量替換成了a,b,c之類的簡單字符，基本沒有可讀性，推薦在項目生產環境使用，由於文件較小，減小網絡壓力。

Ø1.3關於jquery3.0

jquery3.0如今發佈了，這個版本自從2014年10月就開始測試了，目標是建立一個更苗條、更快的jquery版本（而且能向後兼容）。已經移除了IE舊版本的解決方案，而且帶來了一些較爲現代的web API，但這是有道理的。3.0是2.x分支的延續，可是有一些突破性的改變。可是1.12和2.2分支將會在同一時間繼續得到關鍵性的支持補丁。可是他們不會再有任何新的功能和重大的修訂。jQuery3是jQuery的將來，若是你須要兼容IE6-8，你能夠繼續使用1.12版本。

2.入口函數

Ø2.1jQuery的入口函數有兩種寫法

//第一種寫法

$(document).ready(function() {

 

});

//第二種寫法

$(function() {

 

});

Ø2.2對比JavaScript的入口函數jQuery的入口函數,執行時機

(1)JavaScript的入口函數要等到頁面中全部資源（包括圖片、文件）加載完成纔開始執行。

(2)jQuery的入口函數只會等待文檔樹加載完成就開始執行，並不會等待圖片、文件的加載。

3.瞭解jQuery的$符號

3.1$是什麼

其實$就是一個函數：$();參數不同，功能不同

$經常使用的幾種狀況：

$(function() {});//參數是function，說明是入口函數

$(「#btnSetConent」);//參數是字符串，而且以#開頭，是一個標籤選擇，查找id=「btnSetContent」的元素

$(「div」);//查找全部的div元素

$(document).ready(funciton(){})//將document轉換成jQuery對象

補充

$ === jQuery,也就是說能用$的地方，徹底能夠用jQuery，$僅僅是簡寫形式。

二．jQuery對象與DOM對象之間的轉換

1.什麼是DOM對象？

使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。好比使用document.getElement*系列的方法返回的就是dom對象。

var btn = document.getElementById(「btnShowDiv」);

var divs = document.getElementsByTagName(「div」);

dom對象只可使用dom對象的方法和屬性

domObject.innerHTML = 「dom對象設置文本」;

domObject.style.display= 「block」;//dom對象顯示對象

domObject.onclick = function() {}//dom對象綁定事件

2.什麼是jquery對象？

jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。好比使用$()方法返回對象都是jquery對象。

$(「div」);//標籤選擇器返回的jquery對象。

$(「#btnShowDiv」);//id選擇器返回的jquery對象。

jquery對象只能使用jquery對象的方法

var $obj = $(「div」);

$obj.html(「jquery對象設置文本的方法」);

$obj.show();//jquery對象顯示文本

$obj.click(function() {});//jquery對象綁定事件

  錯誤的用法

$(「div」).innerHTML;//jquery對象不能調用dom方法

//dom對象不能調用jquery方法。

document.getElementById(「btnShowDiv」).show();

3.深刻了解jQuery對象

jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合）

4.jQuery對象和DOM對象的相互轉換

4.1jquery對象轉DOM對象

var $li = $(「li」);

//第一種方法（更經常使用）

$li[0]

//第二種方法

$li.get(0)

//其實jQuery對象轉DOM對象的實質就是取出jQuery對象中封裝的DOM對象。

4.2 DOM對象轉jquery對象

var $obj = $(domObj);

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

 

三：jQuery選擇器Ø

1.什麼是jQuery選擇器？

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

$("#btnShowDiv")//id選擇器

$("div")//標籤選擇器

jQuery選擇器有不少，基本兼容了CSS1到CSS3全部的選擇器，而且jQuery還添加了不少更加複雜的選擇器。（詳情請查看jQuery文檔）

jQuery選擇器雖然不少，可是選擇器之間能夠相互替代，就是說獲取一個元素，你會有不少種方法獲取到。因此咱們平時真正能用到的只是少數的最經常使用的選擇器。

2.基本選擇器

ID選擇器 $(「#id」); 獲取指定ID的元素

類選擇器 $(「.class」); 獲取同一類class的元素

標籤選擇器 $(「div」); 獲取同一類標籤的全部元素

並集選擇器 $(「div,p,li」); 使用逗號分隔，只要符合條件之一就可。獲取全部的div、p、li元素

交集選擇器（標籤指定式選擇器） $(「div.redClass」); 注意選擇器1和選擇器2之間沒有空格，class爲redClass的div元素，注意區分後代選擇器。

總結：跟css的選擇器用法如出一轍。

3.層級選擇器

子代選擇器 $(「ul>li」); 使用>號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素

後代選擇器 $(「ul li」); 使用空格，表明後代選擇器，獲取ul下的全部li元素，包括孫子等

跟CSS的選擇器如出一轍。

4.過濾選擇器

這類選擇器都帶冒號：

: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元素中，選擇索引號爲偶數的元素

5.篩選選擇器(方法)

篩選選擇器的功能與過濾選擇器有點相似，可是用法不同，篩選選擇器主要是方法。

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開始

 

 

四：jQuery操做樣式

1. css操做

功能：設置或者修改樣式，操做的是style屬性

  1.1設置樣式

Ø1.1.1設置單個樣式

//name：須要設置的樣式名稱

//value：對應的樣式值

css(name, value);

//如：

$("#one").css("background","gray");//將背景色修改成灰色

Ø1.1.2設置多個樣式

//參數是一個對象，對象中包含了須要設置的樣式名和樣式值

css(obj);

//如：

$("#one").css({

    "background":"gray",

    "width":"400px",

    "height":"200px"

});

Ø1.2.獲取樣式

//name:須要獲取的樣式名稱

css(name);

//如：

$("div").css("background-color");

注意：獲取樣式操做只會返回第一個元素對應的樣式值。

2. class操做

Ø2.1添加樣式類

//name：須要添加的樣式類名，注意參數不要帶點.

addClass(name);

//例子,給全部的div添加one的樣式。

$(「div」).addClass(「one」);

  2.2 移除樣式類

Ø2.2.1移除全部樣式類

//不帶參數，移除全部的樣式類

removeClass()

//例子，移除div全部的樣式類

$(「div」).removeClass();

Ø2.2.2移除單個樣式類

//name:須要移除的樣式類名

removeClass(「name」);

//例子，移除div中one的樣式類名

$(「div」).removeClass(「one」);

Ø2.3.判斷是否有樣式類

//name:用於判斷的樣式類名，返回值爲true或 false

hasClass(name)

//例子，判斷第一個div是否有one的樣式類

$(「div」).hasClass(「one」);

Ø2.4切換樣式類

//name:須要切換的樣式類名，若是有，移除該樣式，若是沒有，添加該樣式。

toggleClass(name);

//例子

$(「div」).toggleClass(「one」);

經驗總結：

1.若是操做到的樣式很是少，能夠考慮css方法

2.若是操做到的樣式很是多，那麼能夠經過class方法來操做，將樣式寫到一個class類裏面。

3.若是考慮到後期維護方便，將css從js中分離出來，那麼推薦使用class的方式來操做。

 

五：jquery動畫

jquery提供了三組動畫，這些動畫都是標準的、有規律的效果，jquery還提供了自定義動畫的功能。

1. 顯示與隱藏

顯示(show)與隱藏(hide)是一組動畫：

1.1show方法詳解：

show([speed], [callback]);

//speed(可選)：動畫的執行時間

 1.若是不傳，就沒有動畫效果。

 2.毫秒值(好比1000),動畫在1000毫秒執行完成(推薦)

     3.固定字符串，slow(200)、normal(400)、fast(600)，若是傳其餘字符串，則默認爲normal。

//callback(可選):執行完動畫後執行的回調函數

1.2hide方法詳解：

與show方法的用法徹底一致。

show/hide：修改的是元素的width、height、opacity。

1. 滑入與滑出

滑入(slideUp)與滑出(slideDown)是一組動畫，效果與捲簾門相似

slideUp/slideDown,使用方法與show/hide基本一致。

slideUp(speed, callback);

//speed(可選)：動畫的執行時間

 1.若是不傳，默認爲normal，注意區分show/hide。

 2.毫秒值(好比1000),動畫在1000毫秒執行完成(推薦)

     3.固定字符串，slow(200)、normal(400)、fast(600)

//callback(可選):執行完動畫後執行的回調函數

滑入滑出切換

$(selector).slideToggle(speed,callback);

//若是是隱藏狀態，那麼執行slideDown操做，若是是顯示狀態，那麼執行slideUp操做。

slideUp/slideDown：修改的是元素的height

3. 淡入與淡出

fadeIn/fadeOut使用方法與show/hide、slideDown/slideUp一致。

fadeIn(speed, callback);

//speed(可選)：動畫的執行時間

 1.若是不傳，默認是normal。

 2.毫秒值(好比1000),動畫在1000毫秒執行完成(推薦)

     3.固定字符串，slow(200)、normal(400)、fast(600)

//callback(可選):執行完動畫後執行的回調函數

淡入淡出切換：

fadeToggle(speed, callback);

//若是當前元素處於隱藏狀態，那麼執行fadeIn操做，若是處於顯示狀態，那麼執行fadeOut操做。

淡入淡出到某個值

與淡入淡出的區別：淡入淡出只能控制元素的不透明度從 徹底不透明 到徹底透明；而fadeTo能夠指定元素不透明度的具體值。而且時間參數是必需的！

fadeTo(speed, value, callback)//能夠設置具體的透明度

//speed（必須）

//value  0-1之間的數值(好比0.4)，表示淡到某一個值。

//callback(可選) 回調函數

fade系列方法：修改的是元素的opacity

4.動畫小結

4.1.jQuery給咱們提供了三組動畫，show/hide、slideUp/slideDown、fadeIn/fadeOut

4.2.動畫切換方法：slideToggle、fadeToggle，注意：show和hide沒有切換的方法。

4.3.淡入淡出到某個值：fadeTo方法。

4.4.show/slideDown/fadeIn三個是顯示效果、hide/slideUp/fadeOut三個是隱藏效果。

4.5.show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。這三種方法修改的這些值，都是帶數字的，由於帶了數字才能作漸變。

 

5.自定義動畫

animate：自定義動畫

$(selector).animate({params},[speed],[callback]);

// {params}：要執行動畫的CSS屬性，帶數字（必選）

// speed：執行動畫時長（可選）

// callback：動畫執行完後當即執行的回調函數（可選）

動畫支持的屬性：

http://www.w3school.com.cn/jquery/effect_animate.asp

6.  easing參數

控制動畫在不一樣元素的速度，默認爲「swing」

「swing」：在開頭和結尾移動慢，在中間移動速度快

「linear」：勻速移動

 

7. 動畫隊列問題

在同一個元素上執行多個動畫，那麼對於這個動畫來講，後面的動畫會被放到動畫隊列中，等前面的動畫執行完成了纔會執行。

8. 中止動畫

stop方法：中止動畫效果

stop(clearQueue, jumpToEnd);

//第一個參數：是否清除隊列

//第二個參數：是否跳轉到最終效果

最經常使用的中止動畫：stop();

六：jquery操做DOM(節點)

1.建立元素

//$(htmlStr)

//htmlStr：html格式的字符串

$(「<span>這是一個span元素</span>」);

2. 添加元素

Ø2.1添加新建的元素：

//方法一：將jQuery對象添加到調用者內部的最後面。

var $span = $(「<span>這是一個span元素</span>」);

$(「div」).append($span);

 

//方法二：參數傳字符串，會自動建立成jquery對象

$(「div」).append(「<span>這是一個span元素</span>」);

Ø2.2添加已經存在的元素

var $p = $(「p」);

$(「div」).append($p);

//注意：若是添加的是已經存在的元素，那麼會把以前的元素給幹掉。（相似於剪切的功能）。

相似的用法：append  prepend  after  before

3.使用html方法建立元素

//設置內容

$(「div」).html(「<span>這是一段內容</span>」);

//獲取內容

$(「div」).html()

4.清空元素

4.1  empty：清空指定節點的全部元素，自身保留(清理門戶)

$(「div」).empty();//清空div的全部內容（推薦使用，會清除子元素上綁定的內容，源碼）

4.2清空元素的第二種方法

$(「div」).html(「」);//使用html方法來清空元素，不推薦使用，會形成內存泄漏，綁定的事件並不會被清除。

5. 刪除元素

remove：相比於empty，自身也刪除（自殺）

$(「div」).remove();

6. 克隆元素

做用：複製匹配的元素

// 複製$(selector)所匹配到的元素（深度複製）

//cloneNode(true)

// 返回值爲複製的新元素，和原來的元素沒有任何關係了。即修改新元素，不會影響到原來的元素。（如克隆出來的機器人修改個名字並不會影響原來的那個模型的機器人）

$(selector).clone();