《jQuery Cookbook中文版》——1.4 在指定上下文中选择DOM元素

简介:

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.4节,作者:【美】jQuery社区专家组 译者:姚军 , 孙博更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4 在指定上下文中选择DOM元素

1.4.1 问题
你需要引用在另一个DOM元素或者文档上下文中的单个DOM元素或者一组DOM元素,以便用jQuery方法操作这些元素。
**
1.4.2 解决方案**
当传递CSS表达式时,jQuery函数还有第二个参数,这个参数告诉jQuery函数应该在那个上下文中根据表达式搜索DOM元素。在这种情况下,第二个参数可以是一个DOM引用、jQuery包装器或者文档。在下面的代码中有12个input元素。注意我是如何根据screenshot元素确定具体的上下文,仅选择特定的input元素的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
</form>

<form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
</form>

<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />

<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">

//使用上下文包装器在所有表单元素中搜索,警告框中显示"selected 8 inputs"
alert('selected ' + jQuery('input',$('form')).length + ' inputs');

//用DOM引用作为上下文,在第一个表单元素中搜索,警告框中显示"selected 4 inputs"
alert('selected ' + jQuery('input',document.forms[0]).length + ' inputs');
//用表达式搜索body元素中的所有输入元素,警告框中显示"selected 12 inputs"
alert('selected ' + jQuery('input','body').length + ' inputs');
</script>
</body>
</html>

1.4.3 讨论
正如1.4.2节所提到的,也可以将文档作为搜索的上下文。例如,可以在一个XHR请求(Ajax)发回的XML文档的上下文中搜索。你可以在第16章中看到更多相关的细节。

相关文章
|
27天前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
N..
|
23天前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
13 1
|
28天前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
28天前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
1月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式
|
3月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
19 0
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
25 0
|
3月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
27 0
|
JavaScript 前端开发
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
157 0
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性