jquer案例2：改变元素的样式、复选框、下拉框 省份的选择
一、改变元素的样式
图表1是这次需要完成的效果，这次的效果是在左边输入数据，右边则显示你输入数据的效果，假如你在左边背景色把它改成绿色，右边正方形的背景颜色也将变成绿色
图表 1
先把jquer的插件引入进来
HTML和CSS的代码我就不写了，就直接写jquer代码
获取按钮的id值给它绑定一个点击事件
声明一个变量，通过jquer的id选择器选择高度的元素，去获取他的val值
高度获取到了，宽度、背景色、边框。都是一样的获取，改变他的变量和id选择值就可以了（见图表2）
图表 2
所有的值全部获取到了，在控制台输出一下看一下效果，看有没有报错
值获取到了我们则要去改变右边正方形的样式，我们则用过id选择器去设置它css的样式，设置多个样式就是一个对象了，对象里面则通过键值对的形式，
先设它的宽度然后再把刚刚声明的变量赋值进去，其他的写法都是一样的（见图表3）
图表 3
改变元素样式的案例就写完了
二、复选框
图表 4
图表4是一个复选框的案例，看到下面三个按钮，这个案例要完成的效果就是可以全选，可以不全选，也可以反选，这样的好处就是如果要全选就不要一个个去点了，直接点全选按钮即可
图表 5
图表5是HTML的代码
把jquer的插件引入，就开始写jquer的代码
通过id选择器获取元素，给它绑定一个点击事件
这里使用for循环（见图表6）
图表 6
这里重点注意：！！！！i<$(“.input”)，不要写成了i
三、下拉框 省份选择
图表 7
图表7是省份选择的下拉框，要完成的效果则是点击省份的下拉框，出现一些省份，点击市的下拉框，出现你选择那个省份有哪些市区。就跟你买东西填写收货地址一样，选择一个省份出现省份下面的一些市区
图表 8
图表8是html的代码
图表 9
Jquer代码见图表9
jquer案例2：改变元素的样式、复选框、下拉框 省份的选择相关推荐
- webdriver--单选、复选及下拉框的定位
单选radiobutton的操作 两种情况,一种是各个button元素的属性都有唯一定位值,可以直接用属性唯一值定位:另一种就是一组各方面属性值都一样的radiobutton,除了text,可以用组元 ...
- miniui影响css样式,MiniUI操作input下拉框和datagrid的基础
最近因为工作需要,经常和miniui打交道,发现虽然网上有提供案例和完整api,但是有些细节的地方没有详细的解析,这里将最近用到的比较实用的东西整理出来(部分内容参照了miniui的官方api): 1 ...
- js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><script src ...
- jquery获取单选框复选框下拉框值
jquery获取单选框(radio)复选框(checkbox)下拉框(select)的值,亲测可用.有什么疑问可以留言 效果图: html代码: <!DOCTYPE html> <h ...
- JavaScript案例 全选 获取下拉框选中的值
<script type="text/javascript">function choice(obj){var checkbox = document.getEleme ...
- python 下拉列表单选框怎么获取元素_JS获取文本框,下拉框,单选框的值的简单实例...
1.文本框 1.1 通过var t=document.getElementById("test").value把值赋给变量t, 1.2 当然也可以反过来把已知的变量值赋给文本框,例 ...
- html 复选框 mysql_Html：实现带复选框的下拉框（一）
概述 项目中要用到可多选的下拉框(select),发现HTML中无此控件,故手动模拟实现一下. 模拟所用元素:input,ul,li 代码 模拟实现带复选框的下拉列表 body{ margin: 20 ...
- 下拉框联动_058-ajax之三级联动案例分析
1 视频中的三级联动案例的功能需求是什么 页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中出现对应的该市下面的区/县 ...
- HTML复选框里添加下拉框,Html：实现带复选框的下拉框（一）
概述 项目中要用到可多选的下拉框(select),发现HTML中无此控件,故手动模拟实现一下. 模拟所用元素:input,ul,li 代码 模拟实现带复选框的下拉列表 body{ margin: 20 ...
- ElementUI:多个Select下拉框存在时调整个别下拉框样式
当dialog中存在多个下拉框的时候,想改变某一个下拉框的样式,于是给某一个select绑定类,发现并没有生效,换了一种方法,将el-select用div包裹,将类绑定在div上,也没有效果. 在控制 ...
最新文章
- rpm 软件的安装和卸载
- [3.3训练赛]One-Dimensional(矩阵快速幂)，Freda的迷宫(无向图强连通分量+并查集)，一道防AK好题
- JSP静态导入与动态导入
- 神经网络 - 用单层感知器实现多个神经元的分类 - （Matlab建模）
- leetcode - 647. 回文子串
- Linux下最快速共享目录的方法
- Spring：@Configuration和@Component的使用与区别
- 吴恩达机器学习之单变量线性回归实现部分
- 高通要求欧盟取消12亿美元反垄断罚款，理由是……
- html中给select下拉框赋值
- 同比 数据模型 环比_同比和环比计算公式？
- xheditor的使用
- 华硕服务器 bios 内存 1333 显示 800,华硕主板+宇瞻内存 服务器DIY最佳选择！
- c语言折半查找递归程序,用递归法编写一个函数fac,求n!的值
- 今天win10弹出了flash助手，禁用它
- StringBuilder和输入输出
- 开源好物分享！文档在线预览平台
- gsm模块 java 录音_Arduino从Quectel M95 GSM模块读取AT命令
- 【NLP】Praat库(2) Batch processing of files
- CAN总线协议测试拓扑图