js使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
时间: 2024-10-10 12:16:56 浏览: 86
jQuery移动下拉框带搜索代码
在JavaScript中,我们可以利用jQuery库来简化操作DOM的过程,包括改变页面背景颜色。以下是一个简单的示例,展示了如何通过下拉框选择颜色并动态更改背景色:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 背景色切换</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
transition: background-color 0.5s ease;
}
</style>
</head>
<body>
<select id="colorSelector">
<option value="#ffffff">白色</option>
<option value="#000000">黑色</option>
<!-- 添加更多颜色选项 -->
</select>
<script>
$(document).ready(function() {
// 获取下拉框元素
var $selector = $('#colorSelector');
// 当下拉框的值发生变化时,更新背景色
$selector.change(function() {
$('body').css('background-color', this.value);
});
});
</script>
</body>
</html>
```
在这个例子中,首先我们引入了jQuery库,然后在`<select>`标签中创建了一个下拉菜单。当用户从下拉列表中选择一个颜色时,`change()`事件会被触发,这个事件处理器会获取当前选中的颜色值,并将其应用到`<body>`元素的`background-color`属性上。
阅读全文