关于jQuery参考实例 1.0 jQuery的哲学
170 浏览量
2020-10-27
13:16:31
上传
评论
收藏 69KB PDF 举报
关于关于jQuery参考实例参考实例 1.0 jQuery的哲学的哲学
本文为大家介绍关于jQuery参考实例 1.0 jQuery的哲学，有需要的朋友可以参考一下。
本文翻译自jQuery Cookbook (O'Reilly 2009) 1.0 The jQuery Philosophy
jQuery的哲学是“写更少的代码，做更多的事情”，这一哲学可分述为三个概念：
用CSS选择器查找元素，并通过jQuery方法来操作这些元素
在元素集上链式调用多个jQuery方法
jQuery封装与隐式遍历
充分理解这三个概念对于编写jQuery代码来说至关重要。我们来详细看一下这三个概念。
查找元素并进行操作查找元素并进行操作
更准确的说，是在DOM树中定位一批元素，然后对该元素集进行操作。比如下面这个例子：首先向用户隐藏一个<div>元素，
然后向这个隐藏了的<div>元素内插入一些新文本，之后更改其属性，最后重新显示这个<div>元素。相应的jQuery代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div>old content</div>
<script>
//隐藏页面上所有的div元素
jQuery('div').hide();
//更新所有div元素内的文本
jQuery('div').text('new content');
//在所有的div元素上添加值为updatedContent的class属性
jQuery('div').addClass("updatedContent");
//显示页面上所有的div元素
jQuery('div').show();
</script>
</body>
</html>
我们来逐一看一下这四个jQuery语句：
隐藏页面上所有的div元素，让它们变得不可见
用新文本（'new content'）来替换隐藏的div元素中的原有文本
向div元素添加新的class属性值（updatedContent）
在页面上重新显示div元素
上面的例子使用jQuery函数查找HTML页面中所有的<div>元素，然后用jQuery方法对其进行操作（hide(), text(), addClass(),
show()）。
链式调用链式调用
在调用jQuery方法的时候，按照jQuery的设计，可以对这些方法进行链式调用。比如，只做一次元素查找，然后在找到的元素
上展开一系列操作。之前的代码示例可以用链式调用重写为一句JavaScript语句。
使用链式调用，可以将下面的代码：
//隐藏页面上所有的div元素
jQuery('div').hide();
//更新所有div元素内的文本
jQuery('div').text('new content');
//在所有的div元素上添加值为updatedContent的class属性
jQuery('div').addClass("updatedContent");
//显示页面上所有的div元素
jQuery('div').show();
重写成：
jQuery('div').hide().text('new content').addClass("updatedContent").show();
如果加上代码缩进就是：
jQuery('div')
评论0
最新资源