jQuery入門筆記之（零）思考與基礎核心

三省吾身丶丶發表於2015-12-30
jQuery筆記

轉自個人部落格

思考篇

一. 什麼是 jQuery?

jQuery是一個JavaScript庫，它通過封裝原生的JavaScript函式得到一整套定義好的方

法。
它的作者是JohnResig，於2006年建立的一個開源專案，隨著越來越多開發者的加入，jQuery已經整合了JavaScript、CSS、DOM和Ajax於一體的強大功能。
它可以用最少的程式碼，完成更多複雜而困難的功能，從而得到了開發者的青睞。

jQuery的版本

隨著jQuery的不斷進化，發展也變成了兩條進化線：

2006 年 8 月釋出了 jQuery1.0，第一個穩定版本，具有對 CSS 選擇符、事件處理和
Ajax 互動的支援。

2010 年 2 月釋出了 jQuery1.4.2，新增了.delegate()和.undelegate()兩個新方法，提升了靈活性和瀏覽器一致性，對事件系統進行了升級。

2011 年 1 月釋出了 jQuery1.5，重寫了 AJAX 元件，增強了擴充套件性和效能。

2013 年 5 月釋出了 jQuery1.10，增加了一些功能。

到此，jQuery的以上版本都有非常好的瀏覽器相容性，支援所有瀏覽器，當然包括了IE6/7/8。但是直到下面這條線的出現：

2013 年 4 月釋出了 jQuery2.0，5 月釋出了 jQuery2.0.2，一個重大更新版本，不在支援 IE6/7/8，體積更小，速度更快。

目前最新版本分別是jQuery 2.1.4 和jQuery 1.11.3 。

現在兩條線同時發展，可供大家選擇。

根據專案要求來選擇版本，下面有介紹

關於版本學習的問題：

版本的版本號升級主要有三種：

  • 第一種是大版本升級，比如1.x.x升級到2.x.x，這種升級規模是最大的，改動的地方是最多的，週期也是最長的，jQuery從1.x.x到 2.x.x用了7年。

  • 第二種是小版本更新，比如1.7升級到1.8，改動適中，增加或減少了一些功能一般週期半年到一年左右。

  • 第三種是微版本更新，比如1.8.1升級到1.8.2，修復一些bug或錯誤之類。

版本的內容升級主要也有三種：

  • 第一種是核心庫的升級，比如優化選擇符、優化 DOM或者AJAX等；這種升級不影響開發者的使用。

  • 第二種是功能性的升級，比如剔除一些過時的方法、新增或增強一些方法等等；這種升級需要了解和學習。

  • 第三種就是 BUG 修復之類的升級，對開發者使用沒有影響。

所以綜上所述：
有一半左右的升級都是內部優化，升級到新版本並不需要任何學習成本。就算在新的版本增加了一些功能，只需要幾分鐘瞭解一下即可使用，無需清零之前的知識，只需後續累加。
當然，在早期的 jQuery 版本都建立了最常用的功能，而新版本中增加的功能，也不是最常用的，無需立即學習，立馬用起。

選擇一個版本開始學習吧！

二. jQuery 的功能和優勢

jQuery 作為 JavaScript 封裝的庫，他的目的就是為了簡化開發者使用 JavaScript。主要
功能有以下幾點：

  1. 像 CSS 那樣訪問和操作 DOM

  2. 修改 CSS 控制頁面外觀

  3. 簡化 JavaScript 程式碼操作

  4. 事件處理更加容易

  5. 各種動畫效果使用方便

  6. 讓 Ajax 技術更加完美

  7. 基於 jQuery 大量外掛

  8. 自行擴充套件功能外掛

jQuery 最大的優勢，就是特別的方便。比如模仿 CSS 獲取 DOM，比原生的 JavaScript
要方便太多。並且在多個 CSS 設定上的集中處理非常舒服，而最常用的 CSS 功能又封裝到
單獨的方法，感覺非常有心。
最重要的是 jQuery 的程式碼相容性非常好，你不需要總是頭疼著考慮不同瀏覽器的相容問題。

其次像《編寫高質量程式碼–web前端開發修煉之道》作者曹劉陽在微博上說的jq的強大真的只在那個$選擇器嗎?太小看jq了，私以為jq真正強大和堅挺的原因有3：

1、工業標準，我不知道未來還有誰能像jq一樣，api上犀牛書。總之是前無古人，後面恐怕也難有來者。
工業標準有多可怕和難以撼動，會超出你想像。看看php就知道了。
2、jq的api設計對於原生js的改良。
3、jq豐富的外掛積累。

我也疑惑過，隨著現在前端框架angular和react的流行，亂花漸欲迷人。微博上神仙打架，疑惑的是我們這些前端初學者，不過我是這樣認為的：
與其把時間花在前端框架的選擇上。不如先把花在這個已經成為工業標準的庫上，萬物殊途同歸 ，最終還是在JS做文章不是嗎？

三. 是否相容IE低版本

主要是從下面幾個方面考慮：

1. 成本控制

  • 專案如果不是老站升級，也不是大門戶的新聞站，成本控制和儘快
    上線測試才是最重要的。

  • 而如果新站一味要求全面相容，會導致成本加劇（隨著功能多少，
    成本倍率增加）。

  • 為了鎖緊時間，就不停的加班再加班，又導致員工牴觸，工作效率降低，這樣成本不停的再累加。最終很多項
    目，根本沒上線就失敗了。

2. 使用者選擇

高質量使用者和低質量使用者

  • 例如一個3D遊戲，和一款新聞應用：網易和騰訊在他們的新聞應用上，他們相容了幾乎所有的手
    機平臺，比如 IOS、安卓、黑莓、塞班等等，因為新聞應用的核心在新聞，而新聞的使用者基

數巨大，需要兼顧高質量和低質量使用者。而騰訊在 IOS 上的幾十個應用，除了新聞、QQ、
瀏覽器，其他的基本都只有 IOS 和安卓，在塞班和黑莓及其他上就沒有了。

  • 所以，你的應用核心是哪方面？相容的成本有多大？會不會導致成本控制問題？使用者選
    擇尤為重要，放棄低質量使用者也是一種成本控制。

  • 在使用者基數龐大的專案上，放棄低質量使用者就有點愚笨，而你的使用者基數只有 1000 人，而低質
    量使用者有 50 人，那麼為了這 50 人去做相容，那麼 3 倍的成本就變得非常的昂貴。

3. 專案側重點

你的專案重點在哪裡？是為了看新聞？是為了宣傳線下產品？

那麼你其實有必要相容低版本瀏覽器。
首先這種型別的站不需要太好的使用者體驗，不需要太多的互動操作，只是看，
而相容的成本比較低，並且核心在新聞或產品！

但如果你的專案有大量的互動、大量的操作，相容成本較高，比如全球最大的社交網已經不相容 IE6/7，就是這個原因。所以，專案並不是一味的全面相容，或者全面不相容，主要看你的專案側重點在哪裡！

4. 使用者體驗

如果你的專案在相容低版本瀏覽器成本巨大，比如社交網，有大量的 JS 和 AJAX 操作。

那麼相容 IE6/7 的成本確實很高，如果相容，使用者體驗就會很差。

相容有兩種：

  • 一種是高版本瀏覽器用效能好，體驗好的模式；低版本的自動切換到相容模式。

  • 第二種就是，不管高版本或低版本都用統一的相容模式。

這兩種成本都很高。使用者體驗好的模式，能增加使用者粘度，增加付費潛在使用者，而使用者體驗差的總是被使用者歸納為心目中的備胎（所謂備胎就是實在沒有了才去訪問，如果有，很容易被拋棄）。

5. 資料支援

如果對某一種型別的網站專案有一定的研究，那麼手頭必須有支援的資料分析。
有資料分析可以更好的進行成本控制，更有魄力的解決高低質量使用者的取捨。

6. 教育使用者

很多專案可能是有固定客戶群，或者使用該專案人員質量普遍較高。那麼，面對零星一
點的低質量使用者，我們不能再去迎合他。因為迎合他，就無法用高質量的使用者體驗去粘住忠實使用者，又不能獲取到低質量使用者的芳心。
所以，我們應有的策略是：

  • 牢牢把握住高質量的忠誠使用者，做到他們心目中的第一；

  • 教育那部分低質量使用者（比如企業級開發專案，可以直接做企業培訓，安裝高版本瀏覽器等等。網際網路專案，就給出提示安裝高版本瀏覽器即可）。

  • 那麼一部分低質量使用者被拉攏過來，還有一小撮死性不改的就只有放棄。切不可撿了芝麻丟了西瓜，不要貪大求全。

結論就是：結論就是必須根據實際情況，你專案的成本情況、人員情況、使用者情況和專案本身型別情況而制定，沒有一刀切的
相容或不相容。

四. 下載及執行

目前最新版本分別是jQuery 2.1.4 和jQuery 1.11.3 。下載開發版，可以順便讀一讀原始碼。

下載jQuery：

參考手冊：

第一個jQuery程式

//已經引入jQ，在body內寫入如下程式碼
<button>按鈕</button>
<script type="text/javascript">
    $(function(){
        $("button").click(function() {
            alert("hello jQuery!");
        });
    });
</script>

基礎核心

一. 程式碼風格

在jQuery程式中，不管是頁面元素的選擇、內建的功能函式，都是美元符號“$”來起
始的。而這個“$”就是jQuery當中最重要且獨有的物件：jQuery物件，所以我們在頁面元素選擇或執行功能函式的時候可以這麼寫：

$(function () {}); //執行一個匿名函式
$(‘#box’); //進行執行的ID元素選擇
$(‘#box’).css(‘color’, ‘red’); //執行功能函式

由於$本身就是jQuery物件的縮寫形式，那麼也就是說上面的三段程式碼也可以寫成如下形式：

jQuery(‘#box’).css(‘color’, ‘red’);
//jQuery恆等於$
// console.log(jQuery===$);//true

且，每一次執行函式後，都會返回一個jQuery物件。如下：

$(`#box`).css(`color`, `red`).css(`font-size`, `50px`); //連綴

二. 載入模式

我們在之前的程式碼一直在使用$(function () {});這段程式碼進行首尾包裹，那麼為什麼必須

要包裹這段程式碼呢？

  • 原因是我們jQuery庫檔案是在body元素之前載入的，我們必須等待所有的DOM元素載入後，延遲支援DOM操作，否則就無法獲取到。使用document.ready(),只需要等待DOM載入完成就執行。

  • 我們的原生Javascript也有一個延遲載入的方法onload，當網頁內容全部載入完成後執行（例如圖片等大檔案未載入完成之前，JS功能處於假死狀態）。

  • 下面來看看它們load和ready區別到底在什麼地方：

區別 window.onload $(document).ready()
執行時機 必須等待網頁全部載入完畢（包括圖片等），然後再執行包裹程式碼 只需要等待網頁中的DOM結構載入完畢，就能執行包裹的程式碼
執行次數 只能執行一次，如果第二次，那麼第一次的執行會被覆蓋 可以執行多次，第N次都不會覆蓋上一次
簡寫方案 無 $(function () {});

慕課網的DOM探索之基礎詳解篇 有對DOM Ready的一些介紹。

三. 物件互換及處理多個庫之間的衝突

1. 物件互換。

首先我們來看一下這段程式碼：

alert($);//返回jQuery物件方法內部函式
alert($());//[object object]，返回jQuery物件
alert($("#box"));//[object object]，返回jQuery物件
alert(document.getElementById("box")); //[object HTMLDivElement]，返回原生DOM物件

如何進行轉換呢？

jQuery 想要達到獲取原生的 DOM 物件，可以這麼處理：
alert($(`#box`).get(0)); //ID 元素的第一個原生 DOM

從上面 get(0)，這裡的索引看出，jQuery 是可以進行批量處理 DOM 的，這樣可以在很
多需要迴圈遍歷的處理上更加得心應手。

當然要重新轉化成jQuery物件的話，只需要使用$()包裹原生物件就可以了。

2. 多個庫之間的衝突

當一個專案中引入多個第三方庫的時候，由於沒有名稱空間的約束（名稱空間就好比同
一個目錄下的資料夾一樣，名字相同就會產生衝突），庫與庫之間發生衝突在所難免。

jQuery 只不過是 DOM 操作為主的庫，方便我們日常 Web 開發。但有時，我們的專案有更多特殊的功能需要引入其他的庫，比如使用者介面 UI 方面的庫，遊戲引擎方面的庫等等一系列。

所以jQuery提供了一個方法：jQuery.noConflict();：將$符所有權剔除。

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
  jQuery.noConflict();
  // 現在就$所有權就不歸jQuery了。
</script>

同時還可以使用

var $$ = jQuery;：這樣$$，就完全實現了原來$函式的功能。

相關文章