第3章 jQuery操作DOM-【千锋教育】Jquery从入门到实战

第3章 jQuery操作DOM 查找DOM元素 操作DOM元素 DOM高级方法 查找DOM元素 操作DOM元素 ☞点击查看本小节知识架构 DOM高级方法 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 3.2 3.3 3.1 学习目标 了解 掌握 掌握 掌握 了解jQuery中DOM的高级用法 1 掌握查找DOM元素 4 2 掌握jQuery查找DOM节点的方法 3 掌握jQuery操作DOM节点的方法 销售额 掌握知识 理解知识 熟悉知识 了解知识 2.5 2.5 2.5 2.5 DOM是W3C（World Wide Web Consortium，万维网联盟）推荐的处理可扩展标志语言的标准编程接口。在网页上，用一个树形结构来表示文档中对象的标准模型就称为DOM。 DOM可被JavaScript用来读取、改变 HTML（HyperText Markup Language，超文本标记语言）、XHTML（eXtensible HyperText Markup Language，可扩展超文本标记语言） 以及 XML（eXtensible Markup Language，可扩展标记语言） 文档，可以添加、移除、改变或重排页面上的项目。原生JavaScript操作DOM存在很多兼容性问题，jQuery解决了这些问题，使用统一的方法进行操作。原生JavaScript操作DOM的能力有限，很多方法需要自己去实现，jQuery提供了大量实用的DOM方法，让开发变得简单高效。 在DOM结构中，一个网页可以映射成一个节点层次树状图结构，页面元素如下所示。 以上代码中，文档中的每个标记都可以用 DOM 树结构中的一个节点来表示，HTML 元素用元素节点（如a、h1元素）表示，元素的属性通过属性节点（如超级链接的 href 属性）表示，文本内容用文本节点（如h1 元素内部文本“我的标题”）表示。 网页映射的节点层次树状图结构如图所示。 3.1 查找DOM元素 3.1.1 子节点查找 返回目录 3.1.2 父节点查找 3.1.3 兄弟节点查找 3.1 查找DOM元素 上一章中讲到的jQuery选择器其实也可以算作查找DOM元素的一种方式，除此之外，还有很多查找DOM元素的方法。 在学习查找DOM元素之前，先要搞清楚什么是子节点、父节点以及兄弟节点。在<html>元素中内嵌了<head>与<body>元素，所以<head>和<body>元素为<html>元素的子节点，<html>元素为<head>和<body>元素的父节点，因为<head>与<body>元素拥有共同的父节点，所以它们互为兄弟节点。 children(selector) 在jQuery中，children() 方法返回被选元素的所有直接子节点。selector作为可选参数，值为字符串，表示包含匹配元素的选择器表达式。子节点查找的示例代码如下所示。 3.1.1 子节点查找 3.1 查找DOM元素 parent(selector) 在jQuery中，parent() 方法获得当前匹配元素集合中每个元素的父元素，selector作为可选参数，值为字符串，表示包含匹配元素的选择器表达式。父节点查找的示例代码如下所示。 3.1.2 父节点查找 3.1 查找DOM元素 parents(selector) 在jQuery中，parents()方法获得当前匹配元素集合中每个元素的祖先元素，selector作为可选参数，值为字符串，表示包含匹配元素的选择器表达式。祖先节点查找的示例代码如下所示。 3.1.2 父节点查找 3.1 查找DOM元素 offsetParent () 在jQuery中，offsetParent() 方法获得有定位的最近祖先元素。有定位祖先节点查找的示例代码如下所示。 3.1.2 父节点查找 offsetparent()方法跟CSS中的absolute绝对定位用法类似，如果所有的祖先节点都没有定位方式，那么offsetparent()就会选中html标签。 3.1 查找DOM元素 next(selector)、prev(selector) 在jQuery中，next() 方法获得匹配元素集合中某个元素紧邻的兄弟元素。如果提供选择器，则取回匹配该选择器的下一个兄弟元素。prev() 方法获得匹配元素集合中某个元素紧邻的前一个兄弟元素。如果提供选择器，则取回匹配该选择器的前一个兄弟元素。兄弟节点查找的示例代码如下。 3.1.3 兄弟节点查找 3.1 查找DOM元素 下面是带有筛选条件的查找示例代码。 3.1.3 兄弟节点查找 在以上代码的运行结果中，div标签添加了红色的边框，而p标签则没有添加红色边框，因为p标签不满足筛选的条件。 3.1 查找DOM元素 nextAll(se