html select标签选择事件_JavaScript事件

最新推荐文章于 2023-07-03 18:44:55 发布

weixin_39817215

最新推荐文章于 2023-07-03 18:44:55 发布

阅读量1k

点赞数

https://www.zhihu.com/video/1246190056504356864

测验

今日考题

答案

1.列举你所知道的PEP8 Python编码规范


=左右有一个空格，给函数传参数不用加空格
+ - > < >= <+ != 左右有一个空格
普通函数之间，或者函数与其他代码之间有一个空行
对象与其他代码有两个空行
要有缩进
每行最多79个字符


2.求结果(易错题)
    v1 = 1 or 3
    v2 = 1 and 3
    v3 = 0 and 2 and 1 
    v4 = 0 and 2 or 1    
    v5 = 0 and 2 or 1 or 4    
    v6 = 0 or Flase and 1


v1 = 1
v2 = 3
v3 = False
v4 = 1
v5 = 1
v6 = False


and || x and y ||   布尔"与" - 如果 x 为 False，x and y 返回 False，否则它返回 y 的计算值。    
or  || x or y  ||   布尔"或" - 如果 x 是 True，它返回 x 的值，否则它返回 y 的计算值。   
not ||  not x  ||   布尔"非" - 如果 x 为 True，返回 False 。如果 x 为 False，它返回 True。 

优先级：not>and>or   

 and：前面为假（0 或者 False）则表达式为假，否则表达式为后面的值；
 or：前面为真（非 0 或者非 False）则表达式为前面的值，否则表达式为后面的值；


3.简述字符编码发展史，以及你所知道的字符编码，每个字符编码表的在表示字符内部位数区别


ascii -> unicode -> utf-8 -> gbk
ascii 英文和符号  用一个字节标识 8位能标识256个字符
unicode  所有的字符用至少两个字符来标识，英文两个 中文四个
utf-8   ascii中的字符用一个字节标识，欧洲的字符用两个字节，东亚的字符（包括中文）用三个字节
gbk  国内版本 八位二进制来标识英文（一个字节）， 两个字节标识中文


4.js代码书写位置有几种，什么是事件，js如何绑定事件


两种，放在head里面或者放在body里面，一般放在body最下面
事件就是满足条件，自动触发的一种机制
①
<button onclick='func1()'>第一种</button>
let function func1(){
    alert(111)
}
②
<button id='d1'>第二种</button>
let btnEle = document.getElementById('D1')
btnEle.onclick = function(){
    alert(222)
}

今日内容概要

原生JS事件
- 开关灯
- input焦点
- 实时展示时间
- 省市联动

原生js事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #d1 {    // 设置一个圆型
 height: 100px;
 width: 100px;
 border-radius: 50%;
 border: 3px red solid;
        }

 .be_red {
 background-color: #e7ff5b;
        }

 .be_green {
 background-color: aqua;
        }

 </style>
</head>
<body>
<div id="d1" class="be_red be_green">   //优先展示最后一个class属性

</div>
<button id="d2">开灯</button>

<script>
 let divEle = document.getElementById('d1');
 let btnEle = document.getElementById('d2');
 btnEle.onclick = function () {   //绑定一个事件
 divEle.classList.toggle('be_green')  //有则删除,无则添加,实现开灯
    }

</script>
</body>
</html>

input框获取焦点失去焦点案例

.onfocus 获取焦点
.onblur 失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <input type="text" value="孙尚香" id="d1">
 <script>

 let inpEle = document.getElementById('d1')
 // 获取焦点
 inpEle.onfocus = function () {
 // 将input框内值去除
 // .value是获取，加=是赋值
 inpEle.value = ''
        }
 // 失去焦点
 inpEle.onblur = function () {
 // 给input框内重新赋值
 inpEle.value = '刘备'
        }

 </script>
</body>
</html>

实时展示当前时间

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <input type="text" id="d1" style="display: block;height: 50px;width: 200px">
 <button id="d2">开始</button>
 <button id="d3">结束</button>

 <script>
 // 定义一个全局存储定时器的变量
 t = null;
 let inpEle = document.getElementById('d1');
 let startEle = document.getElementById('d2');
 let endEle = document.getElementById('d3');
 // 1 访问页面之后，将访问的时间展示到input框中
 // 2 动态展示时间
 // 3 页面上加两个按钮，一个开始，一个结束

 // 定义一个在input框中展示时间的函数
 function showTime() {
 let currentTime = new Date();
 inpEle.value = currentTime.toLocaleString()
        }

 // 给start绑定展示，再绑定几秒钟执行一次
 startEle.onclick = function () {
 if(!t){
 t = setInterval(showTime, 1000)
            }
        };

 // 给end绑定清除定时器，并重置t
 endEle.onclick = function () {
 clearInterval(t);
 t = null
        }


 </script>
</body>
</html>

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<select name="" id="d1">
 <option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>

<script>
 let proEle = document.getElementById('d1')
 let cityEle = document.getElementById('d2')
 // 先模拟省市数据
 data = {
 "河北": ["廊坊", "邯郸",'唐山'],
 "北京": ["朝阳区", "海淀区",'昌平区'],
 "山东": ["威海市", "烟台市",'临沂市'],
 '上海':['浦东新区','静安区','黄浦区'],
 '深圳':['南山区','宝安区','福田区']
    };
 // 选for循环获取省
 for(let key in data){
 // 将省信息做成一个个option标签 添加到第一个select框中
 // 1 创建option标签
 let opEle = document.createElement('option')
 // 2 设置文本
 opEle.innerText = key
 // 3 设置value
 opEle.value = key // <option value="省">省</option>
 // 4 将创建好的option标签添加到第一个select中
 proEle.appendChild(opEle)
    }
 // 文本域变化事件  change事件
 proEle.onchange = function () {
 // 先获取到用户选择的省
 let currentPro = proEle.value
 // 获取对应的市信息
 let currentCityList = data[currentPro]
 // 清空市select中所有的option
 cityEle.innerHTML = ''
 // 自己加一个请选择
 let ss = "<option disabled selected>请选择</option>"
 // let oppEle = document.createElement('option')
 // oppEle.innerText = '请选择'
 // oppEle.setAttribute('selected','selected')
 cityEle.innerHTML = ss

 // for循环所有的市 渲染到第二个select中
 for (let i=0;i<currentCityList.length;i++){
 let currentCity = currentCityList[i]
 // 1 创建option标签
 let opEle = document.createElement('option')
 // 2 设置文本
 opEle.innerText = currentCity
 // 3 设置value
 opEle.value = currentCity // <option value="省">省</option>
 // 4 将创建好的option标签添加到第一个select中
 cityEle.appendChild(opEle)
        }
    }
</script>
</body>
</html>

weixin_39817215

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html select标签选择事件_JavaScript事件

https://www.zhihu.com/video/1246190056504356864测验今日考题答案1.列举你所知道的PEP8 Python编码规范=左右有一个空格，给函数传参数不用加空格+ - > < >= <+ != 左右有一个空格普通函数之间，或者函数与其他代码之间有一个空行对象与其他代码有两个空行要有缩进每行最多79个字符2.求结果...
复制链接

扫一扫

html select标签 选择事件_JavaScript事件

测验

答案

今日内容概要

原生js事件绑定

“相关推荐”对你有帮助么？

html select标签选择事件_JavaScript事件