使用jQuery在网页中插入一个DIV,在页面中设置五个按钮,分别是“插入”、“复制”、“替换”、“删除”、“格式”,点击“插入”按钮在DIV中插入一首四行唐诗,点击“复制”按钮,将唐诗正文复制在原文之后,点击“
时间: 2023-08-26 14:05:18 浏览: 70
复制div内容
替换”按钮,将唐诗中的“白日依山尽”替换为“黄河入海流”,点击“删除”,删除整首唐诗,点击“格式”按钮,将唐诗正文设置为红色。
以下是示例代码:
HTML部分:
```html
<div id="poem"></div>
<button id="insert">插入</button>
<button id="copy">复制</button>
<button id="replace">替换</button>
<button id="delete">删除</button>
<button id="format">格式</button>
```
JavaScript部分:
```javascript
$(document).ready(function() {
// 点击插入按钮插入唐诗
$("#insert").click(function() {
$("#poem").html("<p>静夜思</p><p>床前明月光,</p><p>疑是地上霜。</p><p>举头望明月,</p><p>低头思故乡。</p>");
});
// 点击复制按钮将唐诗正文复制在原文之后
$("#copy").click(function() {
$("#poem").append($("#poem p:eq(1)").clone());
$("#poem").append($("#poem p:eq(2)").clone());
$("#poem").append($("#poem p:eq(3)").clone());
$("#poem").append($("#poem p:eq(4)").clone());
});
// 点击替换按钮将唐诗中的“白日依山尽”替换为“黄河入海流”
$("#replace").click(function() {
$("#poem p:eq(1)").html("床前明月光,");
$("#poem p:eq(2)").html("疑是地上霜。");
$("#poem p:eq(3)").html("举头望明月,");
$("#poem p:eq(4)").html("低头思故乡。黄河入海流。");
});
// 点击删除按钮删除整首唐诗
$("#delete").click(function() {
$("#poem").empty();
});
// 点击格式按钮将唐诗正文设置为红色
$("#format").click(function() {
$("#poem p:eq(1)").css("color", "red");
$("#poem p:eq(2)").css("color", "red");
$("#poem p:eq(3)").css("color", "red");
$("#poem p:eq(4)").css("color", "red");
});
});
```
阅读全文