第一个jquery页面
时间: 2024-07-11 09:00:23 浏览: 81
在jQuery中,创建第一个使用这个流行的JavaScript库的页面非常简单。jQuery的核心思想是简化DOM操作和事件处理。下面是一个基础的HTML页面,展示了如何引入jQuery并使用它来选择元素:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First jQuery Page</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery库 -->
</head>
<body>
<!-- 页面内容 -->
<h1>Welcome to My Page</h1>
<p>This is a simple jQuery example.</p>
<script>
// 使用jQuery选择器获取元素
$(document).ready(function() {
// 当文档加载完成后执行
$("h1").click(function() {
alert("You clicked the heading!"); // 点击标题时显示警告框
});
});
</script>
</body>
</html>
```
在这个例子中:
- `<!DOCTYPE html>` 声明文档类型为HTML5。
- `<script src="...">` 引入了jQuery库的CDN链接。
- `$(document).ready()` 用于确保DOM结构加载完毕后再执行内部的JavaScript代码。
- `$("h1")` 是一个jQuery选择器,选中所有`<h1>`标签。
- `click()` 方法绑定了点击事件,当标题被点击时,会弹出一个警告框。
阅读全文