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

jopen 8年前發布 | 32K 次閱讀 jQuery Ajax框架

思考篇

一. 什么是 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。主要功能有以下幾點：

像 CSS 那樣訪問和操作 DOM
修改 CSS 控制頁面外觀
簡化 JavaScript 代碼操作
事件處理更加容易
各種動畫效果使用方便
讓 Ajax 技術更加完美
基于 jQuery 大量插件
自行擴展功能插件

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：

官網地址
百度靜態資源共享庫 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; ：這樣 $$ ，就完全實現了原來$函數的功能。

來自： http://guowenfh.github.io/2015/12/27/jQuery-00-thinkingBasicCore/

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1451461014808.html

jQuery Ajax框架