使用jQuery写一个带有一个功能的网页
时间: 2023-06-14 17:04:58 浏览: 49
以下是一个使用jQuery编写的简单网页,包含一个按钮,点击按钮后会改变网页标题和背景颜色:
```
<!DOCTYPE html>
<html>
<head>
<title>jQuery网页</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("body").css("background-color", "red");
$("h1").text("网页标题已更改!");
});
});
</script>
</head>
<body>
<h1>这是网页标题</h1>
<button>点击修改网页标题和背景颜色</button>
</body>
</html>
```
解释一下这个网页的代码:
- `<!DOCTYPE html>` 声明了文档类型为HTML5。
- `<html>` 开始了一个HTML文档。
- `<head>` 头部元素,包含了网页的元数据和引用的外部文件。
- `<title>` 定义了网页的标题。
- `<script>` 定义了Javascript代码块,其中引用了jQuery库文件。
- `$(document).ready()` 定义了一个函数,当文档加载完成后执行其中的代码。
- `$("button").click()` 绑定了一个点击事件,当用户点击按钮时执行其中的代码。
- `$("body").css()` 改变了网页的背景颜色。
- `$("h1").text()` 改变了网页的标题内容。
- `<body>` 网页的主体内容,包含了一个标题和一个按钮。
当用户点击按钮后,网页的背景颜色会变成红色,而网页的标题会变成“网页标题已更改!”