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编码中发挥巨大的作用。
分享到:
相关推荐
NULL 博文链接:https://adamed.iteye.com/blog/701953
NULL 博文链接:https://adamed.iteye.com/blog/667631
jQuery Cookbook 英文版,喜欢的人来下下。 jQuery simplifies building rich, interactive web frontends. Getting started with this JavaScript library is easy, but it can take years to fully realize its ...
Jquery cookbook ,一本Jquery的入门好书,值得看看
Packt Publishing ASP.NET jQuery Cookbook (2011)
jQuery_CookBook中文版,高清,内容覆盖性好
jQuery.Cookbook(第1版)].源代码
jQuery Cookbook Nov 2009.pdf
ASP.NET.jQuery.Cookbook.pdf ASP.NET.jQuery.Cookbook.pdf 国外惊胆asp.net 结合jquery的书籍 高清电子版本,顺便锻炼英语水平。 本人从不吭兄弟
jQuery UI Cookbook(2013.7) Adam Boduch (pdf + ePub) 出版时间:2013.7 Adam Boduch Packt 内容简介: jQuery UI is the quintessential framework for creating professional user interfaces. While jQuery ...
PHP与jQuery开发实例PHP jQuery Cookbook.pdf
jQuery CookBook
eBook - jQuery Cookbook Dec.2009
ASP.NET jQuery Cookbook英文版的,边学习知识边学习英文
Packpub Asp.Net Jquery cookbook (English version)
PHP jQuery Cookbook + codebundle, 英文版 2010-12月
jQuery Cookbook - Lindley Cody.pdf Ideal for newcomers and JavaScript veterans alike, jQuery Cookbook starts with the basics and then moves to practical use cases with tested solutions to common web ...
jQuery原版PDF教材。 jQuery简化了丰富的、交互Web前端的构建过程。学会上手这个JavaScript库不难,但是若要全面掌握、深入理解,恐怕得花费多年时间。奉书合理地缩短了学习曲线。在各个章节中,你将从很多领先的...
jquery cookbook is a good reference for those who start using jquery
jQuery Mobile Cookbook 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在...