下面的几小节将介绍jQuery的基础知识。如前所述,不可能仅仅通过一章的内容详细介绍jQuery, 但可以向你说明如何对HTML文档中的内容执行简单的操作,以及更重要的,如何逐步实现本书其他 部分的示例。 jQuery功能通过一个名为jQuery的JavaScript函数访问,但在实际应用中很少看到该jQuery函数。 这是因为该函数有一个简写的名称,即美元符号($)。当看到以$开头的JavaScript代码时,即表示jQuery 代码。
等待DOM
在浏览器中处理HTML文档的内容时,需要确保所有元素都已加载完毕,然后才能开始更改。这 点特别重要,因为jQuery的主要用途是使用CSS选择器查找文档中的元素,后文详述。如果在浏览器 加载并处理完整个HTML文档之前应用CSS选择器,那可能会得到出人意料的结果,因为此时查找的 部分或所有元素还无法使用。 有两个方法可以确保在完全处理DOM之后再执行jQuery代码。第一种方法是将script元素放在 HTML文档body部分的末尾,使它们成为最后由浏览器处理的元素。第二种方法(本书采用的方法) 是使用jQuery ready函数,如代码清单4-5所示。
你会发现,在线看到的几乎每个jQuery示例或演示都使用了ready函数。传递给$函数的document 对象是浏览器用于呈现HTML文档的标准DOM API对象。当DOM是唯一的参数时会传递希望执行的函 数,从而对$函数返回的结果调用ready函数。浏览器处理完文档中的所有元素后,ready函数将执行以 参数形式提供的函数。
jQuery语句
jQuery语句通常由两部分组成。第一部分选择要处理的元素,第二部分对这些元素执行操作。代 码清单4-6在Default.js文件中添加了一条典型的jQuery语句。
jQuery使用CSS选择器查找元素,因此,代码清单4-6中的语句首先使用$函数选择文档中的所 有th元素。通常,$函数会调用其他jQuery函数,从而返回可以对其执行操作的匹配对象集合。该代 码清单中调用了addClass函数,它会修改集合中所有元素的class特性,以添加指定的类(本例中为 highlight)。
以下是Web窗体发送给浏览器的th元素
以下是执行jQuery代码后的th元素:
jQuery语句将对HTML文档中的所有th元素执行操作。jQuery使用浏览器定义的DOM API修改用 于向用户显示内容的HTML文档的表示形式。也就是说,当使用jQuery对元素执行操作时,相关更改 将立即向用户显示;在th元素中添加highlight类的效果如图4-4所示。
上图中的表格之所以出现视觉变化,是因为代码清单4-2的Styles.css文件中定义了一个CSS样式 highlight。在th元素中添加一个类,更改了浏览器显示元素的方式。我们不想过多强调这一点,但请 注意,jQuery并未执行任何神奇的操作——它只是对标准浏览器API进行简单包装,使它们更易于使 用而已。
注意:
jQuery所做的更改仅限于浏览器,而不会对通过Web窗体生成的HTML造成任何影响。在Web
窗体到达浏览器后,jQuery用于优化由Web窗体发送的内容。即使Web窗体向浏览器发送jQuery
语句,浏览器也将执行这些语句并做出相应的更改。