而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文檔。之後的查詢操作與在本地文檔中的查詢完全一樣了。