创建一个HTML页面,使用<script>标记直接引入jQuery文件;定义一个样式类current:宽200px,高100px,背景色粉色;定义一个div,使用jQuery获取div元素,并通过事件方法绑定click()事件,实现单击div时使用addClass()方法添加样式类current来设置div样式。
时间: 2023-12-03 12:46:32 浏览: 91
请参考以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.current {
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="myDiv">Click me!</div>
<script>
$(document).ready(function(){
$("#myDiv").click(function(){
$(this).addClass("current");
});
});
</script>
</body>
</html>
```
在上面的示例中,我们使用了`<script>`标记直接引入了jQuery文件。然后,定义了一个样式类`.current`,并定义了一个`<div>`元素。在`<script>`标记中,我们使用了`$(document).ready()`方法来确保页面加载完成后再执行相关的代码。我们通过`$("#myDiv")`选择器获取到了`<div>`元素,并使用`.click()`方法绑定了`click`事件。当用户单击`<div>`元素时,我们使用`.addClass()`方法将样式类`.current`添加到`<div>`元素中,以设置其样式。
阅读全文