隨筆-199  評(píng)論-203  文章-11  trackbacks-0
          這是一些分析jQuery框架的文字

              針對(duì)jQuery 1.3.2版本

              面向的讀者應(yīng)具備以下要求

              1.非常熟悉HTML

              2.非常熟悉javascript語法知識(shí)

              3.熟悉javascript面向?qū)ο蠓矫娴闹R(shí)

              4.熟練使用jQuery框架

              言歸正傳!

              jQuery對(duì)象的初始化是寫在匿名函數(shù)里的

              就像這樣:

              (function(){alert("jQuery框架分析")})();

              第一個(gè)括號(hào)是聲明了一個(gè)函數(shù),第二個(gè)括號(hào)是執(zhí)行這個(gè)函數(shù)。也就是說,jQuery框架在頁面載入的時(shí)候已經(jīng)做了一些事情(這個(gè)個(gè)匿名函數(shù)已經(jīng)被執(zhí)行了)。做的這些事情使我們可以通過$("#yourId")或$(".yourClass")等方式獲取頁面元素,并把獲取到的元素包裝成jQuery對(duì)象。

              匿名函數(shù)是怎么實(shí)現(xiàn)這些功能的呢?

              首先框架定義了兩個(gè)核心對(duì)象

              jQuery = window.jQuery = window.$ = function( selector, context ) {}

              一個(gè)是jQuery

              一個(gè)是$

              這兩個(gè)對(duì)象都指向一個(gè)函數(shù)

              這個(gè)函數(shù)是我們使用$()或jQuery()方法時(shí)的入口,這個(gè)方法返回一個(gè)jQuery.fn.init( selector, context );的實(shí)例,其實(shí)這個(gè)實(shí)例是一個(gè)jQuery對(duì)象。

              jQuery對(duì)象是一個(gè)什么樣的對(duì)象呢?

              jQuery對(duì)象其實(shí)是一個(gè)javascript的數(shù)組

              這個(gè)數(shù)組對(duì)象包含125個(gè)方法和4個(gè)屬性

              4個(gè)屬性分別是

              jQuery     當(dāng)前的jQuery框架版本號(hào)

              length     指示該數(shù)組對(duì)象的元素個(gè)數(shù)

              context    一般情況下都是指向HtmlDocument對(duì)象

              selector   傳遞進(jìn)來的選擇器內(nèi)容  如:#yourId或。yourClass等

              如果你通過$("#yourId")方法獲取jQuery對(duì)象,并且你的頁面中只有一個(gè)id為yourId的元素那么$("#yourId")[0]就是HtmlElement元素與document.getElementById("yourId")獲取的元素是一樣的

          jQuery對(duì)象是怎么構(gòu)造出來的呢?

              這個(gè)對(duì)象就是剛才我們提到的

              jQuery = window.jQuery = window.$ = function( selector, context ) {}

              框架不只為此對(duì)象定義了一個(gè)方法,還定義了它的原型(prototype)

              jQueryjQuery.fn = jQuery.prototype = {//此處為json對(duì)象}

              原型的定義是通過json對(duì)象定義的

              如

              {

              init: function( selector, context ) {//方法體},

              jQuery: "1.3.2",//屬性

              size: function() {//方法體},

              //……

              }

              前面提到的125個(gè)方法4個(gè)屬性有一部分在這個(gè)json對(duì)象中完成定義的 這個(gè)json對(duì)象中第一個(gè)方法就是init方法也就是入口方法中的jQuery.fn.init( selector, context );此方法與一個(gè)正則表達(dá)式對(duì)象配合來構(gòu)造jQuery對(duì)象

              這個(gè)正則表達(dá)式為:

              quickExpr = /^[^<]*(<(。|\s)+>)[^>]*$|^#([\w-]+)$/

              下面我們說一下init方法的實(shí)現(xiàn)邏輯

              此方法有兩個(gè)參數(shù)

              一個(gè)是selector(選擇器)

              一個(gè)是context(上下文)

              selector就是我們用$("#yourId")或jQuery(".yourClass")傳遞進(jìn)來的變量

              這個(gè)參數(shù)不一定是字符串,也可能是其他形式的變量

              等會(huì)兒我們就會(huì)介紹到

              context參數(shù)我們?cè)谑褂胘Query的時(shí)候很少用到,暫且不表

              注意這兩個(gè)參數(shù)都在返回的jQuery對(duì)象中體現(xiàn)出來了(以兩個(gè)同名的屬性展示)

              下面看一下這個(gè)方法體內(nèi)部的實(shí)現(xiàn)邏輯

            //如果沒有選擇器或者選擇器為空的話,就把document對(duì)象賦值給他
          selector = selector || document;
          //如果selector參數(shù)是dom元素,直接返回jQuery對(duì)象
          //
          也就是說你可以$(document.getElementById("allen"))把你的元素封裝成jQuery對(duì)象
          if ( selector.nodeType ) {
          this[0= selector;
          this.length = 1;
          this.context = selector;
          return this;
          }

          //typeof 取對(duì)象的類型,用三個(gè)等號(hào)效率較高, 不需要類型轉(zhuǎn)換,兩個(gè)等號(hào)默認(rèn)有類型轉(zhuǎn)換
          if ( typeof selector === "string" ) {
          //這里用到了我們前面提到的正則表達(dá)式quickExpr
          //
          match其實(shí)是一個(gè)數(shù)組
          //
          第0個(gè)元素是與正則表達(dá)式相匹配的文本
          //
          第1個(gè)元素是與正則表達(dá)式的第1個(gè)子表達(dá)式相匹配的文本(如果有的話)
          //
          第2個(gè)元素是第2個(gè)子表達(dá)式相匹配的文本(如果有的話)
          //
          第3個(gè)元素是第3個(gè)子表達(dá)式相匹配的文本(如果有的話)這里就是元素的ID,不包含#
          var match = quickExpr.exec( selector );
          //正則表達(dá)式匹配到了內(nèi)容   并且 match[1]不為空 或者 context為空
          //
          match[1]不為空的時(shí)候selector是HTML字符串,也就是你可以用$("
          xland
          ")把對(duì)象包裝成jQuery對(duì)象
          //context為空的時(shí)候selector是頁面元素ID
          if ( match && (match[1] || !context) ) {
           //選擇器為html字符串  此情況暫且不表
          if ( match[1] ){
          selector = jQuery.clean( [ match[1] ], context );}
          //選擇器為ID
          else {
          //得到元素
          var elem = document.getElementById( match[3] );
           //如果得到了這個(gè)元素但是元素的ID屬性不是match[3],跳入分支。分支里面的東西做了什么工作,暫且不表
          if ( elem && elem.id != match[3] ){
          return jQuery().find( selector );}
          //把得到的頁面元素封裝成jQuery對(duì)象
          //如果elem為空,就傳入一個(gè)空數(shù)組,框架怎么處理此空數(shù)組,暫且不表
          //如果不為空就跳入我們前面說的if ( selector.nodeType )分支,構(gòu)造出jQuery對(duì)象來
          var ret = jQuery( elem || [] );
           //設(shè)置jQuery對(duì)象的context屬性
          ret.context = document;
           //設(shè)置jQuery對(duì)象的selector屬性
          ret.selector = selector;
           //返回這個(gè)對(duì)象給調(diào)用者
          return ret;
          }

           至此

              var obj = $(“#yourId”);

              構(gòu)造jQuery對(duì)象的初步工作就做完了

          posted on 2010-05-05 22:50 Werther 閱讀(3251) 評(píng)論(7)  編輯  收藏 所屬分類: 10.Java

          評(píng)論:
          # re: 淺析jQuery框架與構(gòu)造對(duì)象 2010-05-06 00:28 | HiMagic!
          context 對(duì)于限定搜索范圍,提高DOM檢索效率是很有幫助的。  回復(fù)  更多評(píng)論
            
          # re: 淺析jQuery框架與構(gòu)造對(duì)象 2010-05-06 11:21 | 博百優(yōu)
          看了好久, 很有幫助 , 謝謝樓主共享  回復(fù)  更多評(píng)論
            
          # re: 淺析jQuery框架與構(gòu)造對(duì)象 2010-05-06 12:04 | 泰妮絲童裝
          阿里山的那么是你  回復(fù)  更多評(píng)論
            
          # re: 淺析jQuery框架與構(gòu)造對(duì)象 2010-05-06 13:20 | BearRui(AK-47)
          //typeof 取對(duì)象的類型,用三個(gè)等號(hào)效率較高, 不需要類型轉(zhuǎn)換,兩個(gè)等號(hào)默認(rèn)有類型轉(zhuǎn)換

          兩個(gè)等號(hào)不一定有類型轉(zhuǎn)換,兩個(gè)等號(hào)會(huì)先判斷類型是否一樣,如果類型相同,就再調(diào)用===,類型不同的時(shí)候才會(huì)進(jìn)行類型轉(zhuǎn)換。  回復(fù)  更多評(píng)論
            
          # re: 淺析jQuery框架與構(gòu)造對(duì)象 2010-05-07 14:16 | 樂蜂網(wǎng)
          俺們那么少的那個(gè)  回復(fù)  更多評(píng)論
            
          # re: 淺析jQuery框架與構(gòu)造對(duì)象 [未登錄] 2010-08-19 15:16 | dd
          “框架不只為此對(duì)象定義了一個(gè)方法,還定義了它的原型(prototype)

          jQueryjQuery.fn = jQuery.prototype = {//此處為json對(duì)象}

          原型的定義是通過json對(duì)象定義的.”

          不是通過json對(duì)象,而是一種javascript造創(chuàng)造object兩種方法之一,第一種是通過constructor(函數(shù))然后new一個(gè)instance,另一種是通過object literal方式,貌似json,但它們不是一個(gè)概念。  回復(fù)  更多評(píng)論
            
          # re: 淺析jQuery框架與構(gòu)造對(duì)象 2013-02-27 17:46 | 你好啊
          {

          init: function( selector, context ) {//方法體},

          jQuery: "1.3.2",//屬性

          size: function() {//方法體},

          //……

          }
          這里面 jQuery.fn.init( selector, context); 這里面有兩個(gè)參數(shù),為什么我們?cè)谟?("selector")獲取selector的時(shí)候,怎么只寫也下個(gè)參數(shù)呢?一直沒看懂這段意思。希望樓主解釋一下。  回復(fù)  更多評(píng)論
            
          主站蜘蛛池模板: 定西市| 澎湖县| 安徽省| 汕头市| 宁国市| 恭城| 广东省| 习水县| 甘肃省| 河西区| 嫩江县| 竹溪县| 自治县| 西充县| 千阳县| 博罗县| 望城县| 米易县| 崇信县| 临湘市| 恩平市| 文成县| 贡山| 华蓥市| 介休市| 城步| 安丘市| 额敏县| 全南县| 安顺市| 额尔古纳市| 辽宁省| 呼图壁县| 英德市| 邮箱| 永春县| 余江县| 肥西县| 温州市| 左云县| 莲花县|