《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>元素。注意我是如何根据< form>元素确定具体的上下文，仅选择特定的< 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章中看到更多相关的细节。