jQeury在不同的范围内查询DOM

本文介绍jQuery如何在不同范围内查询DOM,包括当前文档、特定DOM元素、iframe内的文档及AJAX返回的XML文档。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

jQeury在不同的范围内查询DOM

jQuery最简单的功能是在document中用标签名或标签ID查询dom元素,这也是许多人经常用到的方法。document就是当前页面的文档对象,document作为全局命名空间window的一个属性存在,通过window.document可以得到它的引用。默认情况下jQuery的查询是在当前文档内进行的。

jQuery的查询功能还允许指定在其他的不同位置或范围进行查询。这是通过$()函数的第二个参数,即context指定的。

 

 

上面是jQuery查询器函数的语法。context是可选参数。

 

jQuery的查询范围大致分为4种(context的取值类型),分别是当前文档(document)、一个或一些dom元素、iframeframe内嵌的文档、从一个ajax请求返回的xml文档。

 

下面下文使用到的2HTML示例文件(为了代码简短,去掉了head等标签)

 

一、在当前文档中查询

 

 

 

输出:

(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的另外一种方式,因为documentwindow的一个属性。

 

二、在一个或一些dom元素的子节点中查询

 

2.1 context是一个dom元素

 

 

 

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

 

context指定成一个dom元素(即id=outer1div元素),jQuery在这个dom元素的子节点中进行查找,查询结果不包括上下文dom元素

 

2.2 context是多个dom元素时,在每个dom元素的子节点中查询


 

 

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

 

outer2个外层DIVnamedocument.getElementsByName()返回2个外层DIV的集合,context被指定成这个值,将在2个外层div里面进行查询,然后再将查询到的dom元素组合在一起,顺序与元素在html文档中出现的顺序相同

 

      

2.3 context是包装了dom元素的jQeury对象


 

   

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

contextjQuery对象,能实现2.12.2的功能。jQuerydom节点具有等效的作用。

 

三、在iframe/frame内的document上查询

 

 

 

查询iframe中加载的网页时,context需要指定成iframe.contentWindow.document

contentWindowiframeframe所加载的页面的window对象,contentWindow.document则是它的文档

如果context设置了无效的对象,会自动忽略context,然后在当前文档中继续查询

 

四、在ajax返回的xml文档中查询

 

 

$.ajax()向远程服务器发起对xml文件的请求,应注意dataType被指定成了xml类型,这样返回的结果才是一个 xml文档。之后的查询操作与在本地文档中的查询完全一样了。

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值