        After finding the required element , you can call the attr() method of the JQuery object to obtain various attribute values.

The attr() method can be used to set or return the attribute value of the selected element.

        $(selector).attr(attribute) - Returns the attribute value of the selected element;

        $(selector).attr(attribute,value) - Set the attribute value of the selected element.

removeAttr() - Removes the specified attribute from the specified element .

2. Example:

search.html code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search node</title>
    <script type="text/javascript" src="../../js/jquery-3.7.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button[id='button01']").click(function () {
                $("img").attr("src", "../../image/3.jpg");
                $("#button01").hide();
                $("#button02").show();
            });
            $("button[id='button02']").click(function () {
                $("img").attr("src", "../../image/4.jpg");
                $("#button02").hide();
                $("#button01").show();
            });
        });
    </script>
</head>
<body>
    <img src="../../image/4.jpg" height="200px"/> <br/>
    <button id="button01">点我将粉色矢车菊变成蓝色矢车菊</button>
    <button id="button02" hidden="hidden">点我将蓝色矢车菊变成粉色矢车菊</button>
</body>
</html>

The running effect is as follows: (GIF picture)

2. Create nodes

1. Introduction to creating nodes:

        (1) Use JQuery's factory function $() : $(HTML tag); to create a node , which will create a JQuery object based on the incoming HTML tag string and return it.

        (2) Dynamically created new element nodes will not be automatically added to the document, and you need to manually call methods to insert them into the document .

        (3) When creating a single element, pay attention to the closing tag and use standard XHTML format . eg: $("<p/>"); or $("<p></p>");.

        (4) Creating a text node means writing the text content directly when creating an element node; creating an attribute node is also created when creating an element node .

2.Internal insertion:

2.1 Introduction:

        The essence of the internal insertion method is to insert content into an element so that the inserted content becomes a child element or child node of the element . ( The method called is the JQuery object )

Commonly used methods are as follows -

(1) append(content): Append content to the internal end of each matching element (eg: A.append(B), which means inserting B at the internal end of A).

        (2) appendTo(content): Append each matched element to the internal end of the specified element (A.appendTo(B), refers to inserting A into the internal end of B).

        (3) prepend(content): Append content to the internal beginning of each matching element (eg: A.prepend(B), which means inserting B at the internal beginning of A).

        (4) prependTo(content): Append each matched element to the internal beginning of the specified element (A.prependTo(B), refers to inserting A into the internal beginning of B).

2.2 Examples

InnerSort.html code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部排序演示</title>
    <style>
        div {
            background-color: lightcyan;
            width: 350px;
            height: 170px;
            border: 2px pink solid;
        }

        #littleDiv {
            background-color: lightseagreen;
            width: 125px;
            height: 50px;
            border: 2px purple solid;
        }
    </style>
    <script type="text/javascript" src="../../js/jquery-3.7.0.min.js"></script>
    <script>
        $(function () {
            $("#but01").click(function () {
                var $div = $("<div id=\"littleDiv\">内部结尾处</div>");

                $("#div01").append($div);
            });

            $("#but02").click(function () {
                var $div = $("<div id=\"littleDiv\">内部开头处</div>");

                $("#div02").prepend($div);
            });

            $("#but03").click(function () {
                var $div = $("<div id=\"littleDiv\">内部开头处</div>");

                $div.prependTo($("#div01"));
            });

            $("#but04").click(function () {
                var $div = $("<div id=\"littleDiv\">内部结尾处</div>");

                $div.appendTo($("#div02"));
            });
        });
    </script>
</head>
<body>
<div id="div01">
    这是第一个div（注意添加元素时在我之上还是之下）
</div>
<br/><br/>
<div id="div02">
    这是第二个div（注意添加元素时在我之上还是之下）
</div>
<br/><br/>
<input type="button" id="but01" value="点我，向第一个div内部结尾处追加一个小div"/> <br/>
<input type="button" id="but02" value="点我，向第二个div内部开头处追加一个小div"/> <br/>
<input type="button" id="but03" value="点我，将一个小div追加到第一个div的内部开头处"/> <br/>
<input type="button" id="but04" value="点我，将一个小div追加到第二个div的内部结尾处"/>
</body>
</html>

Operation effect: (GIF picture below)

3. External insertion:

3.1 Introduction

        The essence of the external insertion method is to insert content outside the element so that the inserted content becomes a sibling node of the element . ( The method called is the JQuery object )

Commonly used methods are as follows -

(1) after(content): Insert content at the external end of each matching element (eg: A.after(B), which refers to inserting the B element after the A element, making B the subsequent sibling node of A) .

        (2) insertAfter(content): Insert each matched element to the outer end of the specified element . (eg: A.insertAfter(B), refers to inserting the A object after the B object)

        (3) before(content): Insert content at the beginning of the outside of each matching element (eg: A.before(B), which means inserting the B element before the A element, making B the former sibling node of A) .

        (4) insertBefore(content): Insert each matched element to the external beginning of the specified element (eg: A.insertBefore(B), which refers to inserting the A object in front of the B object).

3.2 Examples

OuterSort.html code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部排序演示</title>
    <script type="text/javascript" src="../../js/jquery-3.7.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#but01").click(function () {
                $("#rock").after("<li id=\"ka\">卡斯兰娜</li>");
            });

            $("#but02").click(function () {
                $("#rock").before("<li id=\"sha\">沙尼亚特</li>");
            });

            $("#but03").click(function () {
                var $li_jia = $("<li id=\"jia\">路人甲</li>");

                $li_jia.insertAfter($("#shit"));
            });

            $("#but04").click(function () {
                var $li_yi = $("<li id=\"yi\">路人乙</li>");

                $li_yi.insertBefore($("#shit"));
            });
        })
    </script>
</head>
<body id="character">
<ul>
    <li id="wind" name="Barbatos">巴巴托斯</li>
    <li id="rock" name="Zhongli">摩拉克斯</li>
    <li id="light" name="Bool">巴尔</li>
    <li id="shit" name="Auto">阿波卡利斯</li>
</ul>
<button id="but01">点我，在摩拉克斯后面增加卡斯兰娜</button>
<br/><br/>
<button id="but02">点我，在摩拉克斯前面增加沙尼亚特</button>
<br/><br/>
<button id="but03">点我，将路人甲插入到阿波卡利斯之后</button>
<br/><br/>
<button id="but04">点我，将路人乙插入到阿波卡利斯之前</button>
</body>
</html>

Operation effect (GIF picture)

3. Other related operations of nodes

1. Delete nodes:

(1) remove() - removes all matching elements from the DOM tree. The parameters passed in are used to filter elements based on JQuery expressions . When a node is deleted using the remove() method, the node contains All descendant nodes will also be deleted at the same time, and the return value of this method is a reference pointing to the deleted node.

(2) empty() - Empty the current node, which means emptying all descendant nodes in the element (excluding attribute nodes) while the current element itself still exists.

2. Copy node:

(1) clone() - Clone the matching DOM element. The return value is the cloned copy, but the new node copied at this time has no behavior (no cloning event).

(2) empty() - Copies the element and also copies the events in the element .

3. Replace node:

(1) replaceWith() - Replace all matching elements with the specified HTML element or JQuery object (eg: A.replaceWith(B), which means, replace all A with B).

(2) replaceAll() - The effect is opposite to replaceWith .

PS: If an event has been bound to the replaced element, then after the element is replaced, its originally bound event will disappear together with the original element . If the element used for replacement is bound to an event, the new event will take effect after replacement .

4. Traverse nodes:

Commonly used methods for traversing nodes——

        (1) children() - Getsa collection of all child elements of the matching element. (Only child elements are considered, not other descendant elements).

(2) next() / nextAll() - Get the set of sibling elements following the matching element (get one or all ).

        (3) prev() / prevAll() - Get the set of sibling elements in front of the matching element (get one or all ).

(4) siblings() - Get the set of all sibling elements before and after the matching element .

        (5) nextAll().eq(index) - Get the specified element.

(6) nextAll().filter("tag") - Filter the obtained sibling elements .

JavaWeb JQuery operation node

1. Find nodes

1 Introduction: