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章中看到更多相关的细节。
时间： 2024-10-30 13:48:55