Jquery原始碼分析 二)

2021-08-29 15:37:00 字數 1775 閱讀 9983

prk  2008-08-12

型別

說明

dom element

第乙個引數為dom元素,第二個引數不用。直接把dom元素存在新生成的jquery物件的集合中。返回這個jquery物件。構建jquery物件完成。

string

第乙個引數為string有三種情況:

1、html的標籤字串,$(html) -> $(array),第二個引數可選。

執行selector = jquery.clean([match[1]], context);。該語句是把hteml的字串轉換成dom物件的陣列。接著執行array型別的返回。

2、字串為#id時$(id)

首先通過var elem = document.getelementbyid(match[3]);取得elem,如沒有取到selector = ;轉到執行array型別的返回空集合jquery物件。

如找到elem,通過return jquery(elem);再次生成jquery物件,這次是

dom element型別的jquery物件的返回。

3、相容css1-3語法的selector字串,第二個引數是可選的。

執行return jquery(context).find(selector);。該語句先執行jquery(context)。可以看出context第二引數可以是任意的值,可以是集合形式。之後就通過find(selector)找到jquery(context)中所有dom元素都滿足selector表示式的dom元素的集合,構建新的jquery物件,並返回。

#id其實和這種方式是統一的,單獨出來是為了提高效能。

fn第一引數是函式。第二個引數不用。是$(document).ready(fn)

的的簡寫,其return

jquery(document)[jquery.fn.ready ? "ready" : "load"](selector)是其執行的**。這個語句首先執行jquery(document),它再一次newjquery.fn.init函式,生成jquery物件(元素為document)。再呼叫這個物件的ready(fn)

方法。ready(fn)

返回當前物件。而上面的語句又是返回這個ready(fn)

的返回物件。

可見這個$(fn)

返回是$(document)

的物件。拋棄了第一次生成的$(fn)

物件。array

第一引數是除上面提到dom元素,函式,string所有其它的型別。可以為空如$()。第二個引數不用。

語句:return this.setarray(jquery.makearray(selector));

它首先是把第乙個引數轉換陣列。selector可以是array-like的集合,如jquery物件,如getelementsbytag返回的dom元素集合等,可能支援$(this)。selector還可能是單個任意的物件。

轉換成標準的陣列之後,執行 this.setarray把這個陣列中的元素全部存到當前jquery物件的集合中。之後返回當前的jquery物件。

其實dom element完全可能綜合在這裡面,單獨拿起來為了提高效能。

從上面的**和上表中,我們可以看出構建jquery物件就是往jquery物件的集合中新增元素(一般都應該是dom元素)。新增的元素有兩種形式,一是單個元素,可能通過直接的dom元素的傳參,還可以通過#id從dom文件中找元素。二是集合,如jquery物件,還有陣列,還有通過css selector找到的dom集合。

jQuery原始碼分析

工具 版本說明 版本號備註 jquery 2.1.1 sublime 3jquery function selector,context jquery.fn jquery.prototype 快速匹配正則 不加g 不光匹配整體項還會匹配到子項 rquickexpr s w w w init jque...

jQuery原始碼分析

一 jquery如何做到不汙染變數名並暴露出 供使用者使用 jquery將變數和 寫進立即執行函式,通過函式來包裹所有的變數和方法,再在這個立即執行函式上將 jquery方法繫結到window上,就可以讓使用者使用到jq方法了。二 jquery是如何做到 jquery 的?function wind...

jQuery 原始碼分析

這篇文章可以說是讀這篇文章這篇文章後的總結。jquery最基本的構成結構 var jquery window.jquery window.function a,b jquery.fn jquery.prototype age function jquery.fn.init.prototype jqu...