directory
Writing in the front
First, content operation
1. html()
2. text()
3. val()
2. Attribute operation
(1) General attribute operation
1. attr():
2. removeAttr()
3. prop()
4. removeProp()
5. Difference between ATTR and Prop
(2) Operate on the class attribute
1. addClass()
2. removeClass()
3. toggleClass()
4. css()
3. CRUD operation
1. append()
2. prepend()
3. appendTo()
4. prependTo()
5. after()
6. before()
7. insertAfter()
8. insertBefore()
9. remove()
10. empty()
Writing in the front
How are you? I’m grey Ape! A super bug writing program ape!
A cup of tea a pack of cigarettes, a BUG fix a day! Another bug-plagued day!
[jQuery framework] [jQuery framework] [jQuery framework] [jQuery framework]
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”.
First, content operation
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 code2. text()
Gets/sets the plain text content of the element’s label body
Var divText = $("#mydiv").text() var divText = $("#mydiv").text(Copy the code3. val()
Gets/sets the value attribute of the element
Var value = $("# myInput ").val() var value = $("#myinput").val(" hello ")Copy the codeA practical demonstration of the above code is as follows:
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src=".. / js/jquery - 3.3.1. Min. Js. ""></script>
<script>
$(function (){
// Get the value of myInput
var value = $("#myinput").val()
// alert(value);
// Get the tag body of mydiv
var divValue = $("#mydiv").html()
alert(divValue);
// Get the mydiv text content
var divText = $("#mydiv").text()
// alert(divText)
});
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="Zhang" /><br />
<div id="mydiv"><p><a href="#">The title tag</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 code2. removeAttr()
Action: Deletes an attribute
$("#bj").removeattr ("name");Copy the code3. prop()
Gets/sets the attributes of an element
Var hobby_type = $("#hobby").prop("checkbox");Copy the code4. removeProp()
Action: Deletes an attribute
Var hobby_type = $("#hobby").removeprop (" CheckBox ");Copy the code5. Difference between ATTR and Prop
- If you are working with inherent attributes of an element, prop is recommended
- 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"/>/ / add attributes to one tag $(" # b2 "). Click (function () {$(" # one "). The addClass (" second "); });Copy the code2. removeClass()
//
//<input type="button" value="removeClass" id="b3"/>/ / delete one tag's class attribute $(" # b3). Click (function () {$(" # one "). RemoveClass (" second "); });Copy the code3. toggleClass()
Function: Toggles the class attribute
//<input type="button" value="Switch styles" id="b4"/>$("#b4").click(function () {$("#one").toggleclass ("second"); });Copy the codeHere 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
//<input type="button" value="Use CSS () to get the background color with ID one" id="b5"/>
$("#b5").click(function () {
var backgroundColor = $("#one").css("backgroundColor");
alert(backgroundColor);
});
//<input type="button" value="Use CSS () to set the id to one and the background color to green" id="b6"/>
$("#b6").click(function () {
$("#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
JQuery DOM manipulation on the first and you record these, collection can slowly learn!
I think so. Yeah.Thumb up attentionHey!
Grey ape accompany you to progress together!
