第二章 jQuery技術解密 四

2021-06-03 23:10:15 字數 944 閱讀 3205

jquery.fn.init() 建構函式能夠構建 jquery 物件,並把匹配的 dom 元素儲存在 jquery 物件內部集合中。jquery.fn.init() 建構函式可以接收單個的 dom 元素,也可以接收 dom 集合。如果接收的是字串型 id 值,則直接在文件中查詢對應的 dom 元素,並把它傳遞給 jquery 物件;如果接收的是字串型 html 片段,則需要把這個字串片段生成 dom 元素。下面我們將重點分析 jquery 是如何把 html 片段生成 dom 元素的。

在2.3.3節中,我們可以看到 jquery.fn.init() 構造器通過 jquery.clean([match[1], context]); 語句實現把 html 片段生成 dom 元素,jquery.clean() 是乙個公共函式。源**及其注釋如下所示。

jquery.clean() 包含三個引數,其中 elems 和 context 可以支援多種形式的值。elems 引數可以為陣列、類陣列、物件結構的形式。陣列元素和物件屬性可以混合使用。

對於數字型別引數,則會被轉換為字串型,除了字串型外,其他的都放入返回的陣列中,當然對於集合形式只需要讀取集合中每個元素即可。

對於字串型引數,則把它轉換成 dom 元素,再存入返回的陣列中。轉換的方式是,把 html 字串片段賦值給建立的 div 元素的 innerhtml ,這樣就可以把 html 字串片段掛到 dom 文件樹中,從而實現把字串轉換成 dom  元素。

在轉換過程中,應該考慮 html 語法約定,因為標籤巢狀是有嚴格限制的,例如,必須存在 中。因此在執行轉換前,還應該對 html 字串進行預處理,即修正 html 標籤不規範的用法,這也是 jquery.clean() 函式的乙個重要工作。

上面這段**實際上最後訪問的是乙個名為 ret 的陣列,陣列中的元素變為 dom 元素的物件,而它的 innerhtml 正好就是剛才的 html 字串。

第二章 jQuery技術解密 五

jquery 函式能夠直接接受 html 字串,並把它們轉換為 dom 結構,這是上一節中所講解的利用 jquery 函式生成 dom 元素。當然,我們也可以看到 jquery 函式還可以接收 dom 元素 dom元素集合 html標籤或者 id 值。下面我們就來分析 jquery.fn.init ...

第二章 jQuery技術解密 五

jquery 函式能夠直接接受 html 字串,並把它們轉換為 dom 結構,這是上一節中所講解的利用 jquery 函式生成 dom 元素。當然,我們也可以看到 jquery 函式還可以接收 dom 元素 dom元素集合 html標籤或者 id 值。下面我們就來分析 jquery.fn.init ...

第二章 jQuery技術解密 七

在 jquery.fn.init 構造器中,通過呼叫 jquery context find selector 函式來解析並匹配 dom 元素。jquery.find 函式實際上是引用 sizzle 函式,而 sizzle 函式僅是 sizzle 引擎的構造器,它主要呼叫 sizzle.find 函...