jquery原理以及學(xué)習(xí)技巧介紹
對于JQuery，想必大家都很熟悉。目前，很多web項(xiàng)目，在實(shí)施的過程中，考慮到各瀏覽器原生JS API的兼容性，大都會選用JQuery或類似于JQuery這樣的框架來進(jìn)行網(wǎng)頁效果開發(fā)。JQuery上手簡單，也很容易學(xué)，即使是剛接觸JQuery的開發(fā)人員，借助JQuery手冊，也很快能在項(xiàng)目中使用開發(fā)。
雖然JQuery相對簡單，但要全面掌握，且快速靈活的使用它也并不那么容易，它提供了很多方法，包含了網(wǎng)頁開發(fā)的各個知識面，所以要全面掌握這些知識點(diǎn)，個人認(rèn)為還是需要對jquery有深入的理解，對這些知識點(diǎn)做分類整理記憶，這樣你才能面對一些JQuery代碼的時候不會感到迷惑，才會知道采用何種方式實(shí)現(xiàn)某個特效是最佳實(shí)踐，才能快速的采用JQuery來進(jìn)行項(xiàng)目開發(fā)。
簡單模擬JQuery
JQuery里的代碼是出了名的刁鉆，里面的奇技淫巧太多太多，如果你想通過源碼來學(xué)習(xí)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') {
//傳入的是字符串，假設(shè)全部為html標(biāo)簽 ，如'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));
首先，先看代碼段一，我們創(chuàng)建一個javascript引用類型，可以根據(jù)該引用類型以及輸入的參數(shù)創(chuàng)建一個實(shí)例對象，輸入的參數(shù)模擬JQuery選擇參數(shù)，但沒有JQuery強(qiáng)大，支持部分類型。
我們知道，可以通過new JClass(...)來構(gòu)造一個實(shí)例對象，這沒問題，但是JClass也是一個函數(shù)，可以被直接調(diào)用，而直接調(diào)用并不是我們想要的結(jié)果，為了防止JClass被開發(fā)人員直接調(diào)用，我們不能將JClass暴露給開發(fā)人員，那我們只能通過代碼段二方式來構(gòu)造JClass實(shí)例對象。
在代碼段二，我們可以將JQuery暴露給開發(fā)人員，因?yàn)闊o論是通過new JQuery()還是JQuery(),返回的都是JClass實(shí)例對象，這是我們要的結(jié)果。
在網(wǎng)頁開發(fā)過程中，為了代碼的復(fù)用，我們常常會提供一些工具方法來方便開發(fā)，既然JQuery是完全暴露給開發(fā)人員使用的，我們完全可以將這些工具方法作為JQuery的靜態(tài)屬性。具體可參照代碼段三，當(dāng)然，我們還可以按照這種方式添加其它的工具方法 如text,val,attr,css ........
這些工具方法確實(shí)不錯。JClass實(shí)例對象（封裝了DOM）也存在一些公用的方法，正好這些方法也可以借助工具方法來實(shí)現(xiàn)，那怎么為JClass實(shí)例對象創(chuàng)建公用方法呢？ 可以通過代碼段四的方式實(shí)現(xiàn)（如果對這里不理解，請百度JS的原型繼承概念） 。
最后可通過代碼段五，將JQuery取個別名 $ 且作為全局變量暴露出來。然后將代碼引入到HTML文件中進(jìn)行測試，可參照下面代碼：
<html>
<head>
<title>jquery-t2</title>
<script src="JQ.js"></script>
</head>
<body>
<div style="margin:10px 10px;">
<span id='result'>
點(diǎn)擊看效果
</span>
</div>
<div id='tst'>div文本值</div>
</body>
<script>
alert($.html(document.getElementById('result '))); //點(diǎn)擊看效果
alert($('span').html()); //點(diǎn)擊看效果
alert($('#tst').html()); //div文本值
</script>
</html>
JQuery的知識點(diǎn)分類
通過上面模擬的JQuery庫，我們應(yīng)該可以大概知道JQuery的主要功能：通過強(qiáng)大的選擇器獲得DOM元素，然后針將這些DOM元素的日常操作封裝成對應(yīng)的方法，如取值、賦值、修改、刪除等，同時JQuery還為網(wǎng)頁開發(fā)提供了一些工具類方法，如each、ajax、isArray、extend等。所以總的來說，JQuery知識點(diǎn)可分為三大類：
- JQuery選擇器
- JQuery對象的操作，如DOM操作、表單操作等
- JQuery的工具方法
- JQuery插件編寫（知識擴(kuò)展）
JQuery太流行了，網(wǎng)上的資料太多太多，以致于很多初學(xué)者根本不知道從哪學(xué)起，這里看一篇博客，那里翻一翻源碼，收集了大量的資料，最后發(fā)現(xiàn)根本沒時間學(xué)習(xí)，即使花了大量的時間學(xué)習(xí)，學(xué)習(xí)到的JQuery也成不了一個體系，到最后全部忘記了。開發(fā)的時候又只能去翻手冊，一直翻手冊能寫出好的代碼么？不可能吧。
下面我分享一下個人認(rèn)為比較好的資料供初學(xué)者一步一步學(xué)習(xí)。
- JQuery入門(書籍+一篇博客)
- 鋒利的JQuery（第二版）
- JQuery設(shè)計(jì)思想
- JQuery深入學(xué)習(xí)（深入學(xué)習(xí)JQuery和javascript很好的資料）
- JQuery源碼分析系統(tǒng)
JQuery的一些概念
學(xué)習(xí)永遠(yuǎn)都不是記憶，記憶的東西遲早會被遺忘。真正要學(xué)習(xí)一門技術(shù)，最基本的原則就是要理解它。學(xué)習(xí)JQuery也是，在學(xué)習(xí)JQuery的知識點(diǎn)時，你首先要理解一些概念來輔助你理解這些知識點(diǎn)。 JQuery中的概念主要有這三個： JQuery()、JQuery對象和DOM對象。
先說DOM對象，這個很簡單，它定義了訪問HTML文檔對象的一套屬性、方法和事件，沒有JQuery前，我們通常直接操作DOM，比較熟悉的API有g(shù)etElementById 、GetElementByTagName等。
JQuery，它在JQuery中有個別名 $ 。通過上面章節(jié)的模擬代碼（對應(yīng)模擬代碼中的JQuery)可知，其實(shí)就是一個函數(shù)，說得更細(xì)致點(diǎn)就是JQuery對象的工廠方法，它可以根據(jù)不同的入?yún)順?gòu)造JQuery對象，如：
- 字符串表達(dá)式。如 $('span') 、$('span .class')、$('#id')等
- HTML 代碼片段。如 $('<span>text</span>') 等
- DOM元素。 如$(dom) //假設(shè) var dom = document.getElementById('id');
- JS Function 。 如 $(function(...) { ... } ); 一般對象或數(shù)組。如 { ｝ 、[ ... ]等
JQuery除了能創(chuàng)建JQuery對象的同時，JQuery自身也有很多靜態(tài)方法，也可以稱為工具方法，如 each、ajax、trim等。這些工具方法不僅在網(wǎng)頁設(shè)計(jì)時常常會被用到，而且也會被當(dāng)作工具方法用來實(shí)現(xiàn)JQuery對象的原型方法。
JQuery對象，非常重要的一個概念，類似于模擬代碼中的JClass實(shí)例，通常是通過JQuery構(gòu)造出的實(shí)例。在JQuery中，我們常常見到的JQuery對象是這樣的： $('#id') 、$('div')等。關(guān)于JQuery對象我們要明白以下幾點(diǎn)：
1、JQuery對象繼承了JQuery原型(prototype）的所有屬性和方法
2、JQuery對象不是數(shù)組，但是采用了類似數(shù)組的結(jié)構(gòu)來存儲元素，而且存儲的元素是通過選擇器獲取得到的DOM對象。參照上面章節(jié)的模擬代碼(JClass實(shí)例對象），JQuery對象有個length屬性，表示當(dāng)前對象里存儲DOM對象的個數(shù)，而這些通過選擇獲得的DOM對象，是采用下標(biāo)為0、1、2、3 ... 作為屬性名來進(jìn)行存儲的。所以，根據(jù)以上特性，我們完全可以通過下面這種方式來訪問元素：
var objs = $('div');
for(var i=0,len=objs.length;i<length;i++) {
var o = objs[i]; //獲取dom元素
... ...
}
綜合來說，JQuery、JQuery對象、DOM對象三者之間的關(guān)系是： JQuery是個工廠方法，用來構(gòu)造JQuery對象； JQuery對象是個類數(shù)組對象，里面存儲了DOM對象；
理解了三者之間的關(guān)系，我們在理解下面知識點(diǎn)時，相對來說也就比較容易了：
關(guān)于過濾選擇器如何理解？ 如$('div:first') 。
如果理解了JQuery對象的內(nèi)部結(jié)構(gòu)，理解JQuery的過濾選擇器就很容易了，如 :first 其實(shí)就是取JQuery對象屬性為'0'的對象（封裝成JQuery對象），同理 :last取的是屬性為 length-1 的元素，:eq(index)取的是屬性為index的元素。
在JQuery中，如何驗(yàn)證某個元素是否為空？
var $o = $('div .class');
if($ == null) { // 錯誤的做法
//什么都沒找到
......
}
//正確的做法
if($o.html() == null) {
//什么都沒找到
... ...
}
//正確的做法
if($o.length) {
//什么都沒找到
... ...
}
JQuery對象和DOM對象如何轉(zhuǎn)換？
var dom = document.getElementById('id');
// DOM對象轉(zhuǎn)換成JQuery對象
var $dom = $(dom); // 參照J(rèn)Query對象的構(gòu)造方式
// 將JQuery對象轉(zhuǎn)換成DOM對象
for(var i=0,len=$dom.length;i<length;i++) {
var o = $dom[i]; //獲取dom元素
... ...
}
總結(jié)
關(guān)于JQuery，上手雖然簡單，但如果要高效快速的使用開發(fā)，還是需要好好理解下JQuery的。以上只是個人學(xué)習(xí)過程中的一些感悟和整理，建議各位在學(xué)習(xí)時也按照自己的思維習(xí)慣形成一套自己的知識體系，一來便于日后的開發(fā)，二來也便于查閱別人的代碼。最后附注一些有意思的小問題，各位有興趣就思考下吧。
問題一. 你覺得下面哪種方式代碼好一點(diǎn)？為什么？
// 方式一
var $text = $("#text");
var $ts = $text.text();
//方式二
var $text = $("#text");
var $ts = $.text($text);
問題二. 下面代碼中的this是什么呢？大概實(shí)現(xiàn)原理有什么？
全選復(fù)制放進(jìn)筆記
$('#box').click(function(){
var obj = this;
... ...
}
以上就是關(guān)于jquery原理以及學(xué)習(xí)技巧介紹，內(nèi)容很充實(shí)，信息量很大，需要同學(xué)耐心學(xué)習(xí)，希望從中有所收獲吧。
- jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)
- Jquery選擇器 $實(shí)現(xiàn)原理
- JQuery 學(xué)習(xí)技巧總結(jié)
- jquery lazyload延遲加載技術(shù)的實(shí)現(xiàn)原理分析
- 表頭固定(利用jquery實(shí)現(xiàn)原理介紹)
- Jquery 選中表格一列并對表格排序?qū)崿F(xiàn)原理
- Jquery寫一個鼠標(biāo)拖動效果實(shí)現(xiàn)原理與代碼
- JQuery的Ajax跨域請求原理概述及實(shí)例
- jquery簡單的拖動效果實(shí)現(xiàn)原理及示例
- jQuery實(shí)現(xiàn)圖片放大預(yù)覽實(shí)現(xiàn)原理及代碼
- jQuery拖動div、移動div、彈出層實(shí)現(xiàn)原理及示例
- 使用jquery實(shí)現(xiàn)的一個圖片延遲加載插件（含圖片延遲加載原理）
- jQuery截取指定長度字符串的實(shí)現(xiàn)原理及代碼
- jquery實(shí)現(xiàn)html頁面 div 假分頁有原理有代碼
- jquery引用方法時傳遞參數(shù)原理分析
- jQuery內(nèi)部原理和實(shí)現(xiàn)方式淺析
相關(guān)文章
jQuery方法簡潔實(shí)現(xiàn)隔行換色及toggleClass的使用
隔行換色的展示效果想必大家早已熟悉了吧，今天在幫大家回憶一下本例中主要用到的方法是toggleClass()，感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用
這篇文章主要介紹了詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用,jQuery庫和Ajax異步結(jié)構(gòu)以及JSON數(shù)據(jù)傳輸也是JS日常編程中最常用到的東西,需要的朋友可以參考下2015-08-08
經(jīng)過數(shù)個版本的迭代后, JQueryElement 3.3.0 版本中的 Repeater 基本上已經(jīng)完善, 這里將分功能的總結(jié)講解一下 Repeater 的使用方法.2011-09-09
下面小編就為大家?guī)硪黄淮?.getJSON不執(zhí)行的簡單記錄。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果,涉及jquery鼠標(biāo)事件及頁面元素樣式的動態(tài)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖
這篇文章主要介紹了jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖的核心代碼，有需要的小伙伴可以參考下2015-04-04
jQuery初識之設(shè)計(jì)思想方法函數(shù)示例
這篇文章主要為大家介紹了jQuery初識之設(shè)計(jì)思想及方法函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
此文主要用Jquery實(shí)現(xiàn)滾動新聞,Jquery的強(qiáng)大功能，幾行代碼即可實(shí)現(xiàn)，需要的朋友可以參考下2014-02-02
這篇文章主要介紹了jquery制作的移動端購物車效果,結(jié)合完整實(shí)例形式詳細(xì)分析了jQuery移動端購物車具體功能實(shí)現(xiàn)、數(shù)值計(jì)算、界面布局與顯示效果相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了jQuery層級選擇器用法,實(shí)例分析了常見的四種層級選擇器的使用技巧,并給出了實(shí)例總結(jié),需要的朋友可以參考下2015-02-02