jquery原理以及學(xué)習(xí)技巧介紹
對(duì)于JQuery,想必大家都很熟悉。目前,很多web項(xiàng)目,在實(shí)施的過(guò)程中,考慮到各瀏覽器原生JS API的兼容性,大都會(huì)選用JQuery或類(lèi)似于JQuery這樣的框架來(lái)進(jìn)行網(wǎng)頁(yè)效果開(kāi)發(fā)。JQuery上手簡(jiǎn)單,也很容易學(xué),即使是剛接觸JQuery的開(kāi)發(fā)人員,借助JQuery手冊(cè),也很快能在項(xiàng)目中使用開(kāi)發(fā)。
雖然JQuery相對(duì)簡(jiǎn)單,但要全面掌握,且快速靈活的使用它也并不那么容易,它提供了很多方法,包含了網(wǎng)頁(yè)開(kāi)發(fā)的各個(gè)知識(shí)面,所以要全面掌握這些知識(shí)點(diǎn),個(gè)人認(rèn)為還是需要對(duì)jquery有深入的理解,對(duì)這些知識(shí)點(diǎn)做分類(lèi)整理記憶,這樣你才能面對(duì)一些JQuery代碼的時(shí)候不會(huì)感到迷惑,才會(huì)知道采用何種方式實(shí)現(xiàn)某個(gè)特效是最佳實(shí)踐,才能快速的采用JQuery來(lái)進(jìn)行項(xiàng)目開(kāi)發(fā)。
簡(jiǎn)單模擬JQuery
JQuery里的代碼是出了名的刁鉆,里面的奇技淫巧太多太多,如果你想通過(guò)源碼來(lái)學(xué)習(xí)JQuery,沒(méi)有一定的功底是很難做到的。所以下面寫(xiě)一個(gè)非常簡(jiǎn)單的庫(kù)來(lái)模擬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 { //都不是的話(huà),就不識(shí)別咯 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)建一個(gè)javascript引用類(lèi)型,可以根據(jù)該引用類(lèi)型以及輸入的參數(shù)創(chuàng)建一個(gè)實(shí)例對(duì)象,輸入的參數(shù)模擬JQuery選擇參數(shù),但沒(méi)有JQuery強(qiáng)大,支持部分類(lèi)型。
我們知道,可以通過(guò)new JClass(...)來(lái)構(gòu)造一個(gè)實(shí)例對(duì)象,這沒(méi)問(wèn)題,但是JClass也是一個(gè)函數(shù),可以被直接調(diào)用,而直接調(diào)用并不是我們想要的結(jié)果,為了防止JClass被開(kāi)發(fā)人員直接調(diào)用,我們不能將JClass暴露給開(kāi)發(fā)人員,那我們只能通過(guò)代碼段二方式來(lái)構(gòu)造JClass實(shí)例對(duì)象。
在代碼段二,我們可以將JQuery暴露給開(kāi)發(fā)人員,因?yàn)闊o(wú)論是通過(guò)new JQuery()還是JQuery(),返回的都是JClass實(shí)例對(duì)象,這是我們要的結(jié)果。
在網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中,為了代碼的復(fù)用,我們常常會(huì)提供一些工具方法來(lái)方便開(kāi)發(fā),既然JQuery是完全暴露給開(kāi)發(fā)人員使用的,我們完全可以將這些工具方法作為JQuery的靜態(tài)屬性。具體可參照代碼段三,當(dāng)然,我們還可以按照這種方式添加其它的工具方法 如text,val,attr,css ........
這些工具方法確實(shí)不錯(cuò)。JClass實(shí)例對(duì)象(封裝了DOM)也存在一些公用的方法,正好這些方法也可以借助工具方法來(lái)實(shí)現(xiàn),那怎么為JClass實(shí)例對(duì)象創(chuàng)建公用方法呢? 可以通過(guò)代碼段四的方式實(shí)現(xiàn)(如果對(duì)這里不理解,請(qǐng)百度JS的原型繼承概念) 。
最后可通過(guò)代碼段五,將JQuery取個(gè)別名 $ 且作為全局變量暴露出來(lái)。然后將代碼引入到HTML文件中進(jìn)行測(cè)試,可參照下面代碼:
<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的知識(shí)點(diǎn)分類(lèi)
通過(guò)上面模擬的JQuery庫(kù),我們應(yīng)該可以大概知道JQuery的主要功能:通過(guò)強(qiáng)大的選擇器獲得DOM元素,然后針將這些DOM元素的日常操作封裝成對(duì)應(yīng)的方法,如取值、賦值、修改、刪除等,同時(shí)JQuery還為網(wǎng)頁(yè)開(kāi)發(fā)提供了一些工具類(lèi)方法,如each、ajax、isArray、extend等。所以總的來(lái)說(shuō),JQuery知識(shí)點(diǎn)可分為三大類(lèi):
- JQuery選擇器
- JQuery對(duì)象的操作,如DOM操作、表單操作等
- JQuery的工具方法
- JQuery插件編寫(xiě)(知識(shí)擴(kuò)展)
JQuery太流行了,網(wǎng)上的資料太多太多,以致于很多初學(xué)者根本不知道從哪學(xué)起,這里看一篇博客,那里翻一翻源碼,收集了大量的資料,最后發(fā)現(xiàn)根本沒(méi)時(shí)間學(xué)習(xí),即使花了大量的時(shí)間學(xué)習(xí),學(xué)習(xí)到的JQuery也成不了一個(gè)體系,到最后全部忘記了。開(kāi)發(fā)的時(shí)候又只能去翻手冊(cè),一直翻手冊(cè)能寫(xiě)出好的代碼么?不可能吧。
下面我分享一下個(gè)人認(rèn)為比較好的資料供初學(xué)者一步一步學(xué)習(xí)。
- JQuery入門(mén)(書(shū)籍+一篇博客)
- 鋒利的JQuery(第二版)
- JQuery設(shè)計(jì)思想
- JQuery深入學(xué)習(xí)(深入學(xué)習(xí)JQuery和javascript很好的資料)
- JQuery源碼分析系統(tǒng)
JQuery的一些概念
學(xué)習(xí)永遠(yuǎn)都不是記憶,記憶的東西遲早會(huì)被遺忘。真正要學(xué)習(xí)一門(mén)技術(shù),最基本的原則就是要理解它。學(xué)習(xí)JQuery也是,在學(xué)習(xí)JQuery的知識(shí)點(diǎn)時(shí),你首先要理解一些概念來(lái)輔助你理解這些知識(shí)點(diǎn)。 JQuery中的概念主要有這三個(gè): JQuery()、JQuery對(duì)象和DOM對(duì)象。
先說(shuō)DOM對(duì)象,這個(gè)很簡(jiǎn)單,它定義了訪(fǎng)問(wèn)HTML文檔對(duì)象的一套屬性、方法和事件,沒(méi)有JQuery前,我們通常直接操作DOM,比較熟悉的API有g(shù)etElementById 、GetElementByTagName等。
JQuery,它在JQuery中有個(gè)別名 $ 。通過(guò)上面章節(jié)的模擬代碼(對(duì)應(yīng)模擬代碼中的JQuery)可知,其實(shí)就是一個(gè)函數(shù),說(shuō)得更細(xì)致點(diǎn)就是JQuery對(duì)象的工廠(chǎng)方法,它可以根據(jù)不同的入?yún)?lái)構(gòu)造JQuery對(duì)象,如:
- 字符串表達(dá)式。如 $('span') 、$('span .class')、$('#id')等
- HTML 代碼片段。如 $('<span>text</span>') 等
- DOM元素。 如$(dom) //假設(shè) var dom = document.getElementById('id');
- JS Function 。 如 $(function(...) { ... } ); 一般對(duì)象或數(shù)組。如 { } 、[ ... ]等
JQuery除了能創(chuàng)建JQuery對(duì)象的同時(shí),JQuery自身也有很多靜態(tài)方法,也可以稱(chēng)為工具方法,如 each、ajax、trim等。這些工具方法不僅在網(wǎng)頁(yè)設(shè)計(jì)時(shí)常常會(huì)被用到,而且也會(huì)被當(dāng)作工具方法用來(lái)實(shí)現(xiàn)JQuery對(duì)象的原型方法。
JQuery對(duì)象,非常重要的一個(gè)概念,類(lèi)似于模擬代碼中的JClass實(shí)例,通常是通過(guò)JQuery構(gòu)造出的實(shí)例。在JQuery中,我們常常見(jiàn)到的JQuery對(duì)象是這樣的: $('#id') 、$('div')等。關(guān)于JQuery對(duì)象我們要明白以下幾點(diǎn):
1、JQuery對(duì)象繼承了JQuery原型(prototype)的所有屬性和方法
2、JQuery對(duì)象不是數(shù)組,但是采用了類(lèi)似數(shù)組的結(jié)構(gòu)來(lái)存儲(chǔ)元素,而且存儲(chǔ)的元素是通過(guò)選擇器獲取得到的DOM對(duì)象。參照上面章節(jié)的模擬代碼(JClass實(shí)例對(duì)象),JQuery對(duì)象有個(gè)length屬性,表示當(dāng)前對(duì)象里存儲(chǔ)DOM對(duì)象的個(gè)數(shù),而這些通過(guò)選擇獲得的DOM對(duì)象,是采用下標(biāo)為0、1、2、3 ... 作為屬性名來(lái)進(jìn)行存儲(chǔ)的。所以,根據(jù)以上特性,我們完全可以通過(guò)下面這種方式來(lái)訪(fǎng)問(wèn)元素:
var objs = $('div'); for(var i=0,len=objs.length;i<length;i++) { var o = objs[i]; //獲取dom元素 ... ... }
綜合來(lái)說(shuō),JQuery、JQuery對(duì)象、DOM對(duì)象三者之間的關(guān)系是: JQuery是個(gè)工廠(chǎng)方法,用來(lái)構(gòu)造JQuery對(duì)象; JQuery對(duì)象是個(gè)類(lèi)數(shù)組對(duì)象,里面存儲(chǔ)了DOM對(duì)象;
理解了三者之間的關(guān)系,我們?cè)诶斫庀旅嬷R(shí)點(diǎn)時(shí),相對(duì)來(lái)說(shuō)也就比較容易了:
關(guān)于過(guò)濾選擇器如何理解? 如$('div:first') 。
如果理解了JQuery對(duì)象的內(nèi)部結(jié)構(gòu),理解JQuery的過(guò)濾選擇器就很容易了,如 :first 其實(shí)就是取JQuery對(duì)象屬性為'0'的對(duì)象(封裝成JQuery對(duì)象),同理 :last取的是屬性為 length-1 的元素,:eq(index)取的是屬性為index的元素。
在JQuery中,如何驗(yàn)證某個(gè)元素是否為空?
var $o = $('div .class'); if($ == null) { // 錯(cuò)誤的做法 //什么都沒(méi)找到 ...... } //正確的做法 if($o.html() == null) { //什么都沒(méi)找到 ... ... } //正確的做法 if($o.length) { //什么都沒(méi)找到 ... ... }
JQuery對(duì)象和DOM對(duì)象如何轉(zhuǎn)換?
var dom = document.getElementById('id'); // DOM對(duì)象轉(zhuǎn)換成JQuery對(duì)象 var $dom = $(dom); // 參照J(rèn)Query對(duì)象的構(gòu)造方式 // 將JQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象 for(var i=0,len=$dom.length;i<length;i++) { var o = $dom[i]; //獲取dom元素 ... ... }
總結(jié)
關(guān)于JQuery,上手雖然簡(jiǎn)單,但如果要高效快速的使用開(kāi)發(fā),還是需要好好理解下JQuery的。以上只是個(gè)人學(xué)習(xí)過(guò)程中的一些感悟和整理,建議各位在學(xué)習(xí)時(shí)也按照自己的思維習(xí)慣形成一套自己的知識(shí)體系,一來(lái)便于日后的開(kāi)發(fā),二來(lái)也便于查閱別人的代碼。最后附注一些有意思的小問(wèn)題,各位有興趣就思考下吧。
問(wèn)題一. 你覺(jué)得下面哪種方式代碼好一點(diǎn)?為什么?
// 方式一 var $text = $("#text"); var $ts = $text.text(); //方式二 var $text = $("#text"); var $ts = $.text($text);
問(wèn)題二. 下面代碼中的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 選中表格一列并對(duì)表格排序?qū)崿F(xiàn)原理
- Jquery寫(xiě)一個(gè)鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)原理與代碼
- JQuery的Ajax跨域請(qǐng)求原理概述及實(shí)例
- jquery簡(jiǎn)單的拖動(dòng)效果實(shí)現(xiàn)原理及示例
- jQuery實(shí)現(xiàn)圖片放大預(yù)覽實(shí)現(xiàn)原理及代碼
- jQuery拖動(dòng)div、移動(dòng)div、彈出層實(shí)現(xiàn)原理及示例
- 使用jquery實(shí)現(xiàn)的一個(gè)圖片延遲加載插件(含圖片延遲加載原理)
- jQuery截取指定長(zhǎng)度字符串的實(shí)現(xiàn)原理及代碼
- jquery實(shí)現(xiàn)html頁(yè)面 div 假分頁(yè)有原理有代碼
- jquery引用方法時(shí)傳遞參數(shù)原理分析
- jQuery內(nèi)部原理和實(shí)現(xiàn)方式淺析
相關(guān)文章
遠(yuǎn)離JS災(zāi)難css災(zāi)難之 js私有函數(shù)和css選擇器作為容器
當(dāng)一個(gè)項(xiàng)目龐大到一定階段,例如UI展示層采用了模塊化模板化之后,就會(huì)出現(xiàn)js災(zāi)難,css災(zāi)難,經(jīng)常出現(xiàn)以前從來(lái)不放在一起的兩個(gè)js或css莫名奇妙的被放到了一個(gè)頁(yè)面,基本的原因是模塊重用造成的2011-12-12jQuery實(shí)現(xiàn)漸變彈出層和彈出菜單的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)漸變彈出層和彈出菜單的方法,涉及jQuery漸變效果及css顯示的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02jQuery探測(cè)位置的提示彈窗(toolTip box)詳細(xì)解析
提示彈窗(toolTip box)經(jīng)常會(huì)被用到,但是本文總要的不是彈,也不是窗,而是探測(cè)位置,在適當(dāng)?shù)牡胤綇棿?。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11jquery動(dòng)態(tài)創(chuàng)建div與input的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇jquery動(dòng)態(tài)創(chuàng)建div與input的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10jQuery文字橫向滾動(dòng)效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jQuery文字橫向滾動(dòng)效果的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05uploadify 3.0 詳細(xì)使用說(shuō)明
uploadify 3.0 詳細(xì)使用說(shuō)明,需要的朋友可以參考下2012-06-06jQuery中DOM節(jié)點(diǎn)的刪除方法總結(jié)(超全面)
這篇文章主要介紹了jQuery中DOM節(jié)點(diǎn)的刪除方法,文中介紹的很相信,內(nèi)容包括empty()的基本用法、remove()的有參用法和無(wú)參用法、empty和remove區(qū)別、保留數(shù)據(jù)的刪除操作detach()以及detach()和remove()區(qū)別,需要的朋友可以參考借鑒。2017-01-01Jquery數(shù)字上下滾動(dòng)動(dòng)態(tài)切換插件
有時(shí)我們需要?jiǎng)討B(tài)的展示訪(fǎng)問(wèn)次數(shù)、下載次數(shù)等效果,我們可以借助jQuery結(jié)合后臺(tái)php實(shí)現(xiàn)一個(gè)滾動(dòng)的數(shù)字展示效果。2015-08-08