jQeury在不同的范围内查询DOM

最新推荐文章于 2023-08-03 15:30:00 发布

ahopedog

最新推荐文章于 2023-08-03 15:30:00 发布

阅读量88

点赞数

分类专栏： jQuery 文章标签： jQuery Ajax XML HTML ViewUI

本文链接：https://blog.csdn.net/ahopedog/article/details/83877466

版权

jQuery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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文档。之后的查询操作与在本地文档中的查询完全一样了。

ahopedog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQeury在不同的范围内查询DOM

jQuery最简单的功能是在document中用标签名或标签ID查询dom元素，这也是许多人经常用到的方法。document就是当前页面的文档对象，document作为全局命名空间window的一个属性存在，通过window.document可以得到它的引用。默认情况下jQuery的查询是在当前文档内进行的。而jQuery的查询功能还允许指定在其他的不同位置或范围进行查询。这是通过$(...
复制链接

扫一扫

专栏目录