欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery原理以及學習技巧介紹

 更新時間:2015年11月11日 09:56:53   投稿:lijiao  
JQuery上手簡單,也很容易學,即使是剛接觸JQuery的開發(fā)人員,借助JQuery手冊,也很快能在項目中使用開發(fā),這篇文章針對jquery原理以及學習技巧進行介紹,感興趣的小伙伴們可以參考一下

對于JQuery,想必大家都很熟悉。目前,很多web項目,在實施的過程中,考慮到各瀏覽器原生JS API的兼容性,大都會選用JQuery或類似于JQuery這樣的框架來進行網(wǎng)頁效果開發(fā)。JQuery上手簡單,也很容易學,即使是剛接觸JQuery的開發(fā)人員,借助JQuery手冊,也很快能在項目中使用開發(fā)。

雖然JQuery相對簡單,但要全面掌握,且快速靈活的使用它也并不那么容易,它提供了很多方法,包含了網(wǎng)頁開發(fā)的各個知識面,所以要全面掌握這些知識點,個人認為還是需要對jquery有深入的理解,對這些知識點做分類整理記憶,這樣你才能面對一些JQuery代碼的時候不會感到迷惑,才會知道采用何種方式實現(xiàn)某個特效是最佳實踐,才能快速的采用JQuery來進行項目開發(fā)。

簡單模擬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));

首先,先看代碼段一,我們創(chuàng)建一個javascript引用類型,可以根據(jù)該引用類型以及輸入的參數(shù)創(chuàng)建一個實例對象,輸入的參數(shù)模擬JQuery選擇參數(shù),但沒有JQuery強大,支持部分類型。

我們知道,可以通過new JClass(...)來構造一個實例對象,這沒問題,但是JClass也是一個函數(shù),可以被直接調(diào)用,而直接調(diào)用并不是我們想要的結(jié)果,為了防止JClass被開發(fā)人員直接調(diào)用,我們不能將JClass暴露給開發(fā)人員,那我們只能通過代碼段二方式來構造JClass實例對象。

在代碼段二,我們可以將JQuery暴露給開發(fā)人員,因為無論是通過new JQuery()還是JQuery(),返回的都是JClass實例對象,這是我們要的結(jié)果。

在網(wǎng)頁開發(fā)過程中,為了代碼的復用,我們常常會提供一些工具方法來方便開發(fā),既然JQuery是完全暴露給開發(fā)人員使用的,我們完全可以將這些工具方法作為JQuery的靜態(tài)屬性。具體可參照代碼段三,當然,我們還可以按照這種方式添加其它的工具方法 如text,val,attr,css ........

這些工具方法確實不錯。JClass實例對象(封裝了DOM)也存在一些公用的方法,正好這些方法也可以借助工具方法來實現(xiàn),那怎么為JClass實例對象創(chuàng)建公用方法呢? 可以通過代碼段四的方式實現(xiàn)(如果對這里不理解,請百度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還為網(wǎng)頁開發(fā)提供了一些工具類方法,如each、ajax、isArray、extend等。所以總的來說,JQuery知識點可分為三大類:

  • JQuery選擇器
  • JQuery對象的操作,如DOM操作、表單操作等
  • JQuery的工具方法
  • JQuery插件編寫(知識擴展)

JQuery太流行了,網(wǎng)上的資料太多太多,以致于很多初學者根本不知道從哪學起,這里看一篇博客,那里翻一翻源碼,收集了大量的資料,最后發(fā)現(xiàn)根本沒時間學習,即使花了大量的時間學習,學習到的JQuery也成不了一個體系,到最后全部忘記了。開發(fā)的時候又只能去翻手冊,一直翻手冊能寫出好的代碼么?不可能吧。

下面我分享一下個人認為比較好的資料供初學者一步一步學習。 

  • JQuery入門(書籍+一篇博客)
  • 鋒利的JQuery(第二版)
  • JQuery設計思想
  • JQuery深入學習(深入學習JQuery和javascript很好的資料)
  • JQuery源碼分析系統(tǒng)

JQuery的一些概念

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

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

JQuery,它在JQuery中有個別名 $ 。通過上面章節(jié)的模擬代碼(對應模擬代碼中的JQuery)可知,其實就是一個函數(shù),說得更細致點就是JQuery對象的工廠方法,它可以根據(jù)不同的入?yún)順嬙霬Query對象,如:

  • 字符串表達式。如 $('span') 、$('span .class')、$('#id')
  • HTML 代碼片段。如 $('<span>text</span>')
  • DOM元素。 如$(dom) //假設 var dom = document.getElementById('id');
  • JS Function 。 如 $(function(...) { ... } ); 一般對象或數(shù)組。如 { } 、[ ... ]等

JQuery除了能創(chuàng)建JQuery對象的同時,JQuery自身也有很多靜態(tài)方法,也可以稱為工具方法,如 each、ajax、trim等。這些工具方法不僅在網(wǎng)頁設計時常常會被用到,而且也會被當作工具方法用來實現(xiàn)JQuery對象的原型方法。

JQuery對象,非常重要的一個概念,類似于模擬代碼中的JClass實例,通常是通過JQuery構造出的實例。在JQuery中,我們常常見到的JQuery對象是這樣的: $('#id') 、$('div')等。關于JQuery對象我們要明白以下幾點:

1、JQuery對象繼承了JQuery原型(prototype)的所有屬性和方法
2、JQuery對象不是數(shù)組,但是采用了類似數(shù)組的結(jié)構來存儲元素,而且存儲的元素是通過選擇器獲取得到的DOM對象。參照上面章節(jié)的模擬代碼(JClass實例對象),JQuery對象有個length屬性,表示當前對象里存儲DOM對象的個數(shù),而這些通過選擇獲得的DOM對象,是采用下標為0、1、2、3 ... 作為屬性名來進行存儲的。所以,根據(jù)以上特性,我們完全可以通過下面這種方式來訪問元素:

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

綜合來說,JQuery、JQuery對象、DOM對象三者之間的關系是: JQuery是個工廠方法,用來構造JQuery對象; JQuery對象是個類數(shù)組對象,里面存儲了DOM對象

理解了三者之間的關系,我們在理解下面知識點時,相對來說也就比較容易了:

關于過濾選擇器如何理解? 如$('div:first')
如果理解了JQuery對象的內(nèi)部結(jié)構,理解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對象如何轉(zhuǎn)換?

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

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

總結(jié)

關于JQuery,上手雖然簡單,但如果要高效快速的使用開發(fā),還是需要好好理解下JQuery的。以上只是個人學習過程中的一些感悟和整理,建議各位在學習時也按照自己的思維習慣形成一套自己的知識體系,一來便于日后的開發(fā),二來也便于查閱別人的代碼。最后附注一些有意思的小問題,各位有興趣就思考下吧。

問題一. 你覺得下面哪種方式代碼好一點?為什么?

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

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

問題二. 下面代碼中的this是什么呢?大概實現(xiàn)原理有什么?

全選復制放進筆記
$('#box').click(function(){ 
 var obj = this;
 ... ...
}

以上就是關于jquery原理以及學習技巧介紹,內(nèi)容很充實,信息量很大,需要同學耐心學習,希望從中有所收獲吧。

相關文章

  • 遠離JS災難css災難之 js私有函數(shù)和css選擇器作為容器

    遠離JS災難css災難之 js私有函數(shù)和css選擇器作為容器

    當一個項目龐大到一定階段,例如UI展示層采用了模塊化模板化之后,就會出現(xiàn)js災難,css災難,經(jīng)常出現(xiàn)以前從來不放在一起的兩個js或css莫名奇妙的被放到了一個頁面,基本的原因是模塊重用造成的
    2011-12-12
  • jQuery實現(xiàn)漸變彈出層和彈出菜單的方法

    jQuery實現(xiàn)漸變彈出層和彈出菜單的方法

    這篇文章主要介紹了jQuery實現(xiàn)漸變彈出層和彈出菜單的方法,涉及jQuery漸變效果及css顯示的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-02-02
  • 如何解決谷歌瀏覽器下jquery無法獲取圖片的尺寸

    如何解決谷歌瀏覽器下jquery無法獲取圖片的尺寸

    本章節(jié)介紹一下在谷歌瀏覽器下利用jquery無法獲取圖片尺寸的現(xiàn)象,而在IE和火狐瀏覽器下能夠正常獲得,當然也不是任何時候都無法獲取圖片尺寸,下面給大家介紹遇到此問題該如何解決
    2015-09-09
  • jQuery探測位置的提示彈窗(toolTip box)詳細解析

    jQuery探測位置的提示彈窗(toolTip box)詳細解析

    提示彈窗(toolTip box)經(jīng)常會被用到,但是本文總要的不是彈,也不是窗,而是探測位置,在適當?shù)牡胤綇棿啊P枰呐笥芽梢赃^來參考下,希望對大家有所幫助
    2013-11-11
  • jquery動態(tài)創(chuàng)建div與input的實例代碼

    jquery動態(tài)創(chuàng)建div與input的實例代碼

    下面小編就為大家?guī)硪黄猨query動態(tài)創(chuàng)建div與input的實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • jQuery中fadeOut()方法用法實例

    jQuery中fadeOut()方法用法實例

    這篇文章主要介紹了jQuery中fadeOut()方法用法,以實例形式分析了fadeOut()方法的功能、定義及具體使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • jQuery文字橫向滾動效果的實現(xiàn)代碼

    jQuery文字橫向滾動效果的實現(xiàn)代碼

    下面小編就為大家?guī)硪黄猨Query文字橫向滾動效果的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • uploadify 3.0 詳細使用說明

    uploadify 3.0 詳細使用說明

    uploadify 3.0 詳細使用說明,需要的朋友可以參考下
    2012-06-06
  • jQuery中DOM節(jié)點的刪除方法總結(jié)(超全面)

    jQuery中DOM節(jié)點的刪除方法總結(jié)(超全面)

    這篇文章主要介紹了jQuery中DOM節(jié)點的刪除方法,文中介紹的很相信,內(nèi)容包括empty()的基本用法、remove()的有參用法和無參用法、empty和remove區(qū)別、保留數(shù)據(jù)的刪除操作detach()以及detach()和remove()區(qū)別,需要的朋友可以參考借鑒。
    2017-01-01
  • Jquery數(shù)字上下滾動動態(tài)切換插件

    Jquery數(shù)字上下滾動動態(tài)切換插件

    有時我們需要動態(tài)的展示訪問次數(shù)、下載次數(shù)等效果,我們可以借助jQuery結(jié)合后臺php實現(xiàn)一個滾動的數(shù)字展示效果。
    2015-08-08

最新評論