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 when just get the value var id = $ (' div '). attr (' id ') console.log (ID) var cla = $ (' div '). attr (' class ') ) Console.log (CLA) //Set Value //1. Sets a value for the div's class to box $ (' div '). attr (' Class ', ' box ') //2. Set multiple values, The parameter is an object, and the key-value pair stores $ (' div '). attr ({name: ' hahaha ', class: ' Happy '})
Removeattr ()
removing properties from
Delete a single attribute $ (' #box '). Removeattr (' name '); $ (' #box '). Removeattr (' class ');//Delete multiple properties $ (' #box '). Removeattr (' 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>
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
$ (' div '). addclass ("box Box2");//Append multiple class names
RemoveclassRemoves 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:
var tag = false; $ (' span '). Click (function () { if () { $ (' span '). Removeclass (' active ') tag=false; } else{ $ (' span '). addclass (' active ') tag=true; } })
Case:The code is as follows:
<! DOCTYPE html>
ToggleclassDelete (add) A class if it exists (does not exist).
Syntax: Toggleclass (' box ')
$ (' span '). Click (function () { ///Dynamic Toggle Class class named Active $ (this). Toggleclass (' active ')})
HtmlGet 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> ');
TextGet 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
ValGet 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 the front-end----jquery