jquery DOM操作-蒲公英云

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)：删除匹配的节点

***************

示例

<!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]");
        })
    })
</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>
<button th:id="btn">删除节点</button>
<button th:id="btn2">删除节点2</button>
</body>
</html>

点击按钮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将A包裹（外层）

A.wrapInner(““)：标签b包裹A（内层）

A.wrappAll(““)：标签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()