Asp.net入门3-02使用jQuery-jQuery 入门

Posted 2020-08-12

下面的几小节将介绍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
语句，浏览器也将执行这些语句并做出相应的更改。