2.2 使用$()函数
我们通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中。通过jQuery对象实际地操作这些元素会非常简单。可以轻松地为jQuery对象绑定事件、添加漂亮的效果,也可以将多重修改或效果通过jQuery对象连缀到一起。
然而,jQuery对象与常规的DOM元素不同,而且也没有必要为实现某些任务给纯DOM元素或节点列表添加相同的方法和属性。在本章的最后一部分中,我们会介绍如何直接访问收集在jQuery对象中的DOM元素。
为了创建jQuery对象,就要使用$()
函数。这个函数接受CSS选择符作为参数,充当一个工厂,返回包含页面中对应元素的jQuery对象。所有能在样式表中使用的选择符都可以传给这个函数,随后我们就可以对匹配的元素集合应用jQuery方法。
让jQuery与其他JavaScript库协同工作
在jQuery中,美元符号$
只不过标识符jQuery
的“别名”。由于$()
在JavaScript库中很常见,所以,如果在一个页面中使用了几个这样的库,那么就会导致冲突。在这种情况下,可以在我们自定义的jQuery代码中,通过将每个$
的实例替换成jQuery
来避免这种冲突。第10章还会介绍这个问题的其他解决方案。
有3种基本的选择符:标签名、ID和类。这些选择符可以单独使用,也可以与其他选择符组合使用。表2-1展示了这3种基本的选择符。
表2-1 基本的选择符
选 择 符 | CSS | jQuery | 说 明 |
---|---|---|---|
标签名 | P {} | $('p') | 取得文档中所有的段落 |
ID | #some-id {} | $('#some-id') | 取得文档中ID为some-id 的一个元素 |
类 | .some-class {} | $('.some-class') | 取得文档中类为some-class 的所有元素 |
第1章曾经提到过,在将方法连缀到$()
工厂函数后面时,包装在jQuery对象中的元素会被自动、隐式地循环遍历。换句话说,这样就避免了使用for
循环之类的显式迭代(这种迭代在DOM脚本编程中非常常见)。
在介绍了基本的情况之后,下面我们就开始探索选择符的一些更强大的用途。