网页特效设计基础第4章-使用jQuery操作DOM.ppt

1、刘刚刘刚 主编主编新一代信息技术“十三五”系列规划教材 第第4 4章章 使用使用jQueryjQuery操作操作DOMDOM DOM 是文档对象模型，根据是文档对象模型，根据 W3C DOM 规范为文档提规范为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容供了一种结构化表示方法，通过该方法可以改变文档的内容和展示形式。在实际操作中，和展示形式。在实际操作中，DOM 更像是桥梁，通过它可更像是桥梁，通过它可以实现跨平台访问。本章我们将详细介绍如何使用以实现跨平台访问。本章我们将详细介绍如何使用 jQuery 操作操作DOM 中的元素或对象。中的元素或对象。4.1 DOM 4.1 DO

2、M 操作的分类操作的分类 通常来说，通常来说，DOM 操作分为操作分为 3 方面：方面：DOM Core、HTML-DOM 和和 CSS-DOM。1 1DOM Core DOM Core DOM Core（核心（核心 DOM）：它不专属于任何语言，）：它不专属于任何语言，它是一组标准的接口，任何一种支持它是一组标准的接口，任何一种支持 DOM 的程序语言的程序语言都可以使用它。都可以使用它。JavaScript 中的中的 getElementById()、getElementsByTag Name()、getAttribute()和和 setAttribute()等方法都是等方法都是 DOM

3、Core 的组成部分。的组成部分。例如：例如：（1）使用）使用 DOM Core 来获取表单对象的方法：来获取表单对象的方法：document.getElementsByTagName(form);（2）使用）使用 DOM Core 来获取元素的来获取元素的 title 属性：属性：element.getAttribute(title);2 2HTML-DOMHTML-DOM 在在 JavaScript JavaScript 中，有很多专属于中，有很多专属于 HTML-DOM HTML-DOM 的属的属性。如性。如 document.forms document.forms、element.s

4、rc element.src 等。等。例如：例如：（1 1）使用）使用 HTML-DOM HTML-DOM 来获取表单对象的方法：来获取表单对象的方法：document.forms;/HTML-DOMdocument.forms;/HTML-DOM当中提供了当中提供了formsforms对象对象 （2 2）使用）使用 HTML-DOM HTML-DOM 来获取元素的来获取元素的 title title 属性：属性：element.title;element.title;通过以上代码可以看出，通过以上代码可以看出，HTML-DOM HTML-DOM 代码通常比代码通常比 DOM DOM Core

5、 Core 简短，不过它只能用来处理简短，不过它只能用来处理 Web Web 文档。文档。3 3CSS-DOM CSS-DOM CSS-DOM CSS-DOM 是针对是针对 CSS CSS 的操作。在的操作。在 JavaScript JavaScript 中，中，CSS-DOM CSS-DOM 主要用于获取和设置主要用于获取和设置 style style 对象的属性。例对象的属性。例如：如：element.style.color=“#ADD8E6”;element.style.color=“#ADD8E6”;4.2 4.2 对元素内容和值进行操作对元素内容和值进行操作 jQuery jQuer

6、y 提供了对元素的内容和值进行操作的方法，提供了对元素的内容和值进行操作的方法，其中，元素的值是元素的一种属性，大部分元素的值都其中，元素的值是元素的一种属性，大部分元素的值都对应对应 value value 属性。属性。元素的内容是指定义元素的起始标记和结束标记中元素的内容是指定义元素的起始标记和结束标记中间的内容，又可分为文本内容和间的内容，又可分为文本内容和HTML HTML 内容。内容。测试内容测试内容 在这段代码中，在这段代码中，div div 元素的文本内容就是元素的文本内容就是“测试内容测试内容”，文本内容不包含元素的子元素，只包含元素的文本内容。而文本内容不包含元素的子元素，只

7、包含元素的文本内容。而“测试内容测试内容”就是就是元素的元素的 HTML HTML 内容，内容，HTML HTML 内容不仅包含元素的文本内容，而且还包含元素的子元素。内容不仅包含元素的文本内容，而且还包含元素的子元素。4.2.1 4.2.1 对元素内容进行操作对元素内容进行操作1 1用用 text()text()方法对文本内容的操作方法对文本内容的操作 jQuery jQuery 提供了提供了 text()text()和和 text(val)text(val)两个方法用两个方法用于对文本内容进行操作，其中于对文本内容进行操作，其中 text()text()用于获取全部匹用于获取全部匹配元素的

8、文本内容，配元素的文本内容，text(val)text(val)用于设置全部匹配元素用于设置全部匹配元素的文本内容。的文本内容。【例【例 4-1 4-1】设置设置 div div 元素的文本内容（实例位置：源元素的文本内容（实例位置：源码码 第第 4 4 章章4-14-1）。）。（1 1）创建一个名称为）创建一个名称为 index.html index.html 的文件，在该文件的文件，在该文件的的标记中应用下面的语句引入标记中应用下面的语句引入 jQuery jQuery 库。库。script type=text/javascript src=./js/jquery-3.3.1.min.js

9、（2 2）在页面的）在页面的标记中添加一个标记中添加一个元素，令它元素，令它的文本内容为空。代码如下：的文本内容为空。代码如下：（3 3）在引入）在引入 jQuery jQuery 库的代码下方编写库的代码下方编写 jQuery jQuery 代码，代码，实现为实现为标记设置文本内容。具体代码如下：标记设置文本内容。具体代码如下：$(document).ready(function()$(document).ready(function()$(div).text($(div).text(我是通过我是通过text()text()方法设置的文本内容方法设置的文本内容););););运行本实例，效果

10、如图运行本实例，效果如图 4-1 4-1 所示。所示。图图 4-1 设置设置 div 元素的文本内容元素的文本内容2 2用用 html()html()方法对方法对 HTML HTML 内容的操作内容的操作 jQuery jQuery 提供了提供了 html()html()和和 html(val)html(val)两个方法用两个方法用于对于对 HTML HTML 内容进行操作。其中内容进行操作。其中 html()html()用于获取第用于获取第 1 1 个匹配元素的个匹配元素的 HTML HTML 内容，内容，text(val)text(val)用于设置全部匹用于设置全部匹配元素的配元素的 HT

11、ML HTML 内容。例如，在一个内容。例如，在一个 HTML HTML 页面中，包页面中，包括下面括下面 3 3行代码：行代码：当前时间：当前时间：2018-09-09 2018-09-09 星期日星期日 13:20:10 13:20:10 要获取要获取 div div 元素的元素的 HTML HTML 内容，可以使用下面的内容，可以使用下面的代码：代码：alert($(div).html();alert($(div).html();得到的结果如图得到的结果如图 4-2 4-2 所示。所示。图图 4-2 获取到的获取到的 div 元素的元素的 HTML 内容内容 要重新设置要重新设置 div

12、 div 元素的元素的 HTML HTML 内容，可以使用下内容，可以使用下面的代码：面的代码：$(div).html($(div).html(我是通过我是通过html()html()方法设置的方法设置的HTMLHTML内容内容););这时，再应用这时，再应用“$(div).html();”“$(div).html();”获取获取 div div 元元素的素的 HTML HTML 内容时，将得到图内容时，将得到图 4-3 4-3 所示的内容。所示的内容。图图 4-3 重新设置重新设置 HTML 内容后获取到的结果内容后获取到的结果【例【例 4-2 4-2】获取和设置元素的文本内容与获取和设置元

13、素的文本内容与 HTML HTML 内容内容（实例位置：源码（实例位置：源码 第第 4 4 章章 4-2 4-2）。）。（1 1）创建一个名称为）创建一个名称为 index.html index.html 的文件，在该文件的的文件，在该文件的标记中应用下面的语句引入标记中应用下面的语句引入 jQuery jQuery 库。库。script type=text/javascript src=./js/jquery-3.3.1.min.js（2 2）在页面的）在页面的标记中添加两个标记中添加两个标记，这两标记，这两个个标记除了标记除了 id id 属性不同外，其他均相同。关键代属性不同外，其他均相

14、同。关键代码如下：码如下：应用应用text()text()方法设置的内容方法设置的内容 当前时间：当前时间：2018-09-09 2018-09-09 星期日星期日 13:20:10 13:20:10 应用应用html()html()方法设置的内容方法设置的内容 当前时间：当前时间：2018-09-09 2018-09-09 星期日星期日 13:20:10 13:20:10（3 3）在引入）在引入 jQuery jQuery 库的代码下方编写库的代码下方编写 jQuery jQuery 代码，代码，实现为实现为标记设置文本内容和标记设置文本内容和 HTML HTML 内容，并获取内容，并获取设

15、置后的文本内容和设置后的文本内容和 HTML HTML 内容。具体代码如下：内容。具体代码如下：$(document).ready(function()$(document).ready(function()$(#div1).text($(#div1).text(我是通过我是通过text()text()方法设置的方法设置的HTMLHTML内容内容););$(#div2).html($(#div2).html(我是通过我是通过html()html()方法设置的方法设置的HTMLHTML内容内容););alert(alert(通过通过text()text()方法获取：方法获取：rn+$(div).

16、text()+rnrn+$(div).text()+rn通过通过html()html()方法获取：方法获取：rn+$(div).html();rn+$(div).html();););运行本实例，将显示图运行本实例，将显示图 4-4 4-4 所示的运行结果。从所示的运行结果。从该运行结果可以看出，应用该运行结果可以看出，应用 text()text()设置文本内容时，设置文本内容时，即使内容中包含即使内容中包含 HTML HTML 代码，也将被认为是普通文本，代码，也将被认为是普通文本，并不能作为并不能作为 HTML HTML 代码被浏览器解析，而应用代码被浏览器解析，而应用 html()htm

17、l()设置的设置的 HTML HTML 内容中所包含的内容中所包含的 HTML HTML 代码可以被浏览器代码可以被浏览器解析。因此，文本解析。因此，文本“我是通过我是通过 html()html()方法设置的方法设置的 HTML HTML 内容内容”是红色的，而通过是红色的，而通过 text()text()方法设置的方法设置的 HTML HTML 文文本则是按照原样显示的。本则是按照原样显示的。图图 4-4 获取和设置元素的文本内容与获取和设置元素的文本内容与 HTML 内容内容4.2.2 4.2.2 对元素值进行操作对元素值进行操作 jQuery jQuery 提供了提供了 3 3 种对元素

18、值操作的方法，如表种对元素值操作的方法，如表 4-1 4-1 所示。所示。表表 4-1 对元素值进行操作的方法对元素值进行操作的方法【例【例 4-3 4-3】为多行列表框设置并获取值（实例位置：为多行列表框设置并获取值（实例位置：源码源码 第第 4 4 章章4-34-3）。）。（1 1）创建一个名称为）创建一个名称为 index.html index.html 的文件，在该文件的文件，在该文件的的标记中应用下面的语句引入标记中应用下面的语句引入 jQuery jQuery 库。库。script type=text/javascript src=./js/jquery-3.3.1.min.js（

19、2 2）在页面的）在页面的标记中添加一个包含标记中添加一个包含 3 3 个列表项个列表项的可多选的多行列表框，默认为后两项被选中。代码如的可多选的多行列表框，默认为后两项被选中。代码如下：下：select name=like size=3 multiple=multiple id=like 列表项列表项1 1 列表项列表项2 2 列表项列表项3 3（3 3）在引入）在引入 jQuery jQuery 库的代码下方编写库的代码下方编写 jQuery jQuery 代码，代码，应用应用 val()val()方法获取该多行列表框的值。具体代码如下：方法获取该多行列表框的值。具体代码如下：$(docu

20、ment).ready(function()$(document).ready(function()$(select).val($(select).val(列表项列表项1,1,列表项列表项2);2);alert($(select).val();alert($(select).val();););运行后将显示图运行后将显示图 4-5 4-5 所示的效果。所示的效果。图图 4-5 获取到的多行列表框的值获取到的多行列表框的值4.3 4.3 对对 DOM DOM 文档节点进行操作文档节点进行操作4.3.1 4.3.1 创建节点创建节点 在在 DOM DOM 操作中，常常需要动态创建操作中，常常需要动

21、态创建 HTML HTML 内容，内容，使文档在浏览器中的样式发生变化，从而达到各种交互使文档在浏览器中的样式发生变化，从而达到各种交互目的。创建节点分为目的。创建节点分为 3 3 种：创建元素节点、创建文本种：创建元素节点、创建文本节点和创建属性节点。节点和创建属性节点。1 1创建元素节点创建元素节点 例如，要创建两个例如，要创建两个元素节点，并且要把它们作元素节点，并且要把它们作为为元素节点的子节点添加到元素节点的子节点添加到 DOM DOM 节点树上，元素节点树上，元素节点如下所示：节点如下所示：完成这个任务需要两个步骤。完成这个任务需要两个步骤。（1 1）创建两个新的）创建两个新的元素

22、。元素。（2 2）将这两个新元素插入到文档中。）将这两个新元素插入到文档中。创建文本节点创建文本节点 两个两个元素节点已经创建完毕并插入到文档中了，元素节点已经创建完毕并插入到文档中了，此时需要为它们添加文本内容。代码结构如下所示。此时需要为它们添加文本内容。代码结构如下所示。莫凡魔方科技莫凡魔方科技 人邮图书人邮图书 具体的具体的 jQuery jQuery 代码如下：代码如下：var$p_1=$(var$p_1=$(莫凡魔方科技莫凡魔方科技);/);/创建第创建第1 1个个p p元素，元素，包含元素节点和文本节点，文本节点为包含元素节点和文本节点，文本节点为“明日科技明日科技”var$p_

23、2=$(var$p_2=$(莫凡图书莫凡图书);/);/创建第创建第2 2个个p p元素，包元素，包含元素节点和文本节点，文本节点为含元素节点和文本节点，文本节点为“明日图书明日图书”$(div).append($p_1);/$(div).append($p_1);/将第将第1 1个个p p元素添加到元素添加到divdiv中，使它中，使它能在页面中显示能在页面中显示$(div).append($p_2);/$(div).append($p_2);/将第将第2 2个个p p元素添加到元素添加到divdiv中，使它中，使它能在页面中显示能在页面中显示 创建文本节点就是在创建元素节点时直接把文本内创

24、建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用容写出来，然后使用 append()append()等方法将它们添加到文等方法将它们添加到文档中。运行代码后，新创建的档中。运行代码后，新创建的元素将被添加到页面元素将被添加到页面当中，如图当中，如图 4-6 4-6 所示。所示。图图 4-6 创建文本节点创建文本节点创建属性节点创建属性节点 创建属性节点与创建文本节点类似，也是直接在创创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建。代码结构如下所示：建元素节点时一起创建。代码结构如下所示：p title=莫凡魔方科技莫凡魔方科技 p title=莫凡图书莫凡图书 具

25、体具体 jQuery jQuery 代码如下：代码如下：var$p_1=$(p title=var$p_1=$(莫凡魔方科技莫凡魔方科技););/创建第创建第1 1个个p p元素，包含元素节点、文本节点和属性节点，其中元素，包含元素节点、文本节点和属性节点，其中“title=“title=莫凡魔方科技莫凡魔方科技”就是属性节点就是属性节点 var$p_2=$(p title=var$p_2=$(莫凡魔方科技莫凡魔方科技);/);/创建第创建第2 2个个p p元素，包含元素节点、文本节点和属性节元素，包含元素节点、文本节点和属性节点，其中点，其中“title=“title=莫凡魔方科技莫凡魔方科

26、技 就是属性节点就是属性节点$(div).append($p_1);/$(div).append($p_1);/将第将第1 1个个p p元素添加到元素添加到divdiv中，使它中，使它能在页面中显示能在页面中显示$(div).append($p_2);/$(div).append($p_2);/将第将第2 2个个p p元素添加到元素添加到divdiv中，使它中，使它能在页面中显示能在页面中显示 运行以上代码，将鼠标指针移至文字运行以上代码，将鼠标指针移至文字“莫凡魔方科莫凡魔方科技技”上，可以看到上，可以看到 title title 信息，效果如图信息，效果如图 4-7 4-7 所示。所示。图

27、图 4-7 创建属性节点创建属性节点4.3.2 4.3.2 查找节点查找节点 通过通过 jQuery jQuery 提供的选择器可以轻松实现查找页面中提供的选择器可以轻松实现查找页面中的任何节点。的任何节点。4.3.3 4.3.3 插入节点插入节点 在创建节点时，应用了在创建节点时，应用了 append()append()方法将定义的节点方法将定义的节点内容插入到指定的元素。实际上，该方法是用于插入节点内容插入到指定的元素。实际上，该方法是用于插入节点的方法。除了的方法。除了append()append()方法外，方法外，jQuery jQuery 还提供了几种插还提供了几种插入节点的方法。这

28、一节我们将详细介绍。在入节点的方法。这一节我们将详细介绍。在jQueryjQuery中，插中，插入节点可以分为在元素内部插入和在元素外部插入两种入节点可以分为在元素内部插入和在元素外部插入两种。1 1在元素内部插入在元素内部插入 在元素内部插入就是向一个元素中添加子元素和内在元素内部插入就是向一个元素中添加子元素和内容。容。jQuery jQuery 提供了表提供了表 4-2 4-2 所示的在元素内部插入的方所示的在元素内部插入的方法。法。表表 4-2 在元素内部插入的方法在元素内部插入的方法续表续表【例【例 4-4 4-4】向向元素插入节点（实例位置：源码元素插入节点（实例位置：源码 第第

29、4 4 章章4-44-4）。）。（1 1）创建一个名称为）创建一个名称为 index.html index.html 的文件，在该文件的文件，在该文件的的标记中应用下面的语句引入标记中应用下面的语句引入 jQuery jQuery 库。库。script type=text/javascript src=./js/jquery-3.3.1.min.js（2 2）在页面的）在页面的标记中添加一个空的标记中添加一个空的元素，元素，代码如下：代码如下：（3 3）在引入）在引入 jQuery jQuery 库的代码下方编写库的代码下方编写 jQuery jQuery 代码，代码，创建两个创建两个节点，分

30、别使用节点，分别使用 append()append()和和 appendTo()appendTo()方方法将这两个法将这两个节点插入到节点插入到元素中。具体代码如下：元素中。具体代码如下：$(document).ready(function()$(document).ready(function()var$p_1=$(var$p_1=$(莫凡图书莫凡图书);/);/创建第创建第1 1个个p p元素元素 var$p_2=$(jQueryvar$p_2=$(jQuery基础开发教程基础开发教程);/);/创建创建第第2 2个个p p元素，文本为空元素，文本为空$div=$(div);/$div=$

31、(div);/获取获取divdiv元素对象元素对象$div.append($p_1);/$div.append($p_1);/将第将第1 1个个p p元素添加到元素添加到divdiv中中$p_2.appendTo($div);/$p_2.appendTo($div);/将第将第2 2个个p p元素添加到元素添加到divdiv中中););运行后将显示图运行后将显示图 4-8 4-8 所示的效果。所示的效果。图图 4-8 向元素内插入节点向元素内插入节点2 2在元素外部插入在元素外部插入 在元素外部插入就是将要添加的内容添加到元素之在元素外部插入就是将要添加的内容添加到元素之前或元素之后。前或元素

32、之后。jQuery jQuery 提供了表提供了表 4-3 4-3 所示的在元素外所示的在元素外部插入的方法。部插入的方法。表表 4-3 在元素外部插入的方法在元素外部插入的方法4.3.4 4.3.4 删除、复制与替换节点删除、复制与替换节点 在页面上只执行插入和移动元素的操作是远远不够的，在在页面上只执行插入和移动元素的操作是远远不够的，在实际开发的过程中还经常需要删除、复制和替换相应的元素。实际开发的过程中还经常需要删除、复制和替换相应的元素。1 1删除节点删除节点 jQuery jQuery 提供了种删除节点的方法，分别是提供了种删除节点的方法，分别是 remove()remove()、

33、detach()detach()和和 empty()empty()方法。方法。p remove()remove()方法方法 remove()remove()方法用于从方法用于从 DOM DOM 中删除所有匹配的元素，中删除所有匹配的元素，传入的参数用于根据传入的参数用于根据 jQuery jQuery 表达式来筛选元素。表达式来筛选元素。当使用当使用 remove()remove()方法删除某个节点之后，该节点方法删除某个节点之后，该节点所包含的所有后代节点将同时被删除。所包含的所有后代节点将同时被删除。remove()remove()方法的方法的返回值是一个指向已被删除的节点的引用，以后也可

34、以返回值是一个指向已被删除的节点的引用，以后也可以继续使用这些元素。继续使用这些元素。p detach()detach()方法方法 detach()detach()方法和方法和 remove()remove()方法一样，也是删除方法一样，也是删除 DOM DOM 中匹配的元素。需要注意的是，这个方法不会把匹配的元中匹配的元素。需要注意的是，这个方法不会把匹配的元素从素从 jQuery jQuery 对象中删除，因此，在将来仍然可以使用这对象中删除，因此，在将来仍然可以使用这些匹配元素。与些匹配元素。与 remove remove 不同的是，所有绑定的事件或附不同的是，所有绑定的事件或附加的数据

35、都会保留下来。加的数据都会保留下来。p empty()empty()方法方法 严格地说，严格地说，empty()empty()方法并不是删除元素节点，而是方法并不是删除元素节点，而是将节点清空，该方法可以清空元素中所有的后代节点。将节点清空，该方法可以清空元素中所有的后代节点。2 2复制节点复制节点 jQuery jQuery 提供了提供了 clone()clone()方法用于复制节点，该方方法用于复制节点，该方法有两种形式，一种是不带参数，用于克隆匹配的法有两种形式，一种是不带参数，用于克隆匹配的 DOM DOM 元素并且选中这些克隆的副本；另一种是带有一个布尔元素并且选中这些克隆的副本；另

36、一种是带有一个布尔型的参数，当参数为型的参数，当参数为 true true 时，表示克隆匹配的元素以时，表示克隆匹配的元素以及其所有的事件处理并且选中这些克隆的副本，当参数及其所有的事件处理并且选中这些克隆的副本，当参数为为 false false 时，表示不复制元素的事件处理。时，表示不复制元素的事件处理。3 3替换节点替换节点 jQuery jQuery 提供了两个替换节点的方法，分别是提供了两个替换节点的方法，分别是 replaceAll(selector)replaceAll(selector)和和 replaceWith(content)replaceWith(content)。其中

37、，其中，replaceAll(selector)replaceAll(selector)方法用于使用匹配的元方法用于使用匹配的元素替换掉所有素替换掉所有 selector selector 匹配到的元素；匹配到的元素；replaceWith replaceWith(content)(content)方法用于将所有匹配的元素替换成指定的方法用于将所有匹配的元素替换成指定的 HTML HTML 或或 DOM DOM 元素。这两种方法的功能相同，只是两者元素。这两种方法的功能相同，只是两者的表现形式不同。的表现形式不同。4.3.5 4.3.5 包裹节点包裹节点 DOM DOM 文档为包裹节点提供了文

38、档为包裹节点提供了 4 4 个方法：个方法：wrap wrap 把所有把所有匹配的元素用其他元素的结构化标记包裹起来、匹配的元素用其他元素的结构化标记包裹起来、unwrapunwrap这这个方法将移出元素的父元素、个方法将移出元素的父元素、wrapAll wrapAll 将所有匹配的元素将所有匹配的元素用单个元素包裹起来、用单个元素包裹起来、wrapInner wrapInner 将每一个匹配的元素的将每一个匹配的元素的子内容（包括文本节点）用一个子内容（包括文本节点）用一个 HTML HTML 结构包裹起来，如结构包裹起来，如表表 4-4 4-4 所示。所示。表表 4-4 包裹元素节点的方法

39、包裹元素节点的方法4.3.6 4.3.6 遍历节点遍历节点 在操作在操作 DOM DOM 元素时，有时需要对同一标记的全部元元素时，有时需要对同一标记的全部元素进行统一的操作。在传统素进行统一的操作。在传统 JavaScript JavaScript 中，是首先获中，是首先获取元素的总长度，之后通过取元素的总长度，之后通过 for for 循环语句来访问其中的循环语句来访问其中的某个元素，书写的代码较多，相对比较复杂。在某个元素，书写的代码较多，相对比较复杂。在jQueryjQuery中，可以直接使用中，可以直接使用 each()each()方法来遍历元素，它的语法格方法来遍历元素，它的语法格

40、式为：式为：each(callback)each(callback)callback callback 是一个函数，该函数可以接受一个形参是一个函数，该函数可以接受一个形参 indexindex，这个形参是遍历元素的序号，序号从，这个形参是遍历元素的序号，序号从 0 0 开始。开始。如果要访问元素中的属性，可以借助形参如果要访问元素中的属性，可以借助形参 index index 配合配合 this this 关键字来实现元素属性的设置或获取。关键字来实现元素属性的设置或获取。4.4 4.4 对元素属性进行操作对元素属性进行操作 jQuery jQuery 提供了表提供了表 4-5 4-5 所示

41、的对元素属性进行操作所示的对元素属性进行操作的方法。在表的方法。在表 4-5 4-5 中所列的这些方法中，中所列的这些方法中，key key 和和 name name 都代表元素的属性名称，都代表元素的属性名称，properties properties 代表一个集合。代表一个集合。表表 4-5 对元素属性进行操作的方法对元素属性进行操作的方法4.5 4.5 对元素的对元素的 CSS CSS 样式进行操作样式进行操作 在在 jQuery jQuery 中，对元素中，对元素 CSS CSS 样式的操作可以通过修样式的操作可以通过修改改 CSS CSS 类或者类或者 CSS CSS 的属性来实现。

42、的属性来实现。4.5.1 4.5.1 通过修改通过修改 CSS CSS 类实现类实现 在网页中，如果想改变一个元素的整体效果，例如，在网页中，如果想改变一个元素的整体效果，例如，在实现网站换肤时，就可以通过修改该元素所使用的在实现网站换肤时，就可以通过修改该元素所使用的CSS CSS 类来实现。在类来实现。在 jQuery jQuery 中，提供了表中，提供了表 4-6 4-6 所示的几种用所示的几种用于修改于修改 CSS CSS 类的方法。类的方法。表表 4-6 修改修改 CSS 类的方法类的方法4.5.2 4.5.2 通过修改通过修改 CSS CSS 属性实现属性实现 如果需要获取或修改某

43、个元素的具体样式（即修改如果需要获取或修改某个元素的具体样式（即修改元素的元素的 style style 属性），属性），jQuery jQuery 也提供了相应的方法，也提供了相应的方法，如表如表4-7 4-7 所示。所示。表表 4-7 获取或修改获取或修改 CSS 属性的方法属性的方法续表续表4.6 4.6 综合实例：实现我的开心小农场综合实例：实现我的开心小农场 通过通过jQueryjQuery可以很方便地对可以很方便地对DOMDOM节点进行操作，下面节点进行操作，下面我们就通过我们就通过“我的开心小农场我的开心小农场”实例来说明通过实例来说明通过 jQuery jQuery 操作操作D

44、OMDOM节点的具体应用。本实例的需求主要有以下两点。节点的具体应用。本实例的需求主要有以下两点。（1 1）在页面中引入农场图片，单击）在页面中引入农场图片，单击“播种播种”“”“生长生长”“”“开开花花”“”“结果结果”按钮时，在农场中显示相应效果。按钮时，在农场中显示相应效果。（2 2）在）在 IE 6 IE 6 之前版本的浏览器下，之前版本的浏览器下，png png 格式图片有背格式图片有背景，将其处理为透明效果。景，将其处理为透明效果。运行本实例，将显示图运行本实例，将显示图 4-18 4-18 所示的效果；单击所示的效果；单击“播种播种”按钮，将显示图按钮，将显示图 4-19 4-1

45、9 所示的效果；单击所示的效果；单击“生生长长”按钮，将显示图按钮，将显示图 4-20 4-20 所示的效果；单击所示的效果；单击“开花开花”按钮，将显示图按钮，将显示图 4-21 4-21 所示的效果；单击所示的效果；单击“结果结果”按钮，按钮，将显示一棵结满果实的草莓秧。将显示一棵结满果实的草莓秧。图图 4-18 页面的默认运行结果页面的默认运行结果 图图 4-19 单击单击“播种播种”按钮的结果按钮的结果图图 4-20 单击单击“生长生长”按钮的结果按钮的结果 图图 4-21 单击单击“开花开花”按钮的结果按钮的结果 （1 1）DOM DOM 操作分为操作分为 DOM Core DOM

46、Core、HTML-DOM HTML-DOM 和和 CSS-DOM CSS-DOM。（2 2）创建节点分为创建元素节点、创建文本节点和创建属性）创建节点分为创建元素节点、创建文本节点和创建属性节点。节点。（3 3）在）在 jQuery jQuery 中，插入节点可以分为在元素内部插入和在中，插入节点可以分为在元素内部插入和在元素外部插入两种。元素外部插入两种。（4 4）jQuery jQuery 提供了提供了 3 3 种删除节点的方法，分别是种删除节点的方法，分别是 empty()empty()、remove()remove()和和 detach()detach()方法。方法。（5 5）jQu

47、ery jQuery 提供了提供了4 4种包裹节点相关的方法，分别是种包裹节点相关的方法，分别是wrap()wrap()、unwrap()unwrap()、wrap All()wrap All()、wrapInner wrapInner 方法。方法。（6 6）在）在 jQuery jQuery 中，可以直接使用中，可以直接使用 each()each()方法来遍历元素。方法来遍历元素。（7 7）对元素属性进行操作主要使用）对元素属性进行操作主要使用 attr()attr()和和 removeAttr()removeAttr()方法。方法。（8 8）修改）修改 CSS CSS 类使用的方法有类使用的方法有addClass()addClass()、removeClass()removeClass()、toggleClass()toggleClass()。（9 9）修改）修改 CSS CSS 属性使用的方法为属性使用的方法为 css()css()方方法。法。