查看本章节

查看作业目录

需求说明：

使用 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 实现页面背景色的更换，通过下拉框选择对应的颜色，页面背景会随着选中的颜色进行更换的更多相关文章

  1. web项目页面加载时，下拉框有值

    1.我用的框架是springmvc和mybaitis 由于没有整个项目,直接就去请求的action  :http://localhost:8080/ytert/test/selectStoreType ...

  2. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  3. jquery 获取下拉框 某个text='xxx'的option的属性 非选中 如何获得select被选中option的value和text和......

    jquery 获取下拉框 某个text='xxx'的option的属性 非选中 5 jquery 获取下拉框 text='1'的 option 的value 属性值 我写的var t= $(" ...

  4. jquery根据下拉框选择的值显示输入框

    原理就是根据下拉框选择的值来控制显示那个输入框: html代码: 首先定义一个下拉框,$serviceTypeList就是后台传过来的所有属性, <div class="uk-form ...

  5. JQuery和ASP.NET分别实现级联下拉框效果

    在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuer ...

  6. Ext之页面多次请求问题(下拉框发送无关请求)

    extjs 下拉框在拉取本地数据,然后又要展示后台数据时,出现过此问题(加载页面,自动发送无关的请求导致后台出现错误日志) { xtype:'combo', id:'state', width:130 ...

  7. jQuery bootstrap框架下重置下拉框选择

    前端页面中下拉选择框采用bootstrap-select美化,如下图:

  8. JQuery autocomplete获得焦点触发弹出下拉框

    需求:autocomplete控件,当点击获得焦点的时候也要弹出下拉列表(autocomplete默认是输入之后才会跟随出下拉列表),下面直接贴代码. js代码: $("#customerN ...

  9. jquery的clone()引发的问题，下拉框点击没有反应

    此段代码是对某块元素的移位:上移.下移.对比修改前后的两段代码: 修改前: //点击移位 function move(obj,posi){ var al=$(obj).parent('li').par ...

随机推荐

  1. ALitum技巧

    创建异型焊盘的方法 SCH与PCB同步修改后元器件乱跑的解决方法 Altium 在PCB重新编号更新到SCH原理图的方法 同步问题 其他技巧: 当前层亮色,其他层灰色切换:SHIFT+S

  2. SVN的基本介绍\服务器配置

    ### 1. 工作场景 1. 进入公司需要做的关于开发的第一件事, 就是向项目经理索要SVN服务器地址+用户名+密码### 2. 角色解释> 服务器: 用于存放所有版本的代码,供客户端上传下载更 ...

  3. MySQL(5)：安装MySQL

    下载地址 下载地址:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-winx64.zip 安装步骤 第一步:下载得到压缩包,并解压 ...

  4. Shell脚本实现自动修改IP地址

    作为一名Linux SA,日常运维中很多地方都会用到脚本,而服务器的ip一般采用静态ip或者MAC绑定,当然后者比较操作起来相对繁琐,而前者我们可以设置主机名.ip信息.网关等配置.修改成特定的主机名 ...

  5. Spring Batch Event Listeners

    Learn to create and configure Spring batch's JobExecutionListener (before and after job), StepExecut ...

  6. 避免警报疲劳：每个 K8s 工程团队的 8 个技巧

    避免警报疲劳:每个 K8s 工程团队的 8 个技巧 监控 Kubernetes 集群并不容易,警报疲劳通常是一个问题.阅读这篇文章,了解减少警报疲劳的有用提示. 如果您是随叫随到团队的一员,您可能知道 ...

  7. 【JavaWeb】【JSP】【Bean】JavaBean基础使用方法与操作步骤

    JavaBean基础使用方法与操作步骤 JavaWeb jsp Bean 项目结构 JavaBean的概念 JavaBean是可复用的.平台独立的软件组件 JavaBean既可以是简单的GUI要素,如 ...

  8. 【JAVA今法修真】 第一章 今法有万象 百家欲争鸣

    大家好,我是南橘,因为这段时间很忙,忙着家里的事情,忙着工作的事情,忙着考试的事情,很多时候没有那么多经历去写新的东西,同时,也是看了网上一些比较新颖的文章输出方式,自己也就在想,我是不是也可以这样写 ...

  9. 03 - Vue3 UI Framework - 首页

    顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的 ...

  10. Oracle命名规则

    1.长度不能超过三十个字符 2. 不要使用Oracle关键字 比如:id  name  table 3. 不能使用数字开头 包含:数字  字母  下划线 美元符号 4.  建议用 英文单词,不要去用中 ...