jqurey完整实例
时间: 2023-09-06 12:04:42 浏览: 57
jQuery是一款轻量级的JavaScript库,用于简化HTML文档遍历、事件处理、动画等操作。下面是一个jQuery完整实例。
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery实例</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<h1>jQuery实例</h1>
<div></div>
<div></div>
<div></div>
<script>
// 通过jQuery选择器选取所有div元素
var $divs = $("div");
// 遍历所有div元素,并为每个元素添加鼠标点击事件
$divs.each(function(index, element) {
$(element).click(function() {
// 在点击时改变背景颜色
$(this).css("background-color", "blue");
});
});
</script>
</body>
</html>
```
这个实例演示了如何使用jQuery进行操作。我们引入了jQuery库,并在页面中创建了3个div元素。通过使用`$("div")`选择器,我们将选取所有的div元素,并通过`.each()`方法遍历它们。在遍历过程中,我们为每个div元素添加了鼠标点击事件,当点击时,通过`.css()`方法改变背景颜色为蓝色。
通过这个实例,我们可以看到jQuery的简洁语法和强大的功能,使得JavaScript开发更加容易和高效。