JQuery原理介紹及學習方法

時間  2019-11-16
標籤 jquery 原理 介紹 學習方法 欄目 JQuery 简体版
原文   原文鏈接

前言

對於JQuery，想必你們都很熟悉。目前，不少web項目，在實施的過程當中，考慮到各瀏覽器原生JS API的兼容性，大都會選用JQuery或相似於JQuery這樣的框架來進行網頁效果開發。JQuery上手簡單，也很容易學，即便是剛接觸JQuery的開發人員，藉助JQuery手冊，也很快能在項目中使用開發。javascript

雖然JQuery相對簡單，但要全面掌握，且快速靈活的使用它也並不那麼容易，它提供了不少方法，包含了網頁開發的各個知識面，因此要全面掌握這些知識點，我的認爲仍是須要對jquery有深刻的理解，對這些知識點作分類整理記憶，這樣你才能面對一些JQuery代碼的時候不會感到迷惑，纔會知道採用何種方式實現某個特效是最佳實踐，才能快速的採用JQuery來進行項目開發。css

簡單模擬JQuery

JQuery裏的代碼是出了名的刁鑽，裏面的奇技淫巧太多太多，若是你想經過源碼來學習JQuery，沒有必定的功底是很難作到的。因此下面寫一個很是簡單的庫來模擬JQuery，方便你們理解。
整體代碼html

(function(window) {
    var doc = window.document;
    // -------------代碼段二 ------------------
    var JQuery = function(selector) {
       return new JClass(selector);
    }
   
    // --------------- 代碼段三 ----------------
    JQuery.html = function(obj) {
        if(obj && obj.nodeType === 1) {
            return obj.innerHTML;
        }
    }
   
    // ---------代碼段一 --------------
    var JClass = function(selector) {
        if (selector.nodeType ) { // 若是傳入的是DOM元素
   this.length = 1;
        }else if(selector.charAt(0) === '#') { //若是傳入的是'#..'形式
   this.length = 1;
            this[0] = doc.getElementById(selector.slice(1));
        }else if(typeof selector === 'string') {
            //傳入的是字符串，假設所有爲html標籤 ，如'div' 'p'等
            var nodes = doc.getElementsByTagName(selector);
            this.length = nodes.length;
            for(var i=0,len=nodes.length;i<len;i++) {
                this[i] = nodes[i];
            }
        }else { //都不是的話，就不識別咯
            this.length = 0;
        }
    };
   
    // ------------ 代碼段四 --------------------
    JQuery.prototype.html = function() {
        if(this[0]) {
            return JQuery.html(this[0]);
        }
    }
    JClass.prototype = JQuery.prototype; 

    // ------------ 代碼段五 ---------------
    window.$ = window.JQuery = JQuery;
   
}(window));

首先，先看代碼段一，咱們建立一個javascript引用類型，能夠根據該引用類型以及輸入的參數建立一個實例對象，輸入的參數模擬JQuery選擇參數，但沒有JQuery強大，支持部分類型。java

咱們知道，能夠經過new JClass(...)來構造一個實例對象，這沒問題，可是JClass也是一個函數，能夠被直接調用，而直接調用並非咱們想要的結果，爲了防止JClass被開發人員直接調用，咱們不能將JClass暴露給開發人員，那咱們只能經過代碼段二方式來構造JClass實例對象。node

在代碼段二，咱們能夠將JQuery暴露給開發人員，由於不管是經過new JQuery()仍是JQuery(),返回的都是JClass實例對象，這是咱們要的結果。jquery

在網頁開發過程當中，爲了代碼的複用，咱們經常會提供一些工具方法來方便開發，既然JQuery是徹底暴露給開發人員使用的，咱們徹底能夠將這些工具方法做爲JQuery的靜態屬性。具體可參照代碼段三，固然，咱們還能夠按照這種方式添加其它的工具方法 如text,val,attr,css ........web

這些工具方法確實不錯。JClass實例對象（封裝了DOM）也存在一些公用的方法，正好這些方法也能夠藉助工具方法來實現，那怎麼爲JClass實例對象建立公用方法呢？ 能夠經過代碼段四的方式實現（若是對這裏不理解，請百度JS的原型繼承概念） 。ajax

最後可經過代碼段五，將JQuery取個別名 $ 且做爲全局變量暴露出來。而後將代碼引入到HTML文件中進行測試，可參照下面代碼：數組

<html>
<head>
    <title>jquery-t2</title>
    <script src="JQ.js"></script>
</head>
<body>
    <div style="margin:10px 10px;">
        <span id='result'>
        點擊看效果
      </span>
    </div>
    <div id='tst'>div文本值</div>
</body>
<script>
    alert($.html(document.getElementById('result '))); //點擊看效果
    alert($('span').html()); //點擊看效果
    alert($('#tst').html()); //div文本值
</script>
</html>

JQuery的知識點分類

經過上面模擬的JQuery庫，咱們應該能夠大概知道JQuery的主要功能：經過強大的選擇器得到DOM元素，而後針將這些DOM元素的平常操做封裝成對應的方法，如取值、賦值、修改、刪除等，同時JQuery還爲網頁開發提供了一些工具類方法，如each、ajax、isArray、extend等。因此總的來講，JQuery知識點可分爲三大類：瀏覽器

  • JQuery選擇器

  • JQuery對象的操做，如DOM操做、表單操做等

  • JQuery的工具方法

  • JQuery插件編寫（知識擴展）

JQuery太流行了，網上的資料太多太多，以至於不少初學者根本不知道從哪學起，這裏看一篇博客，那裏翻一翻源碼，收集了大量的資料，最後發現根本沒時間學習，即便花了大量的時間學習，學習到的JQuery也成不了一個體系，到最後所有忘記了。開發的時候又只能去翻手冊，一直翻手冊能寫出好的代碼麼？不可能吧。

下面我分享一下我的認爲比較好的資料供初學者一步一步學習。
JQuery入門(書籍+一篇博客)
鋒利的JQuery（第二版）
JQuery設計思想
JQuery深刻學習（深刻學習JQuery和javascript很好的資料）
JQuery源碼分析系統

JQuery的一些概念

學習永遠都不是記憶，記憶的東西早晚會被遺忘。真正要學習一門技術，最基本的原則就是要理解它。學習JQuery也是，在學習JQuery的知識點時，你首先要理解一些概念來輔助你理解這些知識點。 JQuery中的概念主要有這三個： JQuery()、JQuery對象和DOM對象。

先說DOM對象，這個很簡單，它定義了訪問HTML文檔對象的一套屬性、方法和事件，沒有JQuery前，咱們一般直接操做DOM，比較熟悉的API有getElementById 、GetElementByTagName等。

JQuery，它在JQuery中有個別名 $ 。經過上面章節的模擬代碼（對應模擬代碼中的JQuery)可知，其實就是一個函數，說得更細緻點就是JQuery對象的工廠方法，它能夠根據不一樣的入參來構造JQuery對象，如：

  • 字符串表達式。如 $('span') 、$('span .class')、$('#id')等

  • HTML 代碼片斷。如 $('<span>text</span>') 等

  • DOM元素。 如$(dom) //假設 var dom = document.getElementById('id');

  • JS Function 。 如 $(function(...) { ... } ); 通常對象或數組。如 { ｝ 、[ ... ]等

JQuery除了能建立JQuery對象的同時，JQuery自身也有不少靜態方法，也能夠稱爲工具方法，如 each、ajax、trim等。這些工具方法不只在網頁設計時經常會被用到，並且也會被看成工具方法用來實現JQuery對象的原型方法。

JQuery對象，很是重要的一個概念，相似於模擬代碼中的JClass實例，一般是經過JQuery構造出的實例。在JQuery中，咱們經常見到的JQuery對象是這樣的： $('#id') 、$('div')等。關於JQuery對象咱們要明白如下幾點：

  1. JQuery對象繼承了JQuery原型(prototype）的全部屬性和方法

  2. JQuery對象不是數組，可是採用了相似數組的結構來存儲元素，並且存儲的元素是經過選擇器獲取獲得的DOM對象。參照上面章節的模擬代碼(JClass實例對象），JQuery對象有個length屬性，表示當前對象裏存儲DOM對象的個數，而這些經過選擇得到的DOM對象，是採用下標爲0、一、二、3 ... 做爲屬性名來進行存儲的。因此，根據以上特性，咱們徹底能夠經過下面這種方式來訪問元素：

var  objs = $('div');
for(var i=0,len=objs.length;i<length;i++) {
  var o = objs[i];  //獲取dom元素
  ... ...
}

綜合來講，JQuery、JQuery對象、DOM對象三者之間的關係是： JQuery是個工廠方法，用來構造JQuery對象； JQuery對象是個類數組對象，裏面存儲了DOM對象；

理解了三者之間的關係，咱們在理解下面知識點時，相對來講也就比較容易了：

關於過濾選擇器如何理解？ 如$('div:first') 。
若是理解了JQuery對象的內部結構，理解JQuery的過濾選擇器就很容易了，如 :first 其實就是取JQuery對象屬性爲'0'的對象（封裝成JQuery對象），同理 :last取的是屬性爲 length-1 的元素，:eq(index)取的是屬性爲index的元素。

在JQuery中，如何驗證某個元素是否爲空？

var $o = $('div  .class');
if($ == null) {  // 錯誤的作法
   //什麼都沒找到
 ......
 }  
//正確的作法 
if($o.html() == null) {
   //什麼都沒找到
 ... ...
 } 
//正確的作法 
if($o.length) {
 //什麼都沒找到
... ...
 }

JQuery對象和DOM對象如何轉換？

var dom = document.getElementById('id');
// DOM對象轉換成JQuery對象
var $dom = $(dom);   // 參照JQuery對象的構造方式

// 將JQuery對象轉換成DOM對象
for(var i=0,len=$dom.length;i<length;i++) {
  var o = $dom[i];  //獲取dom元素
  ... ...
}

總結

關於JQuery，上手雖然簡單，但若是要高效快速的使用開發，仍是須要好好理解下JQuery的。以上只是我的學習過程當中的一些感悟和整理，建議各位在學習時也按照本身的思惟習慣造成一套本身的知識體系，一來便於往後的開發，二來也便於查閱別人的代碼。最後附註一些有意思的小問題，各位有興趣就思考下吧。

問題一. 你以爲下面哪一種方式代碼好一點？爲何？

// 方式一
var $text = $("#text");
var $ts = $text.text();

//方式二
var $text = $("#text");
var $ts = $.text($text);

問題二. 下面代碼中的this是什麼呢？大概實現原理有什麼？

$('#box').click(function(){ 
    var obj = this;
   ... ...
}

（完）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程