JavaScript+Jquery+ES6入门到放弃之jQuery操作DOM

博主： Arvin
发布时间：2022 年 09 月 06 日
1428 次浏览
暂无评论
10275字数
分类： JavaScript

## DOM概述

**DOM操作分为三类**

*DOM Core：* 任何一种支持DOM的编程语言都可以使用它

* `getElementById()`
* `getElementsByTagName()`

*HTML-DOM*：用于处理HTML文档

* `document.forms`
* `document.getElementById("title").innerHTML`

*CSS-DOM：* 用于操作CSS

* `element.style.color="green"`

## 节点操作

### 创建节点

工厂函数 $() 可用于获取或创建节点：

`$(selector)`：通过选择器获取节点

`$(element)`：把DOM节点转化成jQuery节点

`$(html)`：使用HTML字符串创建jQuery节点

**演示案例：**

```javascript
$(function () {
    // 创建节点
    var li1 = $("<li>大头儿子</li>");
    var li2 = $("<li>小魔仙</li>");
})
```

### 插入节点

**常见方法：**

| 语法（内部插入，子节点）         | 功能                                                             |
| ---------------------------------- | ------------------------------------------------------------------ |
| `$(parentNode).append(content)`  | 表示将`content`(jQuery节点对象)添加到 `parentNode`之中，**末尾** |
| `content.appendTo($(target))`    | 表示把`content`(jQuery节点对象)添加到 `target`中，**末尾**       |
| `$(parentNode).prepend(content)` | 表示将`content`(jQuery节点对象)添加到 `parentNode`之中，**开头** |
| `content.preappendTo($(target))` | 表示把`content`(jQuery节点对象)添加到 `target`中，**开头**       |

**案例演示：**

```html
<ul id="about">
    <li>关于我们</li>
    <li>联系我们</li>
    <li>我的邮箱：arvin@git-x.cn</li>
</ul>

**演示效果：**

![image.png](https://www.jbea.cn/usr/uploads/2022/09/1886051206.png)

| 语法（外部插入，同辈节点）        | 功能                                                   |
| ----------------------------------- | -------------------------------------------------------- |
| `$(parentNode).after(content)`    | 表示将`content`(jQuery节点对象)添加到 `parentNode`之后 |
| `content.insertAfter($(target))`  | 表示把`content`(jQuery节点对象)追加到 `target`之后     |
| `$(parentNode).before(content)`   | 表示将`content`(jQuery节点对象)添加到 `parentNode`之前 |
| `content.insertBefore($(target))` | 表示把`content`(jQuery节点对象)追加到 `target`之前     |

**演示案例：**

```html
<ul id="about">
    <li>关于我们</li>
    <li>联系我们</li>
    <li>我的邮箱：arvin@git-x.cn</li>
</ul>

//方式1
        $about.before($h1);  //将青鸟技术栈添加到ul之前
        $about.after($h2)    //将在线考试网天机道ul之后

//方式2  实现效果于方式1一致
        $h1.insertBefore($about)
        $h2.insertAfter($about)
    })
</script>
```

**演示效果：**

![image.png](https://www.jbea.cn/usr/uploads/2022/09/61642103.png)

### 删除节点

删除被选元素（及其子元素）：`$(selector).remove([selector]);`

删除 class="italic" 的所有 <p> 元素可以写成：`$("p").remove(".italic");`
</div>

删除被选元素（及其子元素）*[保留元素的事件、数据]*：`$(selector).detach([selector]);`

从被选元素中删除子元素：`$(selector).empty();`

### 复制节点

`clone()`方法生成被选元素的副本，包含子节点、文本和属性。

**语法：**`$(selector).clone(true|false)`

**参数说明：**是否复制元素的事件和数据，默认为 false

```html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
</head>

<body>
    <p>单击段落增加文本的大小。</p>
    <p>这是另一个段落。</p>
    <button>复制第一个p元素(包括事件处理程序),并附加到body元素中</button>

</html>
```

### 替换节点

#### replaceWith()

`replaceWith()` 方法把被选元素替换为新的内容。

**语法结构：**`$(selector).replaceWith(content[,function(index)])`

**参数解释：**

content	必需。规定要插入的内容（可包含 HTML 标签）。

function(index)	可选。规定返回替换内容的函数。

#### replaceAll()

`replaceAll()` 方法把被选元素替换为新的 HTML 元素。 【与 `replaceWith()`作用一致，参数不一致】

**语法结构：**`$(content).replaceAll(selector)`

**参数解释：**

*content	*必需。规定要插入的内容（可包含 HTML 标签）。

**演示案例：**

```html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
</head>

<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <p>这是另一个段落。</p>
    <button>替换每个P元素</button>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").replaceWith(function (n) {
                    return "<div>这个元素的下标是 " + n + ".</div>";
                });
            });
        });
    </script>
</body>

</html>
```

## 节点属性操作

### 获取和设置元素属性

`attr() `方法设置或返回被选元素的属性和值。

当该方法用于**返回**属性值，则返回第一个匹配元素的值。

当该方法用于**设置**属性值，则为匹配元素设置一个或多个属性/值对。

**语法结构：**

返回属性的值：`$(selector).attr(attribute)`

设置属性和值：`$(selector).attr(attribute,value)`

设置多个属性和值：`$(selector).attr({attribute:value, attribute:value,...})`

### 删除元素属性

`removeAttr()` 方法从被选元素移除一个或多个属性。

**语法结构：**`$(selector).removeAttr(attribute)`

**参数解释：***attribute*	必需。规定要移除的一个或多个属性。如需移除若干个属性，请使用*空格*分隔属性名称。

## 节点遍历

### 遍历子元素

**概述：** `children()` 方法返回被选元素的所有直接子元素。

⚠**注意：**

1️⃣该方法只沿着 DOM 树向下遍历单一层级。如需向下遍历多个层级（返回子孙节点或其他后代），请使用 [find()](https://www.runoob.com/jquery/traversing-find.html) 方法。

2️⃣如需沿着 DOM 树向上遍历单一层级，或向上遍历直至文档根元素的所有路径（返回父节点或其他祖先），请使用 [parent()](https://www.runoob.com/jquery/traversing-parent.html) 或 [parents()](https://www.runoob.com/jquery/traversing-parents.html) 方法。

3️⃣该方法不会返回文本节点。如需返回包含文本节点的所有子节点，请使用 [contents()](https://www.runoob.com/jquery/traversing-contents.html) 方法。

</div>

**语法结构：**`$(selector).children(filter)`

**参数解释：**

*filter*   可选。规定缩小搜索子元素范围的选择器表达式。

**演示案例：**

```html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("ul").children("li.one").css({
                "color": "red",
                "border": "2px solid red"
            });
        });
    </script>
    <style>
        .descendants * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>

<body class="descendants">body (曾祖先节点)
    <div style="width:500px;">div (祖先节点)
        <ul>ul (直接父节点)
            <li class="one">li (子节点)
                <span>span (孙节点)</span>
            </li>
            <li class="true">li (子节点)
                <span>span (孙节点)</span>
            </li>
        </ul>
    </div>
</body>

</html>
```

### 遍历同辈元素

**方法列表：**

| 语法                    | 功能                                                                |
| ------------------------- | --------------------------------------------------------------------- |
| next(  [selector] )     | 获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange"); |
| prev(  [selector] )     | 获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange"); |
| slibings(  [selector] ) | 获取匹配元素的同辈元素 $("li:eq(1)").siblings().addClass("orange"); |

### 遍历前辈元素

`parent( [selector] )`：获取匹配元素的父级元素，可选参数selector对父元素进行过滤

`parents ( [selector] )`：获取匹配元素的祖先元素，可选参数selector对祖先元素进行过滤

### 其他遍历方法

`each()`方法规定对每个匹配元素执行的函数

**语法结构：**

```javascript
$(selector).each(function (index, element) {
    //xx
 });
```

⚠**注意：**

参数index表示当前元素的下标，从0开始

参数element表示当前元素，也可在函数中使用this表示

当function函数返回false时可以停止循环

</div>

## 内容操作

### 操作HTML代码

**概述：**设置和获取元素中的HTML内容可以使用 `html()`方法，类似于JS中的 `innerHTML`属性

**语法：**`$(selector).html([content]);`

### 操作元素内容

**概述：** 获取或设置元素的文本内容可以使用 `text()`方法

**语法：**`$(selector).text([content]); `

**html()方法与text()方法的比较：**

| 是否存有参数 | 方法            | 功能描述                               |
| -------------- | ----------------- | ---------------------------------------- |
| 无参数       | html()          | 获取第一个匹配元素的HTML内容或文本内容 |
| 无参数       | text()          | 获取所有匹配元素的文本内容             |
| 有参数       | html( content ) | 设置所有匹配元素的HTML内容或文本内容   |
| 有参数       | text( content） | 设置所有匹配元素的文本内容             |

### 操作元素的属性值

**添加行内样式：**

**概述：**设置或获取指定元素的样式值可以使用 `css()`方法

**语法：**

```javascript
// 获取样式值
$(selector).css("属性");
$(selector).css(["属性1", "属性2", ... ]);
// 设置样式值
$(selector).css("属性", "属性值");
$(selector).css({
    "属性1": "属性值1",
    "属性2": "属性值2", ... });
```

**添加类样式：**

**概述：**`addClass() `方法向被选元素添加一个或多个类名。`removeClass()` 方法从被选元素移除一个或多个类。

**语法：**

```javascript
// 添加样式
$(selector).addClass("classname");
$(selector).addClass("classname1 classname2  …");
$(selector).addClass(["classname1", "classname2", ... ]);

// 移除样式
$(selector).removeClass("classname");
$(selector).removeClass("classname1 classname2  …");
$(selector).removeClass(["classname1", "classname2", ... ]);
$(selector).removeClass();  //移除全部
```

**样式切换：**

**概述：**`toggleClass()` 方法对添加和移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

**案例演示：**

```javascript
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

</head>

<body>
    <p>这是一个段落。</p>
    <p class="main">这是另一个段落。</p>
    <button>转换P元素的"main"类</button>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").toggleClass("main");
            });
        });
    </script>
</body>

</html>
```

**样式存在判断：**

**概述：**`hasClass()` 方法检查被选元素是否包含指定的类名称。

如果被选元素包含指定的类，该方法返回 "true"。

**语法：**`$(selector).hasClass(classname)`

**扩展：**

除 `css()`方法外，jQuery还提供有获取和设置元素高度、宽度等样式的操作方法

| 语法                   | 功能                                                                                                |
| ------------------------ | ----------------------------------------------------------------------------------------------------- |
| height([value])        | 设置或返回匹配元素的高度                                                                            |
| width([value])         | 设置或返回匹配元素的宽度                                                                            |
| offset([value])        | 返回以像素为单位的top和left坐标。仅对可见元素有效                                                   |
| offsetParent( )        | 返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素 |
| position(  )           | 返回第一个匹配元素相对于父元素的位置                                                                |
| scrollLeft([position]) | 参数可选。设置或返回匹配元素相对滚动条左侧的偏移                                                    |
| scrollTop([position])  | 参数可选。设置或返回匹配元素相对滚动条顶                                                            |

---

▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之jQuery事件与动画](https://jbea.cn/archives/572.html)

</div>

最后修改：2023 年 04 月 13 日

都滑到这里了，不点赞再走！？

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

JavaScript+Jquery+ES6入门到放弃之jQuery操作DOM

Arvin • 2022 年 09 月 06 日

## DOM概述

**DOM操作分为三类**

*DOM Core：* 任何一种支持DOM的编程语言都可以使用它

* `getElementById()`
* `getElementsByTagName()`

*HTML-DOM*：用于处理HTML文档

* `document.forms`
* `document.getElementById("title").innerHTML`

*CSS-DOM：* 用于操作CSS

* `element.style.color="green"`

## 节点操作

### 创建节点

工厂函数 $() 可用于获取或创建节点：

`$(selector)`：通过选择器获取节点

`$(element)`：把DOM节点转化成jQuery节点

`$(html)`：使用HTML字符串创建jQuery节点

**演示案例：**

```javascript
$(function () {
    // 创建节点
    var li1 = $("<li>大头儿子</li>");
    var li2 = $("<li>小魔仙</li>");
})
```

### 插入节点

**常见方法：**

**案例演示：**

```html
<ul id="about">
    <li>关于我们</li>
    <li>联系我们</li>
    <li>我的邮箱：arvin@git-x.cn</li>
</ul>

**演示效果：**

![image.png](https://www.jbea.cn/usr/uploads/2022/09/1886051206.png)

**演示案例：**

```html
<ul id="about">
    <li>关于我们</li>
    <li>联系我们</li>
    <li>我的邮箱：arvin@git-x.cn</li>
</ul>

//方式1
        $about.before($h1);  //将青鸟技术栈添加到ul之前
        $about.after($h2)    //将在线考试网天机道ul之后

//方式2  实现效果于方式1一致
        $h1.insertBefore($about)
        $h2.insertAfter($about)
    })
</script>
```

**演示效果：**

![image.png](https://www.jbea.cn/usr/uploads/2022/09/61642103.png)

### 删除节点

删除被选元素（及其子元素）：`$(selector).remove([selector]);`

删除 class="italic" 的所有 <p> 元素可以写成：`$("p").remove(".italic");`
</div>

删除被选元素（及其子元素）*[保留元素的事件、数据]*：`$(selector).detach([selector]);`

从被选元素中删除子元素：`$(selector).empty();`

### 复制节点

`clone()`方法生成被选元素的副本，包含子节点、文本和属性。

**语法：**`$(selector).clone(true|false)`

**参数说明：**是否复制元素的事件和数据，默认为 false

```html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
</head>

<body>
    <p>单击段落增加文本的大小。</p>
    <p>这是另一个段落。</p>
    <button>复制第一个p元素(包括事件处理程序),并附加到body元素中</button>

</html>
```

### 替换节点

#### replaceWith()

`replaceWith()` 方法把被选元素替换为新的内容。

**语法结构：**`$(selector).replaceWith(content[,function(index)])`

**参数解释：**

content	必需。规定要插入的内容（可包含 HTML 标签）。

function(index)	可选。规定返回替换内容的函数。

#### replaceAll()

`replaceAll()` 方法把被选元素替换为新的 HTML 元素。 【与 `replaceWith()`作用一致，参数不一致】

**语法结构：**`$(content).replaceAll(selector)`

**参数解释：**

*content	*必需。规定要插入的内容（可包含 HTML 标签）。

**演示案例：**

```html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
</head>

</html>
```

## 节点属性操作

### 获取和设置元素属性

`attr() `方法设置或返回被选元素的属性和值。

当该方法用于**返回**属性值，则返回第一个匹配元素的值。

当该方法用于**设置**属性值，则为匹配元素设置一个或多个属性/值对。

**语法结构：**

返回属性的值：`$(selector).attr(attribute)`

设置属性和值：`$(selector).attr(attribute,value)`

设置多个属性和值：`$(selector).attr({attribute:value, attribute:value,...})`

### 删除元素属性

`removeAttr()` 方法从被选元素移除一个或多个属性。

**语法结构：**`$(selector).removeAttr(attribute)`

**参数解释：***attribute*	必需。规定要移除的一个或多个属性。如需移除若干个属性，请使用*空格*分隔属性名称。

## 节点遍历

### 遍历子元素

**概述：** `children()` 方法返回被选元素的所有直接子元素。

⚠**注意：**

3️⃣该方法不会返回文本节点。如需返回包含文本节点的所有子节点，请使用 [contents()](https://www.runoob.com/jquery/traversing-contents.html) 方法。

</div>

**语法结构：**`$(selector).children(filter)`

**参数解释：**

*filter*   可选。规定缩小搜索子元素范围的选择器表达式。

**演示案例：**

```html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

</html>
```

### 遍历同辈元素

**方法列表：**

### 遍历前辈元素

`parent( [selector] )`：获取匹配元素的父级元素，可选参数selector对父元素进行过滤

`parents ( [selector] )`：获取匹配元素的祖先元素，可选参数selector对祖先元素进行过滤

### 其他遍历方法

`each()`方法规定对每个匹配元素执行的函数

**语法结构：**

```javascript
$(selector).each(function (index, element) {
    //xx
 });
```

⚠**注意：**

参数index表示当前元素的下标，从0开始

参数element表示当前元素，也可在函数中使用this表示

当function函数返回false时可以停止循环

</div>

## 内容操作

### 操作HTML代码

**概述：**设置和获取元素中的HTML内容可以使用 `html()`方法，类似于JS中的 `innerHTML`属性

**语法：**`$(selector).html([content]);`

### 操作元素内容

**概述：** 获取或设置元素的文本内容可以使用 `text()`方法

**语法：**`$(selector).text([content]); `

**html()方法与text()方法的比较：**

### 操作元素的属性值

**添加行内样式：**

**概述：**设置或获取指定元素的样式值可以使用 `css()`方法

**语法：**

**添加类样式：**

**概述：**`addClass() `方法向被选元素添加一个或多个类名。`removeClass()` 方法从被选元素移除一个或多个类。

**语法：**

```javascript
// 添加样式
$(selector).addClass("classname");
$(selector).addClass("classname1 classname2  …");
$(selector).addClass(["classname1", "classname2", ... ]);

**样式切换：**

**概述：**`toggleClass()` 方法对添加和移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

**案例演示：**

```javascript
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

</head>

</html>
```

**样式存在判断：**

**概述：**`hasClass()` 方法检查被选元素是否包含指定的类名称。

如果被选元素包含指定的类，该方法返回 "true"。

**语法：**`$(selector).hasClass(classname)`

**扩展：**

除 `css()`方法外，jQuery还提供有获取和设置元素高度、宽度等样式的操作方法

---

▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之jQuery事件与动画](https://jbea.cn/archives/572.html)

</div>

JavaScript+Jquery+ES6入门到放弃之jQuery操作DOM

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Java基础之JDK的安装

开启Visual Studio Code编写jQuery语法提示

C#-WinForms实现手写板

使用GSAP实现滚动条交互动画

HTML从入门到精通 - 初识HTML

来自胡福厚同学的项目总结

来自肖嘉乐同学的项目总结

AxWindowsMediaPlayer (Windows Media Play)控件的常用属性、方法及事件

Cocos creator js 笔记

来自欧明鑫同学的项目总结

JavaScript+Jquery+ES6入门到放弃之jQuery操作DOM

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

JavaScript+Jquery+ES6入门到放弃之jQuery操作DOM

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款