Super detailed jQuery DOM operation, one article is enough!

summary: today to share with you the related technology of DOM operation in the jQuery framework. It is another series of explanations called DOM "family bucket". It is recommended to collect and study carefully!

This article is shared from HUAWEI CLOUD COMMUNITY " [JQuery framework] Ultra-detailed DOM operation. Just look at this article! ", the original author: Gray Little Ape.

Today, I will share with you the related technology of DOM operation in the jQuery framework. is another series of explanations called DOM "family bucket". It is recommended to collect and study carefully!

1. Content operation

When performing content operations, use the same function for setting and obtaining the content of an element. When setting the content of an element, you can directly pass in the parameters in the function.

1. html()

role: get/set the tag body content of the element

// 获取mydiv的标签体内容
var divValue = $("#mydiv").html()

// 设置mydiv的标签体内容
var divValue = $("#mydiv").html(“你好”)

2. text()

function: get/set the plain text content of the label body of the element

// 获取mydiv文本内容
var divText = $("#mydiv").text()

// 设置mydiv文本内容
var divText = $("#mydiv").text(“你好”)

3. val()

role: get/set the value attribute value of the element

// 获取myinput 的value值
var value = $("#myinput").val()

// 设置myinput 的value值
var value = $("#myinput").val(“你好”)

The actual demonstration of the above code is as follows:

<!DOCTYPE html>
<html>
        <head>
               <meta charset="UTF-8">
               <title></title>
               <script  src="../js/jquery-3.3.1.min.js"></script>
               <script>
                       
                       $(function (){
                               // 获取myinput 的value值
                               var value = $("#myinput").val()
                               // alert(value);

                               // 获取mydiv的标签体内容
                               var divValue = $("#mydiv").html()
                               alert(divValue);

                               // 获取mydiv文本内容
                               var divText = $("#mydiv").text()
                               // alert(divText)
                       });
               </script>
               
        </head>
        <body>
               <input id="myinput" type="text" name="username" value="张三" /><br />
               <div id="mydiv"><p><a href="#">标题标签</a></p></div>
        </body>
</html>

Two, attribute operation

(1) General attribute operation

1. attr():

role: get/set the attributes of the element

//获取北京节点的name属性值
var bj = $("#bj").attr("name");
alert(bj);
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name", "dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription", "didu");
//删除北京节点的name属性并检验name属性是否存在

2. removeAttr()

role: delete attribute

//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");

3. prop()

role: get/set the attributes of the element

//获得hobby的的选中状态
var hobby_type = $("#hobby").prop("checkbox");

4. removeProp()

role: delete attribute

//删除hobby的CheckBox属性
var hobby_type = $("#hobby").removeProp("checkbox");

5. The difference between attr and prop

If the operation is the inherent properties of the element, it is recommended to use prop
If you are operating on element-defined attributes, it is recommended to use attr

(2) Operate the class attribute

1. addClass()

role: add class attribute value

//<input type="button" value=" addClass"  id="b2"/>
//给one标签增加属性
$("#b2").click(function () {
   $("#one").addClass("second");
});

2. removeClass()

role: delete the class attribute value //<input type=

//<input type="button" value="removeClass"  id="b3"/>
//删除one标签的class属性
$("#b3").click(function () {
    $("#one").removeClass("second");
});

3. toggleClass()

role: switch class attribute

//<input type="button" value=" 切换样式"  id="b4"/>
//为one标签的class样式进行切换，有class属性就删除，没有就添加
$("#b4").click(function () {
   $("#one").toggleClass("second");
});

Here is a detailed introduction to the function:

Such as toggleClass("one"):

Determine if class="one" exists on the element object, delete the attribute value one. If class="one" does not exist on the element object, add

4. css()

role: modify element attributes

//<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
$("#b5").click(function () {
   var backgroundColor = $("#one").css("backgroundColor");
   alert(backgroundColor);
});

//<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
$("#b6").click(function () {
   $("#one").css("backgroundColor","green")
});

Three, CRUD operation

1. append()

Role: the parent element appends the child element to the end

Example: object 1.append (object 2): add object 2 to the inside of the element of object 1, and at the end

2. prepend()

Role: the parent element appends the child element to the beginning

Example: object 1.prepend (object 2): add object 2 to the inside of the element of object 1, and at the beginning

3. appendTo()

Example: object 1.appendTo (object 2): add object 1 to the inside of object 2, and at the end

4. prependTo()

Example: object 1.prependTo (object 2): add object 1 to the inside of object 2, and at the beginning

5. after()

Role: add elements to the back of the element

Example: Object 1.after (Object 2): Add object 2 to the back of object 1. Object 1 and Object 2 are brothers

6. before()

Role: add elements to the front of the element

Example: Object 1.before (Object 2): Add Object 2 to the front of Object 1. Object 1 and Object 2 are brothers

7. insertAfter()

Example: object 1. insertAfter (object 2): add object 1 to the back of object 2. Object 1 and Object 2 are brothers

8. insertBefore()

Example: Object 1.insertBefore (Object 2): Add object 1 to the front of object 2. Object 1 and Object 2 are brothers

9. remove()

Role: remove elements

Example: object.remove(): delete the object

10. empty()

Role: Clear all descendant elements of the element.

Example: object.empty(): All the descendant elements of the object are emptied, but the current object and its attribute nodes are retained

Click to follow and learn about Huawei Cloud's fresh technology for the first time~