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：

一、工業標準，我不知道將來還有誰能像jq同樣，api上犀牛書。總之是前無古人，後面恐怕也難有來者。
工業標準有多可怕和難以撼動，會超出你想像。看看php就知道了。
二、jq的api設計對於原生js的改良。
三、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：

• 官網地址

• 百度靜態資源共享庫 CDN，直接部署網上的地址

• 固然你要是看了我寫的一個前端程序猿的Sublime Text3的自我修養的話就更加簡單了，直接就能夠用編輯器下載

參考手冊：

• 中文在線手冊CSS88:jQuery快速API參考

• 官方英文文檔jQuery API，可配合瀏覽器翻譯插件

第一個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;：這樣$\$，就徹底實現了原來$函數的功能。