jQeury在不同的範圍內查詢DOM

jQuery最簡單的功能是在document中用標籤名或標籤ID查詢dom元素,這也是許多人經常用到的方法。document就是當前頁面的文檔對象,document作爲全局命名空間window的一個屬性存在,通過window.document可以得到它的引用。默認情況下jQuery的查詢是在當前文檔內進行的。
而jQuery的查詢功能還允許指定在其他的不同位置或範圍進行查詢。這是通過$()函數的第二個參數,即context指定的。


jQuery(selector, [context])
$(selector, [context])


上面是jQuery查詢器函數的語法。context是可選參數。

jQuery的查詢範圍大致分爲4種(context的取值類型),分別是當前文檔(document)、一個或一些dom元素、iframe或frame內嵌的文檔、從一個ajax請求返回的xml文檔。

下面下文使用到的2個HTML示例文件(爲了代碼簡短,去掉了head等標籤)


basic.html
<body>
<div id="outer1" name="outer" class="outer">
<div class="inner">a</div>
<div class="inner">b</div>
</div>

<div id="outer2" name="outer" class="outer">
<div class="inner">c</div>
</div>

<iframe id="frame1" src="basic-content.html"></iframe>
</body>

basic-content.html
<body>
<div id="content-outer" class="content-outer">
<div class="content-inner">a</div>
</div>
</body>



[b][size=large]一、在當前文檔中查詢[/size][/b]


var jqDiv = $('div');
console.log(jqDiv); (1)

jqDiv = $('div', document);
console.log(jqDiv);(2)

jqDiv = $('div', window.document);
console.log(jqDiv); (3)


輸出:
(1) [div#outer1.outer,div.inner,div.inner,div#outer2.outer, div.inner]
(2) [div#outer1.outer,div.inner,div.inner,div#outer2.outer, div.inner]
(3) [div#outer1.outer,div.inner,div.inner,div#outer2.outer, div.inner]


本文開始已經提過這種查詢方式,上面3個查詢的輸出完全是一樣的。
(1) context被省略時,在當前頁面的文檔中查詢。
(2) 明確指定document,可能有些多餘。
(3) window.document是引用document的另外一種方式,因爲document是window的一個屬性。

[b][size=large]二、在一個或一些dom元素的子節點中查詢[/size][/b]

[b]2.1 context是一個dom元素 [/b]

var domOuter = document.getElementById('outer1');
var jqDiv2 = $('div', domOuter);
console.log(jqDiv2);


輸出:[div.inner, div.inner]

context指定成一個dom元素(即id=outer1的div元素),jQuery在這個dom元素的子節點中進行查找,查詢結果不包括上下文dom元素

[b]2.2 context是多個dom元素時,在每個dom元素的子節點中查詢[/b]

var domOuters = document.getElementsByName('outer');
var jqDiv3 = $('div', domOuters);
console.log(jqDiv3);


輸出:[div.inner, div.inner, div.inner]

outer是2個外層DIV的name,document.getElementsByName()返回2個外層DIV的集合,context被指定成這個值,將在2個外層div裏面進行查詢,然後再將查詢到的dom元素組合在一起,順序與元素在html文檔中出現的順序相同


[b]2.3 context是包裝了dom元素的jQeury對象 [/b]

var jqOuter = $('#outer1');
var jqDiv4 = $('div', jqOuter);
console.log(jqDiv4);


輸出:[div.inner, div.inner]
context是jQuery對象,能實現2.1和2.2的功能。jQuery與dom節點具有等效的作用。

[b][size=large]三、在iframe/frame內的document上查詢[/size][/b]

var jqFrame = $('iframe');
var jqDiv1 = $('div', jqFrame[0].contentWindow.document);
console.log(jqDiv1);

//此處的作用於上面的相同
var domFrame1 = document.getElementById('frame1');
var div2 = domFrame1.contentWindow.document.getElementById('content-outer');
console.log(div2);


查詢iframe中加載的網頁時,context需要指定成iframe.contentWindow.document
contentWindow是iframe或frame所加載的頁面的window對象,而contentWindow.document則是它的文檔
如果context設置了無效的對象,會自動忽略context,然後在當前文檔中繼續查詢

[b][size=large]四、在ajax返回的xml文檔中查詢[/size][/b]

$.ajax({
url:'/jsx/testcase/jquery/basic_data.xml',
dataType: 'xml',
success: function(ret){
var jq = $('book', ret);
console.log(jq)
}
});

用$.ajax()向遠程服務器發起對xml文件的請求,應注意dataType被指定成了xml類型,這樣返回的結果纔是一個 xml文檔。之後的查詢操作與在本地文檔中的查詢完全一樣了。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章