讀jQuery之五(取DOM元素)

2021-09-06 03:34:42 字數 2122 閱讀 3057

使用過prototype.js的同學知道$(xx)呼叫後返回的是htmlelement或其集合。

jquery的$呼叫後想要獲取dom元素可以使用get方法,如下

// 方式1

$('div').get(1); // 獲取頁面中第二個div

當然,也可以使用陣列索引方式獲取

// 方式2

$('div')[1]; // 獲取頁面中第二個div

上面兩種方式都可以獲取某乙個特定的dom元素,而獲取dom元素集合卻要使用toarray方法

$('div').toarray(); // 返回頁面中所有的div,依次放入陣列中
看看get方法的原始碼

get: function( num ) ,
get內就乙個三元運算子,即兩個分支。

分支1,當不傳引數時將獲取所有dom元素(呼叫toarray)

分支2,當num為數字(索引)時返回指定的某乙個dom元素(數字為負數時為逆向獲取)

分支1實際是將jquery物件(偽陣列)轉成真正的陣列,分支2實際是(用中括號)取「偽陣列」元素。下面以$('div')來描述整個呼叫過程

獲取頁面div元素(document.getelementsbytagname('div'))

將集合htmlcollection/nodelist轉成真正的陣列

將陣列轉成偽陣列/arraylike(jquery物件) 如圖

第一步是選擇器sizzle做的事

第二步將htmlcollection/nodelist轉成陣列以前討論過

第三步又將陣列轉成偽陣列/arraylike(jquery物件),只需呼叫下陣列的push即可

也許下面的例子容易理解

var jqobj = , // 偽陣列(arraylike)

ary = ['one','two','three']; //陣列

// 將偽陣列(arraylike)轉成陣列

function jqobjtoarray(json)

// 將陣列轉成偽陣列(arraylike)

function arraytojqobj(ary), push = array.prototype.push;

return obj;

}console.log(jqobjtoarray(jqobj));

console.log(arraytojqobj(ary));

jquery還提供了first/last/eq/slice方法,它們與上面提到的get/toarray不同。它們返回的是jquery物件而非返回htmlelement。如下html片段

abc

d

$('div').first() 返回jq物件集合的第乙個元素, 即div[id=a],結構:;//...表示省略了其它屬性

$('div').last() 返回jq物件集合的最後的元素, 即div[id=d],結構:;

$('div').eq(2) 返回jq物件匹配的第三個元素, 即div[id=c],結構:;

檢視原始碼得知:

first,last方法中直接呼叫了eq方法

eq方法中呼叫了slice方法

因此slice方法才是根本。該方法讓我們自然想到陣列的slice方法,實際上jquery正是利用array的push和slice方法。

利用array.prototype.slice方法將 偽陣列 轉成 陣列

利用array.prototype.push方法將 陣列 轉成 偽陣列

當然jquery中的slice方法呼叫了pushstack。我這裡簡寫了slice,如

slice : function(),
相關:將htmlcollection/nodelist/偽陣列轉換成陣列

z.js

jQuery之選擇DOM元素

jquery的選擇器非常強大,下面總結了一下jquery選擇器的常用型別。基本選擇器 層級選擇器 屬性選擇器 表單元素選擇器 基本過濾選擇器 子代過濾選擇器 內容過濾選擇器 可見性過濾選擇器 基本選擇器包括 萬用字元選擇器 calss 類名選擇器 tag 標籤選擇器 id id選擇器 jquery ...

JQuery 操作DOM元素

使用attr 方法控制元素的屬性 使用attr 屬性名 是獲取該屬性的值。使用attr 屬性名 屬性值 是設定屬性的值 html text 方法控制元素的文字 包含樣式 使用html 時是獲取元素的html文字 包括樣式 如果文字是斜體的,獲取到的也是斜體的 使用html 哈哈哈 時是將元素的htm...

讀dom程式設計藝術總結 操作dom元素

一.獲取元素節點三種方法 document.getelementbyid id1 document.getelementsbytagname 標籤的名字例如 ul 得到所有的標籤 html5新增的方法 document.getelementbyclassname id1 可以這樣封裝 functio...