從零開始學 Web 之 jQuery（八）each，多庫共存，包裝集，插件

你們好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

1、each 方法

each 方法用來遍歷 jQuery 對象的，它的參數是一個事件處理函數，這個事件處理函數有兩個參數，第一個參數是索引，第二個參數時索引對應的 DOM 對象，使用的時候注意轉成 jQuery 對象。

語法：

// 參數1：元素集合索引
// 參數2：索引對應的DOM元素
元素集合.each(function (index, ele) {
  // ...
})

示例：

$("#uu>li").each(function (index, ele) {
    $(ele).css("opacity", (index + 1) / 10);
})

2、多庫共存

由來：

當引入多個 js 庫，而這些 js 庫中有的方法具備相同的名稱，那麼在調用這個方法的時候就會出現衝突。

解決辦法：

權限轉讓：var 新方法名 = 舊方法名.noConflict();

以後，全部使用舊方法名的地方均可以用新方法名代替。

3、包裝集

咱們獲取的 jQuery 對象其實都是 DOM 對象的集合，從 jQuery 對象轉換成 DOM 集合的方法也能夠看出。jQuery 對象轉換 DOM 對象的方式：jQuery對象[0]，這就說明jQuery 對象其實都是DOM對象的集合。

既然 jQuery 對象是一個集合，那麼就有 length 屬性。這個 length 屬性做用重大，它能夠幫助咱們在建立元素的只建立一個。

示例：點擊按鈕，在div中只添加一個p標籤。

$("#btn").click(function (param) {
  if ($("#pp").length == 0) {
    $("#dv").append($("<p id='pp'>標籤p</p>"));
  }
});

4、幾個元素的寬高屬性

元素.innerWidth()/innerHeight() // 方法返回元素的寬度/高度（包含padding，不含邊框）
元素.outerWidth()/outerHeight() // 方法返回元素的寬度/高度（包含padding，含邊框）
元素.outerWidth(true)/outerHeight(true) // 方法返回元素的寬度/高度（包含padding，含邊框，含外邊距）

5、插件

一、什麼是插件？

插件其實就是一個功能的實現。包括所用到的 css ，jQuery 等的全部代碼的封裝集合。咱們在使用插件的時候只須要引入其對應的 css ，jQuery 文件以及html代碼，通過少量的修改就能夠獲得類似的效果，大大節省了開發的時間，避免了重複造輪子。

插件下載下來通常包括下面幾個部分：

css 文件夾：包括 css 文件

js 文件夾：jQuery 官方 js 文件， 插件的 js文件

index.html ：演示文件（咱們能夠直接在上面改爲本身須要的文件，或者copy裏面的代碼到本身的文件中）

二、插件的製做和使用

jQuery插件製做方式主要有三種：

一、經過$.extend()來擴展jQuery；

二、經過$.fn 向jQuery添加新的方法；

三、經過$.widget()應用jQuery UI的部件工廠方式建立。

參考連接（教你開發 jQuery插件）：http://www.javashuo.com/article/p-mivsmfqj-n.html

jQuery 插件的使用：

一、導入下載下來的 css 文件

二、導入 jQuery 官方庫

三、導入插件的 jQuery 庫文件

四、複製 index.html 相關代碼到本身的文件中。