Abstract: Today to share with you about the jQuery framework in the DOM operation of the relevant technology, is a DOM “family bucket” series of explanation, suggest that the collection of attention seriously study!

This article is from huawei cloud community “[JQuery framework] ultra detailed DOM operation is enough! , original author: Little Grey Ape.

Today, I would like to share with you the relevant techniques of DOM manipulation in the jQuery framework. It is also a series of explanations that can be called DOM “family bucket”.

For content operations, you use the same function to set and get the content of an element. When setting the content of an element, you simply pass in parameters to the function.

1. html()

Gets/sets the tag body content of an element

Var divValue = $("#mydiv").html() var divValue = $("#mydiv").Copy the code

2. text()

Gets/sets the plain text content of the element’s label body

Var divText = $("#mydiv").text() var divText = $("#mydiv").text(Copy the code

3. val()

Gets/sets the value attribute of the element

Var value = $("# myInput ").val() var value = $("#myinput").val(" hello ")Copy the code

A practical demonstration of the above code is as follows:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src=".. Var value = $("#myinput").val(); var value = $("#myinput") alert(value); Var divValue = $("#mydiv").html() alert(divValue); Var div = $("#mydiv").text() // alert(divText)}); </script> </head> <body> <input id="myinput" type="text" name="username" value=" zhang Three "/><br />< div id="mydiv"><p><a Href ="#"> </a></p></div> </body> </ HTML >Copy the code

2. Attribute operation

(1) General attribute operation

1. attr():

Gets/sets the attributes of an element

Var bj = $("#bj").attr("name"); alert(bj); // Set the name property of the Beijing node to dabeijing $("#bj").attr("name", "dabeijing"); // didu $("#bj").attr("discription", "didu"); // Delete the name attribute of the Beijing node and check whether the name attribute existsCopy the code

2. removeAttr()

Action: Deletes an attribute

$("#bj").removeattr ("name");Copy the code

3. prop()

Gets/sets the attributes of an element

Var hobby_type = $("#hobby").prop("checkbox");Copy the code

4. removeProp()

Action: Deletes an attribute

Var hobby_type = $("#hobby").removeprop (" CheckBox ");Copy the code

5. Difference between ATTR and Prop

  1. If you are working with inherent attributes of an element, prop is recommended
  2. Attr is recommended if you operate on elements’ custom attributes

(2) Operate on the class attribute

1. addClass()

Action: Adds the class attribute value

//<input type="button" value=" addClass" id="b2"/> $("#one").addClass("second"); });Copy the code

2. removeClass()

//<input type=

//<input type="button" value="removeClass" id="b3"/> $("#one").removeClass("second"); });Copy the code

3. toggleClass()

Function: Toggles the class attribute

<input type="button" value=" button" id="b4"/> Not just add $(" # b4 "). Click (function () {$(" # one "). ToggleClass (" second "); });Copy the code

Here is a detailed description of this function:

ToggleClass (” one “) :

* 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()

Function to modify element attributes

$("#b5").click(function () {var backgroundColor = $(#b5") $("#one").css("backgroundColor"); alert(backgroundColor); }); $("#b6").click(function () {//<input type="button" value=" CSS () "id="b6"/> $("#b6").click() { $("#one").css("backgroundColor","green") });Copy the code

3. CRUD operation

1. append()

Action: The parent element appends the child element to the end

Example: Object 1. appEnd (Object 2): Adds object 2 inside the element of object 1, and at the end

2. prepend()

Action: The parent element appends the child element to the beginning

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

3. appendTo()

Example: Object 1.appendTo(Object 2): Adds object 1 to object 2 at the end

4. prependTo()

Example: Object 1.prependTo(object 2): Add object 1 inside object 2 at the beginning

5. after()

Adds an element to the end of an element

Example: Object 1.after(object 2) : Add object 2 after object 1. Object 1 and object 2 are siblings

6. before()

Adds an element to the front of an element

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

7. insertAfter()

Example: object 1.insertAfter(object 2) : Adds object 1 after object 2. Object 1 and object 2 are siblings

8. insertBefore()

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

9. remove()

Action: Removes an element

Example: object. Remove (): Deletes the object

10. empty()

Action: Clears all descendants of an element.

Example: object.empty (): empties all descendants of the object, but preserves the current object and its attribute nodes

Click to follow, the first time to learn about Huawei cloud fresh technology ~