【千锋教育jQuery开发实战】第3章 jQuery操作DOM

千锋教育

已认证帐号

内容分析

本章主要介绍查找DOM元素、操作DOM元素、DOM高级方法

教学目标

了解jQuery中的高级用法、掌握jQuery查找DOM节点的方法、掌握jQuery操作DOM节点的方法

教学内容

上一章中讲到的jQuery选择器（千锋教育jQuery开发实战】第2章 jQuery选择器详解）其实也可以算作是查找DOM元素的一种方式，除此之外，还有很多查找DOM元素的方法。

在学习查找DOM元素之前，先要搞清楚什么是子节点、父节点以及兄弟节点。在<html>元素中内嵌了<head>与<body>元素，所以<head>和<body>元素为<html>元素的子节点，<html>元素为<head>和<body>元素的父节点，因为<head>与<body>元素拥有共同的父元素节点，所以它们互为兄弟节点。

Ø 子节点查找

children(selector)

在jQuery中，children()方法返回被选元素的所有直接子节点。selector作为可选参数，值为字符串，表示包含匹配元素的选择器表达式。子节点查找的示例代码参考教材3.1.1节。

Ø 父节点查找

parent(selector)

在jQuery中，parent() 方法获得当前匹配元素集合中每个元素的父元素，selector作为可选参数，值为字符串，表示包含匹配元素的选择器表达式。父节点查找的示例代码参考教材3.1.2节。

parents(selector)

在jQuery中，parents()方法获得当前匹配元素集合中每个元素的祖先元素，selector作为可选参数，值为字符串，表示包含匹配元素的选择器表达式。祖先节点查找的示例代码参考教材3.1.2节。

offsetParent ()

在jQuery中，offsetParent() 方法获得有定位的最近祖先元素。有定位祖先节点查找的示例代码参考教材3.1.2节。

offsetparent()方法跟CSS中的absolute绝对定位用法类似，如果所有的祖先节点都没有定位方式，那么offsetparent()就会选中html标签。

Ø 兄弟节点查找

next(selector)、prev(selector)

在jQuery中，next()方法获得匹配元素集合中某个元素紧邻的兄弟元素。如果提供选择器，则取回匹配该选择器的下一个兄弟元素。prev() 方法获得匹配元素集合中某个元素紧邻的前一个兄弟元素。如果提供选择器，则取回匹配该选择器的前一个兄弟元素。兄弟节点查找的示例代码参考教材3.1.3节。

nextAll(selector)、prevAll(selector)

在jQuery中，nextAll() 方法获得匹配元素集合中某个元素后面的所有兄弟元素。如果提供选择器，则取回匹配该选择器的后面的所有兄弟元素。prevAll() 方法获得匹配元素集合中某个元素前面的所有兄弟元素。如果提供选择器，则取回匹配该选择器的前面的所有兄弟元素。兄弟节点查找的示例代码参考教材3.1.3节。

siblings(selector)

在jQuery中，siblings() 方法获得匹配集合中某个元素的所有兄弟元素。如果提供选择器，则取回匹配该选择器的所有兄弟元素。兄弟节点查找的示例代码参考教材3.1.3节。

Ø 创建节点

在原生JavaScript中创建一个节点是比较麻烦的，需要通过document.createElement()方法来实现。而在jQuery中创建一个节点是非常方便的，采用$()方法实现，代码如下所示。

 1 <script>
 2  $('<li>')       // 创建li标签