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

    xiaoxiao2024-05-12  99

    本节书摘来自异步社区《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个元素。注意我是如何根据元素确定具体的上下文,仅选择特定的元素的:

    <!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章中看到更多相关的细节。

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)