HTML Jquery个人笔记
warning:
这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。
以下是一个简单的HTML页面示例，使用jQuery来添加一个删除按钮，用于删除用户输入的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人笔记</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#note-list {
width: 300px;
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
.note {
margin-bottom: 10px;
}
.note-content {
margin-left: 20px;
}
.delete-button {
cursor: pointer;
background-color: #ff0000;
color: white;
padding: 2px 5px;
border: none;
border-radius: 3px;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="note-list">
<!-- 这里将显示用户的笔记 -->
</div>
<textarea id="note-input" placeholder="添加笔记"></textarea>
<button id="add-note">添加笔记</button>
<script>
$(document).ready(function() {
$('#add-note').click(function() {
var noteContent = $('#note-input').val().trim();
if (noteContent) {
var $note = $('<div>').addClass('note').append(
$('<div>').addClass('note-content').text(noteContent)
).append(
$('<button>').addClass('delete-button').text('删除').click(function() {
$(this).parent().remove();
})
);
$('#note-list').append($note);
$('#note-input').val('');
}
});
});
</script>
</body>
</html>这个示例中，我们使用了jQuery来处理事件，使得用户可以添加和删除个人笔记。当用户在文本区域输入笔记并点击“添加笔记”按钮后，笔记内容将被添加到页面上的#note-list容器中，每条笔记下面都有一个删除按钮，点击可以删除对应的笔记。
评论已关闭