《jQuery Cookbook中文版》——1.3 用选择器和jQuery函数选择DOM元素
本节书摘来自异步社区《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编程工作中将使你获益匪浅。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
相关文章
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏
- jQuery如何追加内容?匿名函数
- Jquery选择器之父节点的子节点
- jQuery 取选中的radio的值方法
- jQuery的attr与prop
- jQuery.delegate() 函数详解
- jQuery温习篇---强大的JQuery选择器
- jQuery之筛选函数
- JQuery模板插件jquery.tmpl-动态ajax扩展
- 网页引导:jQuery插件实现的页面功能介绍引导页效果
- jQuery EasyUI布局容器layout实例精讲
- jQuery图片延迟加载插件:jquery.lazyload
- Jquery超简单遮罩层实现代码
- 使用Jquery+EasyUI 进行框架项目开发案例解说之二---用户管理源代码分享
- jQuery实现左移右移
- python web py入门(42)- 函数的集合--jquery库
- jquery不包含某个类?
- jQuery 核心函数