Property manipulation of jquery

JQuery's property manipulation module is divided into four parts: HTML property Manipulation, Dom property manipulation, class-style manipulation, and value manipulation

• html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
• DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
• 类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
• 值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr ()

Sets the property value or returns the property value of the selected element

/Get Value: attr () set a property value just to get the valuevarID = $ ('Div'). attr ('ID') Console.log (ID)varCLA = $ ('Div'). attr ('class') Console.log (CLA)//Setting the value//1. Set a value setting Div's class is box$('Div'). attr ('class','Box')        //2. Set multiple values, parameter is object, key value pair is stored$('Div'). attr ({name:'hahaha',class:'Happy'})

Removeattr ()

removing properties from

 //  Delete a single property  $ ( '   name class  " ); 

Prop ()

The prop () method sets or returns the attributes and values of the selected element.

When the method is used to return a property value, the value of the first matching element is returned.

When the method is used to set property values, one or more property/value pairs are set for the matching element collection.

Grammar:

Returns the value of the property:

$ (selector). Prop (property)

Set properties and values:

$ (selector). Prop (Property,value)

To set multiple properties and values:

$ (selector). Prop ({property:value, Property:value,...})

About the differences between attr () and prop ()

<! DOCTYPE html>"en">"UTF-8"> <title></title>male<input type="Radio"Id='Test'Name="Sex"  checked/>female<input type="Radio"Id='test2'Name="Sex"/> <button> Submit </button> <script type="Text/javascript"Src="Jquery-3.3.1.js"></script> <script type="Text/javascript">$ (function () {//gets the first input            varEl = $ ('input'). First (); //undefined because attr is the value of the property node of this object, it is clear that there is no such attribute node at this time, natural output undefinedConsole.log (El.attr ('style')); //The output Cssstyledeclaration object, which has a native style object property for a DOM object, outputs a style objectConsole.log (El.prop ('style')); Console.log (document.getElementById ('Test'). style); $('Button'). Click (function () {alert (El.prop ) ("checked") ?"male":"female"); })                    })    </script> </body>
When to use attr (), when to use Prop ()?
1. There are true,false two attributes using prop ();
2. The other uses attr ();
AddClass (Add multiple class names)
Adds the specified class name for each matching element.
$ (' div '). addclass ("box");//Append a class name to the original class name
You can also add more than one class name to a matching element
You can also add more than one class name to a matching element
$ (' div '). addclass ("box Box2");//Append multiple class names
Removes all or the specified class from all matching elements.
Removes the specified class (one or more)
$ (' div '). Removeclass (' box ');
Removing all Classes
$ (' div '). Removeclass ();
You can implement the display hiding of an element by adding the delete class name.
The code is as follows:
varTag =false; $('span'). Click (function () {if(TAG) {$ ('span'). Removeclass ('Active') Tag=false; }Else{                $('span'). AddClass ('Active') Tag=true; }    })
Case:
The code is as follows:
<! DOCTYPE html>"en">"UTF-8"> <title></title> <style type="Text/css">. active{color:red; }    </style>class="Item"> Zhang San </li> <liclass="Item"> John Doe </li> <liclass="Item"> Harry </li> </ul> <script type="Text/javascript"Src="Jquery-3.3.1.js"></script> <script type="Text/javascript">$ (function () {$ ('ul Li'). Click (function () {//this refers to the currently clicked Dom object, using $ (this) to convert the jquery object$( This). AddClass ('Active'). Siblings ('Li'). Removeclass ('Active'); })         })     </script> </body>
Toggleclass
Delete (add) A class if it exists (does not exist).
Syntax: Toggleclass (' box ')
$ ('span'). Click (function () {    // Dynamic Toggle Class class named Active    $ (this). Toggleclass ('active')})
Html
Get Value:
Syntax
HTML () is to get all the contents of the selected tag element
$ (' #box '). html ();
Set Value: Setting all the contents of this element will replace the original content in the label
$ (' #box '). html (' <a href= ' https://www.baidu.com ' > Baidu </a> ');
Text
Get Value:
Text () Gets the textual content that the matching element contains
Grammar:
$ (' #box '). Text ();
Set the value:
Set all of the text content
$ (' #box '). Text (' <a href= "https://www.baidu.com" > Baidu </a> ');
Note: The value is not rendered as a label when the tag element is only rendered as a value in the browser
Val
Get Value:
Val () is used to get values in form controls, such as input textarea select and so on
Set the value:
$ (' input '). Val (' Set the value in the form control ');
Property manipulation of jquery