我是辰兮，很高兴你能来阅读，本章jQuery进阶，用案例详细的讲解了jQuery的DOM操作，每一个操作都有详细的案例以及截图，希望对你有帮助，分享获取新知，大家一起进步。
上一篇文章：初识jQuery-DOM
一、 序言
本篇文章继续补充：使用jQuery提供的函数完成节点的操作
给你我写这篇文章的调试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
//1.添加子节点
$("#container").append("<img src='img/1.jpg' style='width: 100px;'/>");
//child.appendTo("#container");
$("#myImg").appendTo("#container");
})
$("#btn2").click(function() {
//2.插入节点
$("#container").prepend("<img src='img/2.jpg' style='width: 100px;'/>");
//3.插入节点
$("#photo").prependTo("#container");
});
$("#btn3").click(function() {
//4.将新节点插入到旧节点之前
$("#myImg").before("<img src='img/3.jpg' height='150' />")
});
$("#btn4").click(function() {
//5.移除节点
$("#container").remove();
});
});
</script>
</head>
<body>
<input type="button" value="测试" id="btn1" />
<input type="button" value="测试" id="btn2" />
<input type="button" value="测试" id="btn3" />
<input type="button" value="测试" id="btn4" />
<div id="container" style="width: 300px; height: 300px;border: 1px deeppink solid ;position: absolute; top: 15%; left: 10%;">
</div>
<img src="img/2.jpg" height="50" id="myImg" />
<img src="img/3.jpg" height="50" id="photo" />
</body>
</html>
图片1.jpg
图片2.jpg
图片3.jpg
- ps : 自己一定要记得导入jQuery哦
二、添加子节点
| 函数 | 含义 |
|---|---|
| append() | 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 |
| appendTo() | 向目标结尾插入匹配元素集合中的每个元素。 |
初始的样板图如下所示
$("#btn1").click(function() {
//1.添加子节点
$("#container").append("<img src='img/1.jpg' style='width: 100px;'/>");
//child.appendTo("#container");
$("#myImg").appendTo("#container");
})
执行第一个测试按钮，显示如图所示，将两个图片加入到容器中
对应的div块中添加了两个元素
三、插入子节点（在容器的最前面添加子节点）
| 函数 | 含义 |
|---|---|
| append() | 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 |
| prepend() | 在被选元素的开始插入内容。 |
$("#btn2").click(function() {
//2.插入节点
$("#container").prepend("<img src='img/2.jpg' style='width: 100px;'/>");
//3.插入节点
$("#photo").prependTo("#container");
});
执行后我们查看对应的HTML页面元素变化
四、插入节点
$("#btn3").click(function() {
//4.将新节点插入到旧节点之前
$("#myImg").before("<img src='img/3.jpg' height='150' />")
});
执行后我们查看对应的HTML页面元素变化，发现多出来了一行
五、移除节点
$("#btn4").click(function() {
//5.移除节点
$("#container").remove();
});
执行后我们查看对应的HTML页面元素变化，发现对应的容器已经移除
六、html([str]) 函数
实例的参考代码如下可以自行运行
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5</title>
<style></style>
<!--不需要再次引用jquery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
var v = $("#p标签").html();
alert(v)
})
})
</script>
</head>
<body>
<input type="button" value="属性操作" id="btn1" />
<div id="container" style=" height: 100px;border: 2px solid blue;margin: 2px auto;width: 200px;">
<p id="p标签">这是一个div块</p>
</div>
</body>
</html>
初始界面图
使用函数获取标签内的文字，为了验证获取成功我们将文字弹出框打印了出来
七、text([str]) 函数
//container.text(str) : 参数字符直接作为文本设置到容器中（会覆盖容器中原有的内容）
$("#container").text("<input type='button' value='动态按钮'/>");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
var v = $("#container").text();
console.log(v);
alert(v);
})
$("#btn2").click(function() {
$("#container").text("<input type='button' value='动态按钮'/>");
})
});
</script>
</head>
<body>
<input type="button" value="按钮1" id="btn1" />
<input type="button" value="按钮2" id="btn2" />
<hr />
<div id="container">文本的内容</div>
</body>
</html>
首先初识的页面如图
然后执行第一个函数获取文本内容
$("#btn1").click(function() {
var v = $("#container").text();
console.log(v);
alert(v);
})
再执行第二个函数，直接覆盖掉容器的内容，解放如图所示
$("#btn2").click(function() {
$("#container").text("<input type='button' value='动态按钮'/>");
})
The best investment is to invest in yourself
2020.05.07 记录辰兮的第63篇博客