04-jQuery property control
jquery property control module is divided into four parts: html attribute manipulation, DOM attribute operations, and the operation value of the operation type style
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
attr()
Set the property value or return the property value of the selected element
// get the value: attr () to set a property value acquired only when the value of
var ID = $ ( 'div') attr ( 'ID').
The console.log (ID)
var = CLA $ ( 'div') attr. ( 'class')
the console.log (CLA)
// set values
// 1. class set to a value div Box
$ ( 'div'). attr ( 'class', 'Box')
// 2 set a plurality of values, the parameter for the object key value stored
$ ( 'div') attr ( {name: 'hahaha', class: 'happy'}).
removeAttr()
Removing property
// delete individual attribute $ ( '# Box') removeAttr ( 'name');. $ ( '# Box') removeAttr ( 'class');. // delete multiple attributes $ ( '# box') removeAttr . ( 'name class');
prop()
prop () method sets or returns the property value and the selected element.
When the method is used to return when a property value, a value of the first matching element is returned.
When the method is for setting attribute values, for the set of matching elements provided with one or more attribute / value pairs.
grammar:
Returns the value of the property:
$(selector).prop(property)
Properties and values:
$(selector).prop(property,value)
And a plurality of attribute values:
$(selector).prop({property:value, property:value,...})
Difference on attr () and prop () of
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
男<input type="radio" id='test' name="sex" checked/>
女<input type="radio" id='test2' name="sex" />
<button>提交</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//获取第一个input
var el = $('input').first();
// output CSSStyleDeclaration object, for a DOM object is an object having a property of native style, the output of the style object
the console.log (el.attr ( 'style'));
// undefined because attr is a value acquired object property node, it is clear that at this time is not the attribute node, the output natural undefined
the console.log (el.prop ( ' style '));
console.log(document.getElementById('test').style);
$('button').click(function(){
alert(el.prop("checked") ? "男":"女");
})
})
</script>
</body>
</html>
When to use attr (), when using a prop ()?
1 is true, false use of two properties prop ();
2. Other use attr ();
addClass (add more class names)
Adds the specified class name for each element matched.
$ ( 'Div') addClass ( "box");. // append a class name to the original name of the class
The match can also add elements of multiple class names
$ ( 'Div') addClass ( "box box2");. // append multiple class names
removeClass
Delete all or specified classes from all matched elements.
Removes the specified type (s)
$('div').removeClass('box')；
Remove all of the class
$('div').removeClass();
By adding delete the class name, to implement the elements of the show hidden
code show as below:
var tag = false;
$('span').click(function(){
if(tag){
$('span').removeClass('active')
tag=false;
}else{
$('span').addClass('active')
tag=true;
}
})
Case:
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="item">张三</li>
<li class="item">李四</li>
<li class="item">王五</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// the this means that the current click DOM object using $ (this) conversion jquery object
$ ( 'UL Li'). the Click (function () {
$ (function () {
$(this).addClass('active').siblings('li').removeClass('active');
})
})
</script>
</body>
</html>
toggleClass
If there is (not present) to delete a class (add).
Syntax: toggleClass ( 'box')
$ ( 'span'). the Click (function () {
// class called dynamic class switching Active
$ (the this) .toggleClass ( 'Active')
})
html
Get the value:
grammar;
html () is to obtain all of the contents of the selected tag element
$('#box').html();
Settings: Set all the contents of the element will replace the original content label
$ ( '# Box') html ( '<a href="https://www.baidu.com"> Baidu, </a>').;
text
Get the value:
text () Get the text content matching elements contained
grammar:
$('#box').text();
Settings:
Set the text content of all
$ ( '# Box') text ( '<a href="https://www.baidu.com"> Baidu, </a>').;
Note: when the value of the label will not be rendered as a tag element will only be rendered as a value to the browser
val
Get the value:
Val () Gets the value for form controls, such as input textarea select like
Settings:
. $ ( 'Input') val ( 'form control set value ");
Author: Rangers
Date: 2019-09-08
jquery property control module is divided into four parts: html attribute manipulation, DOM attribute operations, and the operation value of the operation type style
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
attr()
Set the property value or return the property value of the selected element
// get the value: attr () to set a property value acquired only when the value of
var ID = $ ( 'div') attr ( 'ID').
The console.log (ID)
var = CLA $ ( 'div') attr. ( 'class')
the console.log (CLA)
// set values
// 1. class set to a value div Box
$ ( 'div'). attr ( 'class', 'Box')
// 2 set a plurality of values, the parameter for the object key value stored
$ ( 'div') attr ( {name: 'hahaha', class: 'happy'}).
removeAttr()
Removing property
// delete individual attribute $ ( '# Box') removeAttr ( 'name');. $ ( '# Box') removeAttr ( 'class');. // delete multiple attributes $ ( '# box') removeAttr . ( 'name class');
prop()
prop () method sets or returns the property value and the selected element.
When the method is used to return when a property value, a value of the first matching element is returned.
When the method is for setting attribute values, for the set of matching elements provided with one or more attribute / value pairs.
grammar:
Returns the value of the property:
$(selector).prop(property)
Properties and values:
$(selector).prop(property,value)
And a plurality of attribute values:
$(selector).prop({property:value, property:value,...})
Difference on attr () and prop () of
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
男<input type="radio" id='test' name="sex" checked/>
女<input type="radio" id='test2' name="sex" />
<button>提交</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//获取第一个input
var el = $('input').first();
the console.log (el.prop ( ' style '));
the console.log (el.attr ( 'style'));
// undefined because attr is a value acquired object property node, it is clear that at this time is not the attribute node, the output natural undefined
// output CSSStyleDeclaration object, for a DOM object is an object having a property of native style, the output of the style object
console.log(document.getElementById('test').style);
$('button').click(function(){
alert(el.prop("checked") ? "男":"女");
})
})
</script>
</body>
</html>
When to use attr (), when using a prop ()?
1 is true, false use of two properties prop ();
2. Other use attr ();
addClass (add more class names)
Adds the specified class name for each element matched.
$ ( 'Div') addClass ( "box");. // append a class name to the original name of the class
The match can also add elements of multiple class names
$ ( 'Div') addClass ( "box box2");. // append multiple class names
removeClass
Delete all or specified classes from all matched elements.
Removes the specified type (s)
$('div').removeClass('box')；
Remove all of the class
$('div').removeClass();
By adding delete the class name, to implement the elements of the show hidden
code show as below:
var tag = false;
$('span').click(function(){
if(tag){
$('span').removeClass('active')
tag=false;
}else{
$('span').addClass('active')
tag=true;
}
})
Case:
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="item">张三</li>
<li class="item">李四</li>
<li class="item">王五</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// the this means that the current click DOM object using $ (this) conversion jquery object
$ ( 'UL Li'). the Click (function () {
$ (function () {
$(this).addClass('active').siblings('li').removeClass('active');
})
})
</script>
</body>
</html>
toggleClass
If there is (not present) to delete a class (add).
Syntax: toggleClass ( 'box')
$ ( 'span'). the Click (function () {
// class called dynamic class switching Active
$ (the this) .toggleClass ( 'Active')
})
html
Get the value:
grammar;
html () is to obtain all of the contents of the selected tag element
$('#box').html();
Settings: Set all the contents of the element will replace the original content label
$ ( '# Box') html ( '<a href="https://www.baidu.com"> Baidu, </a>').;
text
Get the value:
text () Get the text content matching elements contained
grammar:
$('#box').text();
Settings:
Set the text content of all
$ ( '# Box') text ( '<a href="https://www.baidu.com"> Baidu, </a>').;
Note: when the value of the label will not be rendered as a tag element will only be rendered as a value to the browser
val
Get the value:
Val () Gets the value for form controls, such as input textarea select like
Settings:
. $ ( 'Input') val ( 'form control set value ");
Author: Rangers
Date: 2019-09-08