《jQuery Cookbook中文版》——1.3 用选择器和jQuery函数选择DOM元素

简介: 如果你在Web浏览器中运行这个HTML页面,就会看到这段代码执行一个浏览器alert()方法,告诉我们该页面包含6个元素。我首先选择所有的元素,然后用length属性返回jQuery包装器集中元素的数量,并将其传递给alert()方法。

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.3节,作者:【美】jQuery社区专家组著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.3 用选择器和jQuery函数选择DOM元素

1.3.1 问题
你需要选择一个DOM元素或者一组DOM元素,以便用jQuery方法作用于这些元素。

1.3.2 解决方案
当你需要从DOM中选择元素时,jQuery提供两种备选方案。这两种选项都要求使用jQuery函数(jQuery()或其别名$())。第一种选项使用CSS选择器和自定义选择器,这是最常用和最清晰的解决方案。通过向jQuery函数传递一个包含选择器表达式的字符串参数,该函数将遍历DOM并查找表达式定义的DOM节点。下面的代码是一个例子,选择HTML文档中的所有元素:

<!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">
   //用警告框显示页面上有6个元素
   alert('Page contains ' + jQuery('a').length + ' <a> elements!');
</script>
</body>
</html>

如果你在Web浏览器中运行这个HTML页面,就会看到这段代码执行一个浏览器alert()方法,告诉我们该页面包含6个元素。我首先选择所有的元素,然后用length属性返回jQuery包装器集中元素的数量,并将其传递给alert()方法。

你应该知道,这里使用的jQuery函数的第一个参数能够接受多个表达式,只要在传递给jQuery函数的第一个字符串参数中用逗号分隔多个选择器就行了。下面是一个例子:

jQuery('selector1, selector2, selector3').length;
选择DOM元素的第二种选项是向jQuery函数传递DOM元素的实际JavaScript引用,这种选项不如第一种常用。举个例子,下面的代码将选择HTML文档中的所有元素。注意,我传递给jQuery函数的是一个用getElementsByTagName DOM方法收集到的元素数组。这个例子的结果和前一个代码示例完全相同:

<!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">
   //用警告框提示页面上有6个元素
   alert('Page contains ' + jQuery(document.getElementsByTagName('a')).length +
' <a> Elements, And has a '
   + jQuery(document.body).attr('bgcolor') + ' background');
</script>
</body>
</html>

1.3.3 讨论
众所周知,jQuery能够胜任繁重的工作,这在某种程度上是因为选择器引擎Sizzle,该引擎能够从HTML文档中选择DOM元素。虽然向jQuery函数传递DOM引用在必要的时候是个很好的选择,当它并不是jQuery进入众人视野的原因。选择器拥有的许多强大的选项才是jQuery与众不同之处。

在本书余下的部分中,你将会学习到各种强大和健壮的选择器,对这些选择器的功能都要彻底地理解。这些知识在未来的jQuery编程工作中将使你获益匪浅。

相关文章
|
4天前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
25 10
|
11天前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
30 5
|
8天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
8天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
9天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
16 2
|
11天前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
11天前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
10 0
|
JavaScript 数据安全/隐私保护
|
Web App开发 JavaScript 前端开发
《扩展 jQuery》——第6章 函数插件 6.1定义插件
基于5.5.2节中描述的本地化方案,这个工具假定相关的JavaScript文件只由它们的语言或地区码来区别。当发生请求时,这个插件以语言和地区码的升序来加载这些文件,每个都覆盖前一个,这样能得到给定的语言和地区的最佳匹配结果。
1484 0
|
5月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload