對于JQuery，想必大家都很熟悉。目前，很多web項目，在實施的過程中，考慮到各瀏覽器原生JS API的兼容性，大都會選用JQuery或類似于JQuery這樣的框架來進行網頁效果開發。JQuery上手簡單，也很容易學，即使是剛接觸JQuery的開發人員，借助JQuery手冊，也很快能在項目中使用開發。
雖然JQuery相對簡單，但要全面掌握，且快速靈活的使用它也并不那么容易，它提供了很多方法，包含了網頁開發的各個知識面，所以要全面掌握這些知識點，個人認為還是需要對jquery有深入的理解，對這些知識點做分類整理記憶，這樣你才能面對一些JQuery代碼的時候不會感到迷惑，才會知道采用何種方式實現某個特效是最佳實踐，才能快速的采用JQuery來進行項目開發。
簡單模擬JQuery
JQuery里的代碼是出了名的刁鉆，里面的奇技淫巧太多太多，如果你想通過源碼來學習JQuery，沒有一定的功底是很難做到的。所以下面寫一個非常簡單的庫來模擬JQuery，方便大家理解。
總體代碼
(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強大，支持部分類型。
我們知道，可以通過new JClass(...)來構造一個實例對象，這沒問題，但是JClass也是一個函數，可以被直接調用，而直接調用并不是我們想要的結果，為了防止JClass被開發人員直接調用，我們不能將JClass暴露給開發人員，那我們只能通過代碼段二方式來構造JClass實例對象。
在代碼段二，我們可以將JQuery暴露給開發人員，因為無論是通過new JQuery()還是JQuery(),返回的都是JClass實例對象，這是我們要的結果。
在網頁開發過程中，為了代碼的復用，我們常常會提供一些工具方法來方便開發，既然JQuery是完全暴露給開發人員使用的，我們完全可以將這些工具方法作為JQuery的靜態屬性。具體可參照代碼段三，當然，我們還可以按照這種方式添加其它的工具方法 如text,val,attr,css ........
這些工具方法確實不錯。JClass實例對象（封裝了DOM）也存在一些公用的方法，正好這些方法也可以借助工具方法來實現，那怎么為JClass實例對象創建公用方法呢？ 可以通過代碼段四的方式實現（如果對這里不理解，請百度JS的原型繼承概念） 。
最后可通過代碼段五，將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也成不了一個體系，到最后全部忘記了。開發的時候又只能去翻手冊，一直翻手冊能寫出好的代碼么？不可能吧。
下面我分享一下個人認為比較好的資料供初學者一步一步學習。
JQuery的一些概念
學習永遠都不是記憶，記憶的東西遲早會被遺忘。真正要學習一門技術，最基本的原則就是要理解它。學習JQuery也是，在學習JQuery的知識點時，你首先要理解一些概念來輔助你理解這些知識點。 JQuery中的概念主要有這三個： JQuery()、JQuery對象和DOM對象。
先說DOM對象，這個很簡單，它定義了訪問HTML文檔對象的一套屬性、方法和事件，沒有JQuery前，我們通常直接操作DOM，比較熟悉的API有getElementById 、GetElementByTagName等。
JQuery，它在JQuery中有個別名 $ 。通過上面章節的模擬代碼（對應模擬代碼中的JQuery)可知，其實就是一個函數，說得更細致點就是JQuery對象的工廠方法，它可以根據不同的入參來構造JQuery對象，如：
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、1、2、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; ... ...}以上就是關于jquery原理以及學習技巧介紹，內容很充實，信息量很大，需要同學耐心學習，希望從中有所收獲吧。
新聞熱點
疑難解答
