`
adamed
  • 浏览: 184524 次
社区版块
存档分类
最新评论

JQuery CookBook翻译连载3

jQueryAjaxJavaScript浏览器HTML 
阅读更多

1.3 使用选择器及jQuery函数选择DOM元素

问题

你需要选择一个单独的DOM元素（或者一系列DOM元素）以便提供给jQuery提供的方法来操作这些DOM元素。

解决方案

jQuery提供了2种方式以便使用者可以从DOM中选择你需要的元素。这2种方式都需要使用jQuery方法(jQuery()或者它的缩写$())。第一种方式是使用css选择器和自定义选择器, 这种方式是最常用的也是大家了解最多的方式。通过向jQuery方法传递一个字符串类型的选择器表达式， jQuery方法会遍历DOM文档找出该表达式对应的DOM节点。下面的代码将在HTML中找出所有的<a>元素。
Code:

<!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>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
//alerts there are 6 elements
alert('Page contains ' + jQuery('a').length + ' <a> elements!');
</script>
</body>
</html>
 


如果你在浏览器中运行这个HTML页面，你将会看到浏览器调用alert方法告诉我们页面中有6个<a>元素。首先，我通过jQuery('a')找出所有的a标签元素集合（jQuery('a')返回jQuery封装的集合类型），然后使用length方法返回集合中a标签元素的数量，最后将这个数值通过alert()方法打印出来。

您可能已经意识到，我们向jQuery方法传递的第一个参数可以接收多个表达式。我们只需要在传递给jQuery方法的第一个参数字符串中,使用逗号分开各个选择器就可以了。下面的代码为我们实现了一个简单的样例:

 
Code:

   1. jQuery('selector1, selector2, selector3').length;  

 
另一种我们并不常用的选择DOM元素的方式是直接向jQuery方法中传递JavaScript的DOM元素引用。下面的代码是这种方式的一个简单的例子， 其作用是筛选出HTML文档中所有的a标签元素。请注意，在这里我直接向jQuery方法中传递一个通过getElementsByTagName方法获取的a标签元素的DOM数组。这个例子的执行结果和第一种方式样例代码的执行结果是一样的。
Code:

<!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 bgcolor="yellow"> <!-- yes the attribute is depreciated, I know, roll
with it -->
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
//alerts there are 6 elements
alert('Page contains ' + jQuery(document.getElementsByTagName('a')).length +
' <a> Elements, And has a '
+ jQuery(document.body).attr('bgcolor') + ' background');
</script>
</body>
</html>
 



讨论

众所周知，使用选择器引擎在HTML文档中查找DOM元素是一项繁琐的工作，并且向jQuery方法中传递DOM引用这种方法也并不像第一种方法那样为大家所知。但是不得不说，这是一个非常强大的功能，也正是选择器的这个功能让jQuery如此的与众不同。

在全书剩余的部分，你会发现许多功能强大的选择器。你要确保你完全理解每一个选择器的功能。这部分知识将会在你未来使用jQuery编码中发挥巨大的作用。

分享到：
| JQuery CookBook翻译连载4
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics