使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
查看本章节
查看作业目录
需求说明:
使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
实现思路:
- 在页面中添加 <select> 标签,用来显示颜色,并设置标签的 id 属性
- 在 <select> 标签下加入多个 <option> 标签,<option> 标签的值设置为不同的颜色值,如 blue。在<option> 标签下加入文本节点,分别显示不同的颜色,如蓝色
- 在页面中引入 jQuery 文件库
- 在页面框架下载完成后,使用 jQuery 中的 change() 方法对 <select> 标签的 change 事件进行绑定
- 获取 <select> 标签的选中值,并将其设置为页面 body 的背景色
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#sel").change(function(){
$("body").css("background-color",$("select").val());
})
})
</script>
</head>
<body>
<select id="sel">
<option value="white">白色</option>
<option value="yellow">黄色</option>
<option value="orange">橙色</option>
<option value="blue">蓝色</option>
</select>
</body>
</html>
使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换的更多相关文章
- web项目页面加载时,下拉框有值
1.我用的框架是springmvc和mybaitis 由于没有整个项目,直接就去请求的action :http://localhost:8080/ytert/test/selectStoreType ...
- jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- jquery 获取下拉框 某个text='xxx'的option的属性 非选中 如何获得select被选中option的value和text和......
jquery 获取下拉框 某个text='xxx'的option的属性 非选中 5 jquery 获取下拉框 text='1'的 option 的value 属性值 我写的var t= $(" ...
- jquery根据下拉框选择的值显示输入框
原理就是根据下拉框选择的值来控制显示那个输入框: html代码: 首先定义一个下拉框,$serviceTypeList就是后台传过来的所有属性, <div class="uk-form ...
- JQuery和ASP.NET分别实现级联下拉框效果
在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuer ...
- Ext之页面多次请求问题(下拉框发送无关请求)
extjs 下拉框在拉取本地数据,然后又要展示后台数据时,出现过此问题(加载页面,自动发送无关的请求导致后台出现错误日志) { xtype:'combo', id:'state', width:130 ...
- jQuery bootstrap框架下重置下拉框选择
前端页面中下拉选择框采用bootstrap-select美化,如下图:
- JQuery autocomplete获得焦点触发弹出下拉框
需求:autocomplete控件,当点击获得焦点的时候也要弹出下拉列表(autocomplete默认是输入之后才会跟随出下拉列表),下面直接贴代码. js代码: $("#customerN ...
- jquery的clone()引发的问题,下拉框点击没有反应
此段代码是对某块元素的移位:上移.下移.对比修改前后的两段代码: 修改前: //点击移位 function move(obj,posi){ var al=$(obj).parent('li').par ...
随机推荐
- java打jar包和运行jar包的两种方式
java打jar包和运行jar包的两种方式更详细的打包方式请参考https://www.cnblogs.com/mq0036/p/8566427.html 一.java类不依赖第三方jar包以简单的一 ...
- 转 Android中Activity的启动模式(LaunchMode)和使用场景
转载请注明出处:http://blog.csdn.net/sinat_14849739/article/details/78072401本文出自Shawpoo的专栏我的简书:简书 一.为什么需要启动模 ...
- xtrabackup原理
常用命令 innobackupex --defaults-file=/data/mysql_3306/my.cnf --no-timestamp --slave-info --compress --c ...
- static JAVA
static 关键字:使用static修饰的变量是类变量,属于该类本身,没有使用static修饰符的成员变量是实例变量,属于该类的实例.由于同一个JVM内只对应一个Class对象,因此同一个JVM内的 ...
- RunLoop基础知识以及GCD
- 1.1 字面意思 a 运行循环 b 跑圈 - 1.2 基本作用(作用重大) a 保持程序的持续运行(ios程序因而能一直活着不会死) b 处理app中的各种事件(比如触摸事件 ...
- 二、SpringBoot实现上传文件到fastDFS文件服务器
上篇文章介绍了如何使用docker安装fastDFS文件服务器,这一篇就介绍整合springBoot实现文件上传到fastDFS文件服务器 1.pom.xml文件添加依赖 <!-- 连接fast ...
- 【Spring Framework】spring管理自己new的对象
使用AutowireCapableBeanFactory手动注入 使用.newInstance();创建对象的话,如果其他对象都使用Spring Autowired,还需要手动创建所有依赖的Bean: ...
- RocketMQ应用及原理剖析
主流消息队列选型对比分析 基础项对比 可用性.可靠性对比 功能性对比 对比分析 Kafka:系统间的流数据通道 RocketMQ:高性能的可靠消息传输 RabbitMQ:可靠消息传输 RocketMQ ...
- 简单的Spring Boot项目——实现连接Mysql数据库
一.创建Spring Boot项目 参考:使用IntelliJ IDEA创建简单的Spring Boot项目 二.数据库.表的创建 三.项目开发 3.1 pom.xml文件配置 <?xml ve ...
- 论文翻译:2021_Low-Delay Speech Enhancement Using Perceptually Motivated Target and Loss
论文地址:使用感知动机目标和损失的低延迟语音增强 引用格式:Zhang X, Ren X, Zheng X, et al. Low-Delay Speech Enhancement Using Per ...