请根据以下要求,使用JavaScript和 jQuery 编写一个简单的网页。 1.创建一个包含一个按钮和一个文本框的表单。 2.当用户点击按钮时,将文本框内的内容追加在页面上,最终以列表形式展示历史输入内容 3.当用户点击列表内容的某条记录时,使用动画效果删除该记录
时间: 2024-03-16 22:42:08 浏览: 107
以下是一个使用 jQuery 实现的简单网页,满足您的要求:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and jQuery Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
li {
cursor: pointer;
}
</style>
</head>
<body>
<h1>输入历史记录</h1>
<form>
<input type="text" id="inputBox">
<button id="addBtn" type="button">添加</button>
</form>
<ul id="historyList"></ul>
<script>
// 绑定添加按钮的点击事件
$("#addBtn").click(function() {
var inputVal = $("#inputBox").val();
if (inputVal) {
$("#historyList").append("<li>" + inputVal + "</li>");
$("#inputBox").val("");
}
});
// 绑定历史记录列表的点击事件
$("#historyList").on("click", "li", function() {
$(this).animate({
opacity: 0,
height: 0
}, 500, function() {
$(this).remove();
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用 jQuery 来实现以下功能:
1. 绑定添加按钮的点击事件,当用户点击按钮时,获取输入框中的内容,将其添加到历史记录列表中,并清空输入框。
2. 绑定历史记录列表的点击事件,当用户点击列表中的某条记录时,使用动画效果将其删除。我们使用 jQuery 的 animate() 方法来实现动画效果,将元素的 opacity 和 height 属性从当前值渐变到 0,并在动画完成后删除元素。
希望这个示例能帮助您理解如何使用 JavaScript 和 jQuery 来创建简单的网页。
阅读全文