jquery DOM操作

水深无声 2023-03-04 03:27 16阅读 0赞

--------------------

### jquery DOM操作 ###

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**创建、插入节点**

**A.append(B)：对象B作为A的子节点**插入结尾

**B.apendTo(A)：对象B作为A的子节点**插入结尾

**A.prepend(B)：对象B作为A的子节点**插入开头

**B.prependTo(A)：对象B最为A的子节点**插入开头

**A.after(B)：对象B、A同级，**B插入A的后面

**B.insertAfter(A)：对象B、A同级，**B插入A的后面

**A.before(B)：对象B、A同级，**B插入A的前面

**B.insertAfter(A)：对象B、A同级，**B插入A的前面

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**删除节点**

**remove()：**直接将节点删除

**remove(param)：**删除匹配的节点

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**示例**

**点击按钮btn、bnt2后**

![20200801092754620.png][]

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**复制节点**

**A.clone().appendTo(B)：**将对象A复制，作为子节点插入到B中

**A.clone(true).appendTo(B)：**将对象A复制（含对象A事件），作为子节点插入到B中

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**替换节点**

**A.repliaceWith(B)：**B替换A

**B.replaceAll(A)：**B替换A

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**包裹节点**

**A.wrap("<b></b>")：**用标签b将A包裹（外层）

**A.wrapInner("<b></b>")：**标签b包裹A（内层）

**A.wrappAll("<b></b>")：**标签b将A全部包裹

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**示例**

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/jquery/jquery-3.5.1.min.js"></script>
    </head>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("#ul li").remove();
            });
    
            $("#btn2").click(function () {
                $("#ul2 li").remove("[title=apple]");
            });
    
            $("#btn3").click(function () {
                const li="<li title='purple'>purple</li>";
                const li2=$(li);
    
                $("#ul").append(li).append(li2);
            });
    
            $("#btn4").click(function () {
                $("#ul li").wrap("<b style='color: coral'></b>>")
            });
    
            $("#btn5").click(function () {
                $("#ul2 li").wrapInner("<b style='color: deeppink'></b>")
            });
    
            $("#btn6").click(function () {
                $("#ul3 li").wrapAll("<b style='color: orchid'></b>")
            })
        })
    </script>
    <body>
    <ul id="ul">
        <li title="apple">apple</li>
        <li title="orange">orange</li>
        <li title="banana">banana</li>
    </ul>
    
    <ul id="ul2">
        <li title="apple">苹果</li>
        <li title="orange">桔子</li>
        <li title="banana">香蕉</li>
    </ul>
    
    <ul id="ul3">
        <li title="apple">苹果</li>
        <li title="orange">桔子</li>
        <li title="purple">purple</li>
    </ul>
    <button th:id="btn">删除节点</button>
    <button th:id="btn2">删除节点2</button>
    
    <button th:id="btn3">添加节点</button>
    
    <button th:id="btn4">wrap</button>
    <button th:id="btn5">wrapInner</button>
    <button th:id="btn6">wrapAll</button>
    </body>
    </html>

**点击wrap、wrapInner、wrapAll**

![20200801095311946.png][]

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**属性操作**

**attr(name)：**查看name的属性值

**attr("name",value")：**设置name的属性

**attr(\{"name":"value","name2":"value2"\})：**设置多个属性

**removeAttr(name)：**删除属性name

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**样式操作：class属性设置**

**attr("class","value")：**设置样式

**attr("class","value value2")：**设置多个样式

**addClass("value")：**追加样式

**addClass("value value2")：**追加样式

**removeClass("value")：**删除样式

**removeClass("value value2")：**删除样式

**toggleClass("value")：**切换样式

**hasClass("value")：**是否含有样式

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**html、text、value操作**

**html()：**读取html

**html("value")：**设置html

**text()：**读取文本

**text("value")：**设置文本

**val()：**读取value

**val("value")：**设置value

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**遍历节点**

**children()：**元素的直接子元素（**不含子元素的子元素**）

**next()：**下一个同级元素

**prev()：**前一个同级元素

**siblings()：**所有同级元素

**colsest()：**从当前元素开始，**返回最先匹配的元素**

**parent()：**当前元素的父级元素

**parents()：**当前元素的祖先元素，**查找所有匹配的元素**

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**css-DOM 操作：设置style**

**css("name")：**查看name样式值，如 css("color")

**css("name","value")：**设置样式

**css(\{"name":"value","name2":"value2"\})：**设置样式

**height()：**查看元素在当前页面的实际高度

**height("value")：**设置元素高度

**width()：**查看元素在当前页面的实际宽度

**width("value")：**设置元素宽度，不同于css("width","value")

**css("height","value")：**设置样式的高度，可为auto，不同于height()

**css("width","value")：**设置样式的宽度，不同于width()

[20200801092754620.png]: /images/20230208/aeeba031ba3143e090b06fe1cd0b29a7.png
[20200801095311946.png]: /images/20230208/1184dbc744484228be36ee8d70331ae4.png