jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素、子元素,等等。通过一个简单的例子,可以帮助我们理解文档各元素构成的树形结构:
<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
</div>
</body>
</html>
这里,<html>是其他所有元素的祖先元素,换句话说,其他所有元素都是<html>的后代元素。<head>和<body>元素是<html>的子元素(但并不是它唯一的子元素)。因此除了作为<head>和<body>的祖先元素之外,<html>也是它们的父元素。 而<p>元素则是<div>的子元素(也是后代元素),是<body>和<html>的后代元素,是其他<p>元素的同辈元素
使用$()函数
通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中,可以轻松地为jQuery对象绑定事件、添加漂亮的效果,也可以将多重修改或效果通过jQuery对象连缀到一起。为了创建jQuery对象,就要使用$()函数。这个函数接受CSS选择符作为参数,充当一个工厂,返回包含页面中对应元素的jQuery对象。所有能在样式表中使用的选择符都可以传给这个函数,随后我们就可以对匹配的元素集合应用jQuery方法。
有三种基本的选择符(当然还有其他的),标签名、ID和类。这些选择符可以单独使用,也可以与其他选择符组合使用。在将方法连缀到$()工厂函数后面时,包装在jQuery对象中的元素会被自动、隐式地循环遍历。换句话说,这样就避免了使用for循环之类的显式迭代(这种迭代在DOM脚本编程中非常常见)
下面我们来看一个例子