<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
}
</style>
</head>
<body>
<script type="text/javascript" src="jss/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#b1").click(function () {
//使用remove删除所有的dom对象
$("select").remove();
})
$("#b2").click(function () {
//使用empty删除子的dom对象
$("select").empty();
})
$("#b3").click(function () {
//使用append增加dom对象
//$("#d").append("<div>增加的一行 重庆</div>");
//增加表格
$("#d").append("<br><table border='2px'>" +
"<tr>增加的表格" +
"<td>姓名</td>" +
"<td>学号</td>"+
"<td>性别</td>"+
"</tr>" +
"</table>");
})
$("#b4").click(function () {
//使用使用heml函数获取数组中第一个dom对象的文本值(innerHtml)
// let o=$("span").text();//我是mysql数据库我是jdbc
let o=$("span").html();//<b>我是mysql数据库</b> 会保留标签
alert(o);
})
$("#b5").click(function () {
//使用html改变第一个dom对象的文本值
$("span").html("我不是<b>数据库</b>");
})
})
</script>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select><br>
<select>
<option value="美洲">美洲</option>
<option value="亚洲">美洲</option>
<option value="欧洲">美洲</option>
</select><br>
<div id="d">我是div</div>
<span><b>我是mysql数据库</b></span><br>
<span>我是jdbc</span><br>
<button id="b1">使用remove删除所有对象</button><br>
<button id="b2">使用empty删除子dom对象</button><br>
<button id="b3">增加一个子dom对象</button><br>
<button id="b4">获取带html标签内容</button><br>
<button id="b5">设置值</button><br>
</body>
</html>
jquery部分函数使用
最新推荐文章于 2022-03-16 11:56:36 发布