前言
只有jQuery才能使用jQuery方法！
用jQuery记得先引用
操作元素的属性
获取属性
attr(属性名称) 获取指定的属性值prop(属性名称) 获取具有true和false两个属性的属性值
例子:
<form action="" id="myform">
<input type="checkbox" name="复选框1" id="aa" checked="checked" /> 复选框1
<input type="checkbox" name="复选框2" id="bb"/> 复选框2
</form>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
var aattr = $("#aa").attr("name");
var aprop = $("#bb").prop("name");
console.log(aattr);
console.log(aprop);
</script>
虽然上方在控制台都可以打印输出，但是他们有区别。
attr：操作 checkbox 时，选中返回 checked，没有选中返回 undefined。
总结获取：
**返回值是boolean属性的--->建议用prop()
反之，用attr()**
设置属性
attr(属性名称，属性值)prop(属性名称，属性值)
成功修改了复选框默认的是否选中。
移除属性
removeAttr(属性名)
<a href="http://www.baidu.com" id="remove">百度</a>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<script>
$('#remove').removeAttr('href');
</script>
成功将连接属性移除
操作元素的样式
attr("class") 获取class属性的值，即样式名称attr("class","样式名") 修改class属性的值，修改样式addClass("样式名") 添加样式名称css() 添加具体的样式removeClass(class) 移除样式名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置元素样式</title>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<style type="text/css">
div {
padding: 8px;
width: 180px;
}
.blue {
background: blue;
}
.larger {
font-size: 30px;
}
.green {
background: green;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<h3>css()⽅法设置元素样式</h3>
<div id="conBlue" class="blue larger">颜色1</div>
<div id="conRed">红⾊</div>
<div id="test">我只是测试而已</div>
<div id="remove" class="blue larger">颜色2</div>
</body>
<script type="text/javascript">
//1.获取class属性的值，即样式名称
var cls = $("#conBlue").attr("class");
console.log(cls);
//2.修改class属性的值，修改样式
$("#conBlue").attr("class","green larger")
//3.添加样式名称
$("#conRed").addClass("red");
//4.1添加具体的样式,添加一个
$("#test").css("font-size","39px");
//4.2添加具体的样式,添加多个
$("#test").css({"fonrt-size":"35px","font-family":"华文新魏"});
//5.移除样式
$("#remove").removeClass("blue");
</script>
</html>
操作元素的内容
html() 获取元素的html内容html("html, 内容") 设定元素的html内容text() 获取元素的⽂本内容，不包含htmltext("text 内容") 设置元素的⽂本内容，不包含htmlval() 获取元素value值val("值") 设定元素的value值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作内容</title>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
</head>
<body>
<h3><span>html()和text()⽅法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
</body>
<script type="text/javascript">
// 获取HTML内容，包括HTML标签
console.log($('h3').html());
// 获取⽂本内容，不包括HTML标签
console.log($('h3').text());
// 获取value值
console.log($('[name=uname]').val());
// 设置
$('#html').html("<p>使⽤html设置,看不到标签</p>");
$('#text').text("<p>使⽤text设置,能看到标签</p>");
$('[name=uname]').val("哈哈哈");
</script>
</html>
