查看本章节

查看作业目录

需求说明：

使用 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. Java SSLSocket

    Java SSLSocket JSSE(Java Security Socket Extension)是Sun公司为了解决互联网信息安全传输提出的一个解决方案,它实现了SSL和TSL协议,包含了数据加 ...

  2. apply 和 call 的区别

    相同点: 都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行 不同点: call方法从第二个参数开始可以接收任意个参数,每个参数会映射到相应位置的func的参 ...

  3. C#和.NET 框架

    C#和.NET框架 在.NET之前 20世纪90年代,微软平台多数程序员使用VB.C或C++.他们使用的技术都有问题. 技术 问题 纯Win32 API 不是面向对象,工作量比MFC大 MFC(Mic ...

  4. [BUUCTF]PWN——others_shellcode

    others_shellcode 附件 解题步骤: 例行检查,32位程序,开启了NX(堆栈不可执行)和PIE(地址随机化)双重保护 试运行了一下,发现直接就能执行shell的命令 远程连接运行一下,直 ...

  5. 使用 Amazon S3 触发器创建缩略图

    使用 Amazon S3 触发器创建缩略图 环境 centos (注意,必须是Linux环境) node12.x 安装教程 curl -sL https://rpm.nodesource.com/se ...

  6. ASP.NET VS 调试提示：指定的端口正在使用中，建议切换到xxx之外并大于1024的端口

    问题描述 使用 Visual Studio 开发 ASP.NET 网站的过程中,突然提示端口被占用: 解决方式 在启动项目上右键→属性,切换到 Web .直接修改服务器栏目里面的端口号,解决!

  7. 用 Go 实现一个 LRU cache

    前言 早在几年前写过关于 LRU cache 的文章: https://crossoverjie.top/2018/04/07/algorithm/LRU-cache/ 当时是用 Java 实现的,最 ...

  8. ArcGIS中重采样栅格像元对齐问题

    转发自我的知乎文章 我们通常要进行基于像元的运算,往往我们的研究中涉及到多源数据,因此就需要对数据进行地理配准.空间配准.重采样等操作. 一开始,我认为相同的地理椭球与投影坐标系下,不同来源,不同分辨 ...

  9. BitBake使用攻略--从HelloWorld讲起

    目录 写在前面 1. 什么是BitBake 2. BitBake的安装 3. 使用BitBake构建一个HelloWorld工程 后续 写在前面 <BitBake使用攻略>系列文章将从今天 ...

  10. CF499B Lecture 题解

    Content 有一个教授用 \(\texttt{A}\) 语言讲课.你觉得他讲的太快了,所以决定使用 \(\texttt{A}\) 语言和 \(\texttt{B}\) 语言记笔记. 已知 \(\t ...