jQeury在不同的范围内查询DOM
转自:http://blog.csdn.net/ahopedog/article/details/6272553
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" mce_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>
一、在当前文档中查询
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的一个属性。
二、在一个或一些dom元素的子节点中查询
2.1context是一个dom元素
var domOuter = document.getElementById('outer1'); var jqDiv2 = $('div', domOuter); console.log(jqDiv2);
输出:[div.inner,div.inner]
context指定成一个dom元素(即id=outer1的div元素),jQuery在这个dom元素的子节点中进行查找,查询结果不包括上下文dom元素
2.2context是多个dom元素时,在每个dom元素的子节点中查询
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文档中出现的顺序相同
2.3context是包装了dom元素的jQeury对象
var jqOuter = $('#outer1'); var jqDiv4 = $('div', jqOuter); console.log(jqDiv4);
输出:[div.inner,div.inner]
context是jQuery对象,能实现2.1和2.2的功能。jQuery与dom节点具有等效的作用。
三、在iframe/frame内的document上查询
var jqFrame = $('iframe'); var jqDiv1 = $('div', jqFrame[0].contentWindow.document); console.log(jqDiv1);
//此处的作用于上面的相同
vardomFrame1=document.getElementById('frame1');
vardiv2=domFrame1.contentWindow.document.getElementById('content-outer');
console.log(div2);
查询iframe中加载的网页时,context需要指定成iframe.contentWindow.document
contentWindow是iframe或frame所加载的页面的window对象,而contentWindow.document则是它的文档
如果context设置了无效的对象,会自动忽略context,然后在当前文档中继续查询
四、在ajax返回的xml文档中查询
$.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文档。之后的查询操作与在本地文档中的查询完全一样了。