使用jQuery在网页中插入一个DIV,在页面中设置五个按钮,分别是“插入”、“复制”、“替换”、“删除”、“格式”,点击“插入”按钮在DIV中插入一首四行唐诗,点击“复制”按钮,将唐诗正文复制在原文之后,点击“替换”按钮,将唐诗正文第三行由<p>元素替换为<div>元素,点击“删除”按钮,将第五、六行唐诗删除,点击“格式”按钮,将唐诗正文设置为蓝色字体。
时间: 2023-06-17 14:07:51 浏览: 147
jquery 自定义插件(操作table、编辑table、表头拖动、隔行换色等.....),可按需求配置,在加一个可拖动的DIV代码
以下是代码实现:
HTML代码:
```html
<div id="poetry"></div>
<button id="insert">插入</button>
<button id="copy">复制</button>
<button id="replace">替换</button>
<button id="delete">删除</button>
<button id="format">格式</button>
```
jQuery代码:
```javascript
$(document).ready(function() {
// 插入唐诗
$("#insert").click(function() {
$("#poetry").append("<p>登高</p><p>唐代:杜甫</p><p>风急天高猿啸哀,渚清沙白鸟飞回。</p><p>无边落木萧萧下,不尽长江滚滚来。</p>");
});
// 复制唐诗
$("#copy").click(function() {
var poetry = $("#poetry").html();
$("#poetry").append(poetry);
});
// 替换唐诗
$("#replace").click(function() {
$("#poetry p:nth-child(3)").replaceWith("<div>风急天高猿啸哀,渚清沙白鸟飞回。</div>");
});
// 删除唐诗
$("#delete").click(function() {
$("#poetry p:nth-child(5), #poetry p:nth-child(6)").remove();
});
// 格式化唐诗
$("#format").click(function() {
$("#poetry p:not(:first-child)").css("color", "blue");
});
});
```
运行代码后,页面中会显示一个空的DIV和五个按钮。点击“插入”按钮会在DIV中插入一首唐诗。点击“复制”按钮会将唐诗正文复制在原文之后。点击“替换”按钮会将唐诗正文第三行由<p>元素替换为<div>元素。点击“删除”按钮会将第五、六行唐诗删除。点击“格式”按钮会将唐诗正文设置为蓝色字体。
阅读全文