猴子也能学会的jQuery——jQuery元素操作
在这个例子中,我们将使用jQuery来操作DOM元素,包括创建、插入和删除元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery元素操作示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<p>第一个段落</p>
<p>第二个段落</p>
</div>
<button id="add">添加段落</button>
<button id="remove">删除最后一个段落</button>
<script>
$(document).ready(function() {
// 添加段落的函数
$('#add').click(function() {
$('#container').append('<p>新增段落</p>');
});
// 删除最后一个段落的函数
$('#remove').click(function() {
$('#container p:last-child').remove();
});
});
</script>
</body>
</html>
在这个例子中,我们定义了两个按钮,一个用于添加新的段落,另一个用于删除最后一个段落。通过jQuery,我们可以轻松地对元素进行操作,例如选择、创建、插入和删除。
评论已关闭