1, Operation properties
-
Attribute classification
-
Inherent attribute
href,src.....
-
Common attributes
id,class,name......
-
Custom properties
abc= '1234'
-
-
Methods of manipulating attributes
-
difference
1.prop cannot operate custom attributes
2.prop gets that the attribute of Boolean type is true/false
-
Get property value
When attr (attribute name) operates the checkbox, it obtains the specified attribute value. If it is selected, it returns checked, and if it is not selected, it returns undefined
Op (attribute name) gets the attribute value with two attributes: true and false
-
Set attribute value
Attr (attribute name, attribute value);
Prop (attribute name, attribute value);
-
Remove Attribute
removeAttr("property")
-
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="" id="myform">
<input type="checkbox" id="ch1" name="ch1" abc='123' checked="checked"/> aa
<input type="checkbox" id="ch2" name="ch2" abc='456'/> bb
</form>
<script type="text/javascript">
var ch1 = $("#ch1");
var ch2 = $("#ch2");
//Get intrinsic properties
console.log(ch1.attr('type'));
console.log(ch1.prop('type'));
//Get common properties
console.log(ch1.attr('name'));
console.log(ch2.prop('name'));
//Get custom attribute prop cannot operate on custom attribute
console.log(ch1.attr('abc'));
console.log(ch2.prop('abc'));//undefined
//Get properties of boolean type
console.log(ch1.attr('checked'));//checked
console.log(ch1.prop('checked'));//true
//Set boolean type properties
ch1.attr("checked",0);
ch2.attr("checked","checked");
//Same effect
ch1.prop("checked",false);
ch2.prop("checked",true);
//Set custom properties
ch1.attr("abc",'999');
//prop cannot manipulate custom attributes
ch2.prop("abc",'999'); //---Invalid setting
//Set common properties
ch1.attr("name",'ab1');
ch2.prop("name",'ab1');
//Remove Attribute
ch1.removeAttr("checked");//boolen type
ch1.removeAttr("abc");//Custom properties
ch1.removeAttr("name");//Common attributes
ch1.removeAttr("type");//Unique properties
</script>
</body>
</html>
2, Operation style
- attr("class") gets the value of the class attribute, that is, the style name
- attr("class", "style name") modifies the value of the class attribute and the style
- addClass("style name") adds a style name
- css() adds a specific style, which is equivalent to directly setting the inline style
- removeClass(class) removes the style name
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.green {
background : green;
}
</style>
</head>
<body>
<h3>css()Method to style an element</h3>
<div id="conBlue" class="blue larger">sky blue</div>
<div id="conRed">Bright red</div>
<div id="remove" class="blue larger">sky blue</div>
<script type="text/javascript">
//Gets the value of the class attribute, that is, the style name
var clas = $("#conBlue").attr("class");
console.log(clas);
//Modify the value of class attribute and style
$("#conBlue").attr("class","green "); / / overwrite the size, style and color of the font
//addClass("style name") Add style name
$("#conRed").addClass("larger");
//css()
$("#conRed").css("color","red");
//removeClass(class) Remove style name
$("#remove").removeClass("larger");
</script>
</body>
</html>
3, Operation element content
-
html()
Gets or sets the content of the element, including html content, which can recognize plain text content
Value: html()
Assignment: html("html, content")
-
text()
Gets or sets the content of the element. It does not contain html content. Only plain text content can be recognized
Value: text()
Assignment: text("html, content")
-
val()
Gets or sets the value of the element
Value: val()
Assignment: val('value ')
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3><span>html()and text()Method to set the element content</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
<script type="text/javascript">
//Gets the content of the element
var ht = $("h3").html();
var te = $("h3").text();
console.log(ht);
console.log(te);
//Set element content
$("#HTML "). HTML (" < b > BOLD effect < / b > ");
$("#Text "). Text (" < b > text bold effect < / b > ");
//val() Get element value
var input = $('[type="text"]').val();
console.log(input);
//val() set element value
$('[type="text"]').val("jquery");
</script>
</body>
</html>
4, Create and add elements
-
prepend(content)
Insert an element or content at the beginning of the selected element. The appended content parameter can be a character or HTML element tag.
-
$(content).prependTo(selector)
Add the content element or content to the beginning of the selector element
-
append(content)
Insert an element or content at the end of the selected element. The appended content parameter can be a character or HTML element tag.
-
$(content).appendTo(selector)
Insert the content element or content into the selector element, which is at the end by default
-
before()
Insert the specified element or content before the element: $(selector) before(content)
-
after()
Insert the specified element or content after the element: $(selector) after(content)
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div {
margin: 10px 0px;
}
span{
color: white;
padding: 8px
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<span class="red">Male god</span>
<span class="blue">idol</span>
<div class="green">
<span >little fresh meat</span>
</div>
<script type="text/javascript">
//Create element
var newP = $("<span>Paragraph label</span>");
console.log(newP);
//Append before adding element prepend(content)
//Gets the element of the reference location
var str = "<span>PDD</span>";
$('.green').prepend(newP);
$('.green').prepend(str);
//prependTo(); Added before being internal
var str2 = "<span>Spicy hot pot</span>";
$(str2).prependTo($(".green"));
//append() append after internal
$('.green').append("<span >Jay Chou</span>");
//appendTo(); Added after being internal
$("<span >Lin Junjie</span>").appendTo($('.green'));
//Before add before same level
$(".red").before("<span style='color:black'>Joker Xue</span>");
//Append after
$(".blue").after("<span style='color:black'>Li Ronghao</span>");
</script>
</body>
</html>
5, Delete element
-
remove()
Delete the selected element or specified child element, including the entire label and content
-
empty()
Empty the contents of the selected element
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<h3>Delete element</h3>
<span class="green">jquery<a>delete</a></span>
<span class="blue">javase</span>
<span class="green">http agreement</span>
<span class="blue">servlet</span>
<script type="text/javascript">
//delete
//$(".green").remove();
//empty
$(".green").empty();
</script>
</body>
</html>
6, Traversal element
-
Format:
$("value") each(function(index,element){
});
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<h3>Traversal element each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http agreement</span>
<span class="green">servlet</span>
<script type="text/javascript">
$(".green").each(function(index,ele){
//Index position of the current element
console.log(index);
//Get the current dom object
console.log(ele);
console.log(this);
//Unified style setting requires jquery objects
$(ele).attr("class","blue");
});
</script>
</body>
</html>