jQuery概念

時間 2019-11-12

標籤 jquery 概念欄目 JQuery 简体版

原文原文鏈接

官網： jQuery官網
在線API： jQuery在線API
W3School：W3School-jQuery教程（中文版哦）
下載jQuery：jQuery各版本下載
jQurey3.0： jQuery 3.0 更新
參考書：《鋒利的jQuery》、《jQuery技術內幕-深刻解析jQuery架構設計與實現原理》

1 jQuery的基本使用和jQuery選擇器

1.1 爲何要學jQuery？

1.1.1 學習JS的遇到的痛點

1 window.onload 事件只能出現一次
2 瀏覽器兼容性問題
3 簡單功能實現很繁瑣
4 屬性或方法的名字很長容易出錯

1.2 jQuery是什麼？

1.2.1 jQuery描述（理解）

jQuery是js的一個庫，封裝了咱們開發過程當中經常使用的一些功能，方便咱們來調用，提升了咱們的開發效率。

Js庫是把咱們經常使用的方法放到一個單獨的文件中，咱們用的時候，直接引用到頁面裏面來就能夠了。
animate.js是咱們本身封裝的庫，而jQuery是別人幫咱們封裝好的庫。

1.2.2 學習jQuery主要是學什麼？

1 學習jQuery提供的操做DOM的方法

目前這個階段，主要學習如何來使用jQuery操做DOM，其實就是學習jQuery封裝好的那些方法，
這些方法叫作 API（Application Programming Interface 應用程序編程接口）。
這些API的共同特色是：幾乎全都是方法。因此，在使用jQuery的API時，都是方法調用，
也就是說要加小括號()，小括號裏面是相應的參數，參數不一樣，功能不一樣。

1.3 如何使用jQuery？（重點）

使用步驟：

1．引入jQuery文件
2．入口函數
3．功能實現代碼（事件處理）

案例：點擊按鈕設置文字和展現div功能

1.3.1 jQuery的優點

1.4 jQuery詳細解釋

1.4.1 版本介紹（瞭解）

jQuery的三個版本：

v1.xx 版本（使用）
v2.xx 版本 和 v3.xx 版本（最新版，是v2.xx版本的延續）
v3.xx 版本包含了兩個版本：普通版和瘦身版（提交更小）

版本的區別：2.x版本和3.x版本，再也不支持IE六、七、8

考慮兼容性使用：1.xx版本

各版本的兼容性

v1.xx 版本：          兼容 IE6-8，以及其餘瀏覽器
v2.xx 和 v3.xx 版本： 兼容 IE9+， 以及其餘瀏覽器

同版本兩個文件的區別：（壓縮和不壓縮的區別）

min：壓縮版，壓縮事後，體積會更小

壓縮指的是：把註釋、空格、換行所有去掉，把變量名稱儘量的換成更加簡短的字符。
壓縮的主要目的：就是讓文件變的更小。

兩個文件的選擇建議：
平時開發過程當中，這兩個文件使用哪一個均可以；可是，項目上線的時候，必定要使用壓縮版。

1.4.2 引包注意點（理解）

1 先引用jQuery文件再寫jQuery代碼
2 src路徑要正確

1.4.3 jQuery的入口函數（重點）

方式一：

$(document).ready(function(){
    // 功能代碼
});

方式二：

$(function(){
    // 功能代碼
});

1.4.4 jQuery入口函數與js入口函數的區別（理解）

js入口函數指的是：window.onload = function() {};
區別：

一、書寫個數不一樣
Js入口函數只能出現一次，出現屢次會存在事件覆蓋的問題。
jQuery的入口函數，能夠出現任意屢次，並不會存在事件覆蓋問題。

二、執行時機不一樣
Js入口函數是在文檔和全部的其餘資源文件加載完成後，才執行。
這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。

jQuery的入口函數，是在文檔加載完成後，就執行。文檔加載完成指的是：DOM樹加載完成後，就能夠操做DOM了，
不用等到全部的外部資源都加載完成。

文檔加載的順序：從上往下，邊解析邊執行。

1.4.5 jQuery的$符號（重點）

Js命名規範容許出現的字符有：數字、字母、下劃線、$。
Js命名規範容許做爲變量命名開頭的字符有：字母、下劃線、$；可是，不容許以數字做爲變量命名的開頭。css
示例：html

var $ = "我是字符串";
var $ = 123;
function $(){
    alert("我是函數$");
}
$(); // 調用咱們自定義的函數$

jQuery裏面的$符號其實是一個函數

// jQuery裏面使用$的方式
$(document).ready(function(){ }); // 調用入口函數
$(function(){ });                 // 調用入口函數
$("#btnShow")                     // 獲取id屬性爲btnShow的元素
$("div")                          // 獲取全部的div元素

jQuery裏面的$函數，根據傳入參數的不一樣，進行不一樣的調用，實現不一樣的功能。返回的是jQuery對象

jQuery這個js庫，除了$以外，還提供了另一個函數：jQuery
jQuery函數跟$函數的關係：jQuery === $   => true

1.4.6 jQuery對象和DOM對象的相互轉換（難點）

DOM對象：經過DOM的API獲取到的對象

// btn就是一個DOM對象
var btn = document.getElementById("btnShow");

jQuery對象：經過jQuery的API獲取到的對象

// $btn就是一個jQuery對象
var $btn = $("#btnShow");

jQuery對象是包裝的DOM對象的集合，即：包裝集node
DOM對象轉換成jQuery對象：jquery

var $btn = $(btn); // 此時就把DOM對象btn轉換成了jQuery對象$btn

jQuery對象轉換成DOM對象：

// 方式一（推薦使用此方式）
var btn1 = $btn[0];
// 方式二
var btn2 = $btn.get(0);

以上兩種方式都要記住，使用哪種均可以。

全部這些，都體現了jQuery對js的封裝！

1.5 JS跟jQuery的區別是什麼？（理解）

1.6 jQuery選擇器

1.6.1 JS提供的選擇DOM元素的方法

考慮兼容性的話，js裏面提供的選擇DOM的方法只有兩個：

// 經過id屬性獲取指定元素
document.getElementById();  

// 經過標籤名獲取指定元素
document.getElementsByTagName();

1.6.2 強大的jQuery選擇器（重點）

jQuery實現了從CSS1到CSS3全部的選擇器以及其餘經常使用的選擇器，各類選擇器之間能夠相互代替

1.6.3 jQuery選擇器（重點）

ID選擇器（通常儘可能用ID選擇器，效率最高）
- $("#id")
標籤選擇器
- $('p')
類選擇器
- $(".className")
後代選擇器
- $("li .link")
父子選擇器
- $("ul > li")
僞類選擇器
- $("ul li:eq(3)")
- $("li:even")
- $("li:odd")
表單選擇器
- $(":checkbox")
- $(":checked")
- $(":text")
屬性選擇器
- $("li[id]")
- $("li[id='link']")

1.6.4 經常使用選擇器彙總

*               $("*")              全部元素
#id             $("#lastname")      id="lastname" 的元素
.class          $(".intro")         全部 class="intro" 的元素
element         $("p")              全部 <p> 元素
.class.class    $(".intro.demo")    全部 class 具備 "intro" 且 "demo" 的元素
s1,s2,s3        $("th,td,.intro")   全部帶有匹配選擇的元素

:even       $("tr:even")    全部偶數 <tr> 元素
:odd        $("tr:odd")     全部奇數 <tr> 元素
:first      $("p:first")    第一個 <p> 元素
:last       $("p:last")     最後一個 <p> 元素

:eq(index)      $("ul li:eq(3)")    列表中的第四個元素（index 從 0 開始）
:gt(index)      $("ul li:gt(3)")    列出 index 大於 3 的元素 greater than
:lt(index)      $("ul li:lt(3)")    列出 index 小於 3 的元素 less than
:not(selector)  $("input:not(:empty)")  全部不爲空的 input 元素

:header         $(":header")        全部標題元素 <h1> - <h6>
:animated       $(":animated")      全部正在執行動畫的元素

:contains(text)     $(":contains('W3School')")  包含指定字符串的全部元素
:empty              $(":empty")                 無子（元素）節點的全部元素
:hidden             $("p:hidden")               全部隱藏的 <p> 元素
:visible            $("table:visible")          全部可見的表格

[attribute]         $("[href]")         全部帶有 href 屬性的元素
[attribute=value]   $("[href='#']")     全部 href 屬性的值等於 "#" 的元素
[attribute!=value]  $("[href!='#']")    全部 href 屬性的值不等於 "#" 的元素
[attribute$=value]  $("[href$='.jpg']") 全部 href 屬性的值包含以 ".jpg" 結尾的元素

:input      $(":input")         全部 <input> 元素
:text       $(":text")          全部 type="text" 的 <input> 元素
:password   $(":password")      全部 type="password" 的 <input> 元素
:radio      $(":radio")         全部 type="radio" 的 <input> 元素
:checkbox   $(":checkbox")      全部 type="checkbox" 的 <input> 元素
:submit     $(":submit")        全部 type="submit" 的 <input> 元素
:reset      $(":reset")         全部 type="reset" 的 <input> 元素
:button     $(":button")        全部 按鈕元素（<button></button> 或者 input="button"）
:image      $(":image")         全部 type="image" 的 <input> 元素
:file       $(":file")          全部 type="file" 的 <input> 元素

:enabled    $(":enabled")   全部激活的 input 元素
:disabled   $(":disabled")  全部禁用的 input 元素
:selected   $(":selected")  全部被選取的 input 元素
:checked    $(":checked")   全部被選中的 input 元素

1.6.5 jQuery選擇方法

獲取父級元素

* $(selector).parent();     //獲取直接父級
$(selector).parents('p'); //獲取全部父級元素直到html

獲取子代和後代的元素

* $(selector).children();   //獲取直接子元素
* $(selector).find("span"); //獲取全部的後代元素  find方法 可能用的多。

獲取同級的元素

* $(selector).siblings()    //全部的兄弟節點
$(selector).next()        //下一個兄弟節點
$(selector).nextAll()     //後面的全部節點
$(selector).prev()        //前面一個的兄弟節點
$(selector).prevAll()     //前面的全部的兄弟節點

過濾方法

* $("p").eq(1);           //取第n個元素
$("div p").last();        //取最後一個元素
$("div p").first();       //取第一個元素
$("p").filter(".intro");  //過濾，選擇全部帶有 .intro 的p標籤
$("p").not(".intro");     //去除，跟上面的filetr正好相反

獲取當前元素的索引號

* $("li:eq(2)").index();        // 獲取索引號

2 jQuery經常使用DOM操做

2.1 樣式操做（重點）

2.1.1 基本樣式屬性操做

做用：設置或獲取元素的樣式屬性值

設置樣式屬性操做

設置單個樣式：

// 第一個參數表示：樣式屬性名稱
// 第二個參數表示：樣式屬性值
$(selector).css("color", "red");


設置多個樣式：（也能夠設置單個）
// 參數爲 {}（對象）
$(selector).css({"color": "red", "font-size": "30px"});

獲取樣式屬性操做：

// 參數表示要獲取的 樣式屬性名稱
var fs = $(selector).css("font-size");

2.1.2 類樣式操做

添加類樣式：

做用：爲指定元素添加類className

$(selector).addClass("liItem");

移除類樣式：

做用：爲指定元素移除類 className

$(selector).removeClass("liItem");
$(selector).removeClass(); 不指定參數，表示移除被選中元素的全部類

判斷有沒有類樣式：

做用：判斷指定元素是否包含類 className

var hasC = $(selector).hasClass("liItem");
此時，會返回true或false

切換類樣式：

做用：爲指定元素切換類 className，該元素有類則移除，沒有指定類則添加。

$(selector).toggleClass("liItem");

注意點：

操做類樣式的時候，全部的類名 都不帶點（.）

經驗：
1 操做的樣式很是少，那麼能夠經過.css()這個 方法來操做
2 操做的樣式不少，那麼要經過使用類的方式來操做

3 若是考慮之後維護方便（把CSS從js中分離出來）的話，推薦使用類的方式來操做。類比CSS書寫位置（把css從html中分離出來）

2.2 jQuery動畫

前面內容特點總結：簡約、"粗暴"、乾淨利落、直截了當

jQuery動畫是：
jQuery提供的一組網頁中常見的動畫效果，這些動畫是標準的、有規律的效果；
同時還提供給咱們了自定義動畫的功能。

2.2.1 隱藏和顯示

顯示方法 show()

做用：讓匹配的元素展現出來

// 用法一：
// 參數爲數值類型，表示：執行動畫時長
/* 單位爲：毫秒（ms），參數2000表示動畫執行時長爲2000毫秒，即2秒鐘 */
$(selector).show(2000);

// 用法二：
// 參數爲字符串類型，是jQuery預設的值，共有三個，分別是：slow、normal、fast
/* 跟用法一的對應關係爲： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show("slow");

// 用法三：
// 參數一：能夠是數值類型或者字符串類型
// 參數二：動畫執行完後當即執行的回調函數
$(selector).show(2000, function() {});

// 用法四：
// 不帶參數，做用等同於 css("display", "block")
/* 注意：此時沒有動畫效果 */
$(selector).show();

注意：
jQuery預設的三組動畫效果的語法幾乎一致：
參數能夠有兩個，第一個是動畫的執行時長，第二個是動畫執行完成後的回調函數。
第一個參數能夠是：指定字符或者毫秒數

隱藏方法 hide()

做用：讓匹配元素隱藏掉（用法參考show方法）
$(selector).hide(1000); 
$(selector).hide("slow");
$(selector).hide(1000, function(){});
$(selector).hide();

2.2.2 滑入滑出動畫

滑入動畫效果 slideDown()

做用：讓元素如下拉動畫效果展現出來
$(selector).slideDown(speed, callback);
$(selector).slideDown();

滑出動畫效果 slideUp()

做用：讓元素以上拉動畫效果隱藏起來
$(selector).slideUp(speed, callback);

滑入滑出切換動畫效果 slideToggle()

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

注意點：省略參數或者傳入不合法的字符串，那麼則使用默認值：400毫秒（一樣適用於fadeIn/slideDown/slideUp）

2.2.3 淡入淡出動畫

1 淡入動畫效果
做用：讓元素以淡淡的進入視線的方式展現出來
$(selector).fadeIn(speed, callback);

2 淡出動畫效果
做用：讓元素以漸漸消失的方式隱藏起來
$(selector).fadeOut(1000);

3 淡入淡出切換動畫效果
做用：經過改變不透明度，切換匹配元素的顯示或隱藏狀態
$(selector).fadeToggle('fast', callback);

改變不透明度到某個值

做用：改變匹配元素的不透明度 
// 用法有別於其餘動畫效果
// 第一個參數表示：時長
// 第二個參數表示：不透明度值，取值範圍：0-1
$(selector).fadeTo(1000, .5); //  0全透，1全不透

// 第一個參數爲0，此時做用至關於：.css("opacity", .5);
$(selector).fadeTo(0, .5);


與淡入淡出的區別：淡入淡出只能控制元素的不透明度從 徹底不透明 到 徹底透明；
而fadeTo能夠指定元素不透明度的具體值。

jQuery提供的動畫使用方法總結：

2.2.4 自定義動畫

jQuery內置動畫的規律：

jQuery提供的這幾個動畫效果控制的CSS屬性包括：高度、寬度、不透明度。{height: 400px; width: 300px; opacity: .4;}

這三個CSS屬性的共性是：
1 樣式屬性的值只有一個
2 這個值是數值（去掉單位後）。

注意：全部可以執行動畫的屬性必須只有一個數字類型的值。
好比：要改變字體大小，要使用：fontSize（font-size），不要使用：font

動畫支持的屬性編程

自定義動畫 animate()

做用：執行一組CSS屬性的自定義動畫
// 第一個參數表示：要執行動畫的CSS屬性（必選）
// 第二個參數表示：執行動畫時長（可選）
// 第三個參數表示：動畫執行完後當即執行的回調函數（可選）
$(selector).animate({params}, speed, callback);

2.2.5 中止動畫 stop() （瞭解）

做用：中止當前正在執行的動畫

// 第一個參數表示是否清空全部的後續動畫
// 第二個參數表示是否當即執行完當前正在執行的動畫
$(selector).stop(clearQueue, jumpToEnd);

解釋：

stop(true, true)   後續動畫不會執行，當前動畫當即跳到結束的位置
stop(true, false)  後續動畫不會執行，當前動畫當即中止
stop(false, true)  當即執行後續動畫，當前動畫當即跳到結束的位置
stop(false, false) 當即執行後續動畫，當前動畫當即中止

注意：若是元素動畫尚未執行完，調用sotp() 那麼回調函數不會被執行

2.4 jQuery節點操做

2.4.1 動態建立元素

// $()函數的另一個做用：動態建立元素
var $spanNode = $("<span>我是一個span元素</span>");

2.4.2 添加元素（重點）

append() 追加元素（重點）

做用：在被選元素內部的最後一個子元素（或內容）後面插入內容（頁面中存在或者建立出來的元素均可以）

// 在$(selector)中追加$node
$(selector).append($node);
// 在$(selector)中追加div元素，參數爲htmlString
$(selector).append('<div></div>');

注意：
若是是頁面中存在的元素，那麼調用append()後，會把這個元素從原先的位置移除，而後再插入到新的位置。
     若是是給多個目標追加一個元素，那麼append()方法的內部會複製多份這個元素，而後追加到多個目標裏面去。（最好不要這麼作）
經常使用參數：htmlString 或者 jQuery對象

不經常使用操做：（用法跟append()方法基本一致）（瞭解）

$(selector).appendTo(node);  做用：同append()，區別是：把$(selector)追加到node中去
$(selector).prepend(node);   做用：在元素的第一個子元素前面追加內容或節點
$(selector).after(node);     做用：在被選元素以後，做爲兄弟元素插入內容或節點
$(selector).before(node);    做用：在被選元素以前，做爲兄弟元素插入內容或節點

2.4.3 html建立元素（重點）

做用：設置或返回所選元素的html內容（包括 HTML 標記）
設置內容的時候，若是是html標記，會動態建立元素，此時做用跟js裏面的 innerHTML屬性相同

// 動態建立元素
$(selector).html("<span>傳智播客</span>");
// 獲取html內容
$(selector).html();

總結：推薦使用html("<span></span>")方法來建立元素或者html("")清空元素

2.4.4 清空元素

// 清空指定元素的全部子元素（光桿司令）
// 沒有參數
$(selector).empty();
$(selector).html("");

// "自殺" 把本身（包括全部內部元素）從文檔中刪除掉
$(selector).remove();

2.4.5 複製元素

做用：複製匹配的元素

// 複製$(selector)所匹配到的元素
// 返回值爲複製的新元素
$(selector).clone();

2.5 操做form表單（重點）

2.5.1 屬性操做

設置屬性：
// 第一個參數表示：要設置的屬性名稱
// 第二個參數表示：改屬性名稱對應的值
$(selector).attr("title", "傳智播客");

獲取屬性：
// 參數爲：要獲取的屬性的名稱，改操做會返回指定屬性對應的值
$(selector).attr("title");
此時，返回指定屬性的值

移除屬性：
// 參數爲：要移除的屬性的名稱
$(selector).removeAttr("title"); 

注意：checked、selected、disabled要使用 .prop() 方法。
prop方法一般用來影響DOM元素的動態狀態，而不是改變的HTML屬性。例如：input和button的disabled特性，以及checkbox的checked特性。
細節參考：http://api.jquery.com/prop/

2.5.2 值和內容

val()方法：
做用：設置或返回表單元素的值，例如：input,select,textarea的值
// 獲取匹配元素的值，只匹配第一個元素
$(selector).val();
// 設置全部匹配到的元素的值
$(selector).val("具體值");

text() 方法:
做用：設置或獲取匹配元素的文本內容
//獲取操做不帶參數（注意：這時候會把全部匹配到的元素內容拼接爲一個字符串，不一樣於其餘獲取操做！）
$(selector).text();
//設置操做帶參數，參數表示要設置的文本內容
$(selector).text("我是內容");

2.6 其餘樣式操做（瞭解）

$(selector).height()        設置或返回匹配元素的高度。// 數值類型
$(selector).width()         設置或返回匹配元素的寬度。// 數值類型
$(selector).css("height");  字符串類型

$(selector).offset()        返回第一個匹配元素相對於文檔左上角的位置。left,top
$(selector).offsetParent()  返回最近的定位祖先元素。
$(selector).position()      返回第一個匹配元素相對於父元素的位置。
$(window).scrollLeft()      設置或返回匹配元素相對滾動條左側的偏移。
$(window).scrollTop(0)      設置或返回匹配元素相對滾動條頂部的偏移。

對scrollTop()的理解：
垂直滾動條位置 是可滾動區域 在 可視區域上方的 被隱藏區域的高度。
若是滾動條在最上方沒有滾動 或者 當前元素沒有出現滾動條，那麼這個距離爲0

$(selector).scroll(function() {}); 滾動事件

3 jQuery事件機制和補充

JS： 
    W3C : addEventListener / removeEventListener
    IE ： attachEvent / detachEvent

jQuery的事件機制，指的是：jQuery對JavaScript操做DOM事件的封裝，包括了：事件綁定、事件解綁、事件觸發。

綁定事件示例：

JavaScript：
btn.onclick = function() {}; 表示：給這個按鈕綁定事件

jQuery：
$btn.click(function() {});   表示：給按鈕綁定事件

3.1 jQuery事件的發展歷程（瞭解）

簡單事件綁定 >> bind事件綁定 >> delegate事件綁定 >> on【重點】

簡單事件綁定

click(handler)              單擊事件
blur(handler)               失去焦點事件
mouseenter(handler)         鼠標進入事件
mouseleave(handler)         鼠標離開事件
dblclick(handler)           雙擊事件
change(handler)             改變事件，如：文本框值改變，下來列表值改變等
focus(handler)              得到焦點事件
keydown(handler)            鍵盤按下事件

其餘參考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

bind方式（1.7之後的jQuery版本被on取代）

做用：給匹配到的元素直接綁定事件

// 綁定單擊事件處理程序
第一個參數：事件類型
第二個參數：事件處理程序
$("p").bind("click mouseenter", function(e){
    //事件響應方法
});

$("button").bind({
    "click": function() {
        alert("click");
    },
    "mouseenter": function() {
        alert("enter");
    }
});

比簡單事件綁定方式的優點：
能夠同時綁定多個事件，好比：bind("mouseenter mouseleave", function(){ });

缺點：要綁定事件的元素必須存在文檔中。

delegate方式（特色：性能高，支持動態建立的元素）

做用：給匹配到的元素綁定事件，對支持動態建立的元素有效
// 第一個參數：selector，要綁定事件的元素
// 第二個參數：事件類型
// 第三個參數：事件處理函數
$(".parentBox").delegate("p", "click", function(){
    //爲 .parentBox下面的全部的p標籤綁定事件
});
與前兩種方式最大的優點：減小事件綁定次數提升效率，支持動態建立出來的元素綁定事件！

3.1.1 on方式（最現代的方式，兼容z epto(移動端相似jQuery的一個庫，強烈建議使用的方式）（重點）

jQuery1.7版本後，jQuery用on統一了全部的事件處理的方法
做用：給匹配的元素綁定事件，包括了上面全部綁定事件方式的優勢

語法：
// 第一個參數：events，綁定事件的名稱能夠是由空格分隔的多個事件（標準事件或者自定義事件）
// 第二個參數：selector, 執行事件的後代元素
// 第三個參數：data，傳遞給處理函數的數據，事件觸發的時候經過event.data來使用
// 第四個參數：handler，事件處理函數
$(selector).on(events[,selector][,data],handler);

// 表示給$(selector)綁定事件，當必須是它的內部元素span才能執行這個事件
$(selector).on("click", "span", function() {});

// 綁定多個事件
// 表示給$(selector)匹配的元素綁定單擊和鼠標進入事件
$(selector).on("click mouseenter", function(){ });

3.1.2 事件解綁

unbind() 方式和 undelegate() 方式

做用：解綁 bind方式綁定的事件
$(selector).unbind(); //解綁全部的事件
$(selector).unbind("click"); //解綁指定的事件

做用：解綁delegate方式綁定的事件
$( selector ).undelegate(); //解綁全部的delegate事件
$( selector).undelegate( "click" ); //解綁全部的click事件

off解綁on方式綁定的事件（重點）

// 解綁匹配元素的全部事件
$(selector).off();
// 解綁匹配元素的全部click事件
$(selector).off("click");

// 解綁全部代理的click事件，元素自己的事件不會被解綁 
$(selector).off( "click", "**" );

3.1.3 事件觸發

$(selector).click();            // 簡單事件觸發，觸發 click事件
$(selector).trigger("click");   // trigger方法觸發事件
$(selector).triggerHandler("focus"); // triggerHandler觸發 事件響應方法，不觸發瀏覽器行爲 好比:文本框得到焦點的默認行爲

3.1.4 jQuery事件對象介紹

event.data                  傳遞給事件處理程序的額外數據

event.currentTarget         等同於this
event.delegateTarget        給誰綁定的事件，這個就是誰
event.target                觸發事件源，不必定===this 單擊的誰，target就是誰

event.pageX                 鼠標相對於頁面左邊的位置

* event.stopPropagation()；   阻止事件冒泡
* event.preventDefault();     阻止默認行爲

event.type                  事件類型："click"，"dblclick"…
event.which                 鼠標的按鍵類型：左1 中2 右3
event.keyCode               鍵盤按鍵代碼

return false; // 同時具備阻止冒泡和阻止默認行爲的功能
this：哪一個元素觸發的事件，this就指向這個元素。

3.2 jQuery補充

3.2.1 鏈式編程和隱式迭代

// 鏈式編程代碼示例
$("li").parent("ul").parent("div").siblings("div").children("div").html("內容");
鏈式編程原理：return this;
一般狀況下，只有設置操做才能把鏈式編程延續下去。由於獲取操做的時候，會返回獲取到的相應的值，沒法返回 this。

end(); // 結束當前鏈最近的一次過濾操做，而且返回匹配元素以前的一次狀態。

隱式迭代
// 設置操做
$("div").css("color", "red");

// 獲取操做
$("div").css("color"); // 返回第一個元素的值
隱式迭代的意思是：在方法的內部會爲匹配到的全部元素進行循環遍歷，執行相應的方法；
而不用咱們再進行循環，簡化咱們的操做，方便咱們調用。

注意點：若是獲取的是多元素的值，返回的是第一個元素的值。

3.2.2 each方法

有了隱式迭代，爲何還要使用each函數遍歷？

大部分狀況下是不須要使用each方法的，由於jQuery的隱式迭代特性。
若是要對每一個元素作不一樣的處理，這時候就用到了each方法

做用：遍歷jQuery對象集合，爲每一個匹配的元素執行一個函數

$(selector).each(function(index, element){
// 參數一表示當前元素在全部匹配元素中的索引號
// 參數二表示當前元素（DOM對象）

});

$.each(object, function(k, v) {});

3.2.3 多庫共存（瞭解）

此處多庫共存指的是：jQuery佔用了$ 和jQuery這兩個變量。當在同一個頁面中引用了jQuery這個js庫，
而且引用的其餘庫（或者其餘版本的jQuery庫）中也用到了$或者jQuery這兩個變量，那麼，
要保證每一個庫都能正常使用，這時候就有了多庫共存的問題。

// 模擬另外的庫使用了 $ 這個變量
// 此時，就與jQuery庫產生了衝突
var $ = { name : "itecast" };

解決方式：
$.noConflict();

讓jQuery釋放對$的控制權，讓其餘庫可以使用$符號，達到多庫共存的目的。此後，只能使用jQuery來調用jQuery提供的方法

3.2.4 jQuery插件機制

jQuery這個js庫，雖然功能強大，但也不是面面俱到包含全部的功能。
jQuery是經過插件的方式，來擴展它的功能：
當你須要某個插件的時候，你能夠"安裝"到jQuery上面，而後，使用。
當你再也不須要這個插件，那你就能夠從jQuery上"卸載"它。
（聯想：手機軟件，安裝的app就比如插件，用的時候安裝上，不用的時候卸載掉）

3.2.5 使用第三方插件

1 jQuery.color.js 插件

animate()自定義動畫：不支持背景的動畫效果

使用步驟：
1. 引入jQuery文件
2. 引入插件
3. 使用插件

2 jQueryUI 插件

使用場景：網站的管理後臺

jQueryUI專指由jQuery官方維護的UI（用戶接口）方向的插件。
官方API：http://api.jqueryui.com/category/all/
其餘教程：http://www.runoob.com/jqueryui/jqueryui-intro.html

基本使用:
1. 引入jQueryUI的樣式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能

3.2.6 製做插件

如何建立jQuery插件：
http://learn.jquery.com/plugins/basic-plugin-creation/

全局jQuery函數擴展方法
$.pluginName = function() {};
$.pluginName();

jQuery對象擴展方法
$.fn.pluginName = function() {};
$(selector).pluginName();