Javascript
一、简介
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。
1. js是一个脚本语言,解释型语言 (编程语言)
2. 可以使用浏览器来解释执行js的代码
3. javascript与java语言没有直接联系,javascript借用了java的名气
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。
# 不需要背,理解即可
1. 以前不使用js的时候,有一个用户的登录操作,用户输入了用户和密码,点击“登录”是直接将用户名和密码提交给服务器,服务器来验证用户名和密码是否正确。 问题:不管用户输入的用户名是否规范都直接提交给服务器,所有的验证操作都交给了服务器。
2. 有了js后,就可以在将用户名和密码提交给服务器前,做一些验证(长度是否合法.),验证成功之后再提交给服务器,否则不允许提交给服务器,目的:缓解服务器压力
JavaScript 是因特网上最流行的脚本语言。
JavaScript是一种轻量级、解释性、脚本编程语言,可以执行在所有现代浏览器中。
学习目标:JavaScript语法,将JavaScript运用在HTML中定制交互行为,定制前端逻辑
二、第一个程序
1、初识Javascript
<html>
<head>
<title>学习HTML基本语法</title>
<script type="text/javascript">
//警告弹窗
alert('Hello World');
//向开发者工具的console中输出日志
console.log('日志内容')
</script>
</head>
<body>
...
</body>
</html>
- HTML 的
<script>
标签用于把 JavaScript代码 插入 HTML 中; - script标签可以出现在html的head或body位置,一般常放在head中;
- 也可以引入外部的js文件
<script src="myScript.js"></script>
# 总结:
1. 在html中使用js的几种方式:
(1) 在head标签,添加script标签,在标签的内部添加js的代码即可
(2) 引入外部的js文件 <script src="myScript.js"></script>
(3) 在body中添加script标签
其中第一种方式和第三种的区别:
在head中添加script,是在页面显示前就执行js的代码
在body中添加script,是在页面显示后才执行js的代码
如果没有特殊原因,还是将js代码写在head中
2、注释
- 单行注释 //
- 多行注释 /* … */
三、变量和数据类型
1、变量
js是弱类型语言,所以在定义变量时不需要指定类型,直接用let关键字定义即可。
var/let x=5;
var y=6;
var z=x+y;
console.log(z);
2、数据类型
字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。
2.1 字符串
声明字符串
var carname = "Volvo XC60";
console.log(carname)
大小写转换
var lower = carname.toLowerCase()
console.log(lower)
var upper = carname.toUpperCase()
console.log(upper)
分隔字符串
var r = carname.split(' ')
console.log(r)
console.log(r[1])
2.2 数字
JavaScript不区分整数类型和浮点类型 。
var age = 18;
var price = 10.99;
var a = 3;
console.log(typeof age)
console.log(typeof price) //=> number
2.3 布尔
var y = true;
console.log(y);
2.4 数组
var arr = [2,4,6,8,22];
for (var i = 0;i<arr.length;i++) {
console.log(arr[i]);
}
arr[5] = 40; //在下标为5的位置添加40
console.log(arr.length); // => 6
arr.push(30)
console.log(arr)
2.5 Object对象
如下两种创建方式,方式一不建议使用,方式二的创建方式更轻便,建议使用
//方式一:
var obj = new Object();
obj.name="Mr_lee";
obj.age=18;
obj.sayHi=function(){ //为对象添加方法
console.log("hi~")
}
//方式二:
var obj2={name:'Mr_lee',age:18,sayHi:function(){console.log("hi~");}}
//使用
console.log(obj.name)
console.log(obj2.name)
obj.sayHi()
obj2.sayHi()
# js中没有字典类型,字典类型实际在js中称为对象 object
2.6 日期类型
var a = new Date() //当前系统时间
var b = new Date(2018,5,28,10,9,10) // year month day hour minute second ,月份从0开始
var b = new Date(2018,5,28)
a.getFullYear();
a.getMonth(); //月份,一月是0
a.getDate();
a.getDay(); //一周的第几天 周日是0
a.getHours();
a.getMinutes();
a.getSeconds();
a.getTime();
2.7 特殊类型
- undefined:未赋值的变量的默认值 var a;alert(a)
- NaN:not a number, 比如 b = “sf”/2; b的值就是NaN
- null:用于置空变量,不是默认值,需要手动赋值 var a=“sdf”; a=null;alert(a)
四、Math对象
Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。
var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根
1、Math对象属性
属性 | 描述 |
---|---|
E | 返回算术常量 e,即自然对数的底数(约等于2.718)。 |
LN2 | 返回 2 的自然对数(约等于0.693)。 |
LN10 | 返回 10 的自然对数(约等于2.302)。 |
LOG2E | 返回以 2 为底的 e 的对数(约等于 1.414)。 |
LOG10E | 返回以 10 为底的 e 的对数(约等于0.434)。 |
PI | 返回圆周率(约等于3.14159)。 |
SQRT1_2 | 返回 2 的平方根的倒数(约等于 0.707)。 |
SQRT2 | 返回 2 的平方根(约等于 1.414)。 |
2、Math对象方法
方法 | 描述 |
---|---|
abs(x) | 返回 x 的绝对值。 |
acos(x) | 返回 x 的反余弦值。 |
asin(x) | 返回 x 的反正弦值。 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。 |
ceil(x) | 对数进行上舍入。 |
cos(x) | 返回数的余弦。 |
exp(x) | 返回 Ex 的指数。 |
floor(x) | 对 x 进行下舍入。 |
log(x) | 返回数的自然对数(底为e)。 |
max(x,y,z,…,n) | 返回 x,y,z,…,n 中的最高值。 |
min(x,y,z,…,n) | 返回 x,y,z,…,n中的最低值。 |
pow(x,y) | 返回 x 的 y 次幂。 |
random() | 返回 0 ~ 1 之间的随机数。 |
round(x) | 把数四舍五入为最接近的整数。 |
sin(x) | 返回数的正弦。 |
sqrt(x) | 返回数的平方根。 |
tan(x) | 返回角的正切。 |
五、运算符
- 算数运算符(+ - * / % ++ --)
- 比较运算符(> >= < <= == != === !==)
- 逻辑运算符(&& || !)
- 赋值运算符(= += -= *= /= %= )
- 字符串连接运算符(+)
- 三元运算符(? :)
1、算数运算符
自增运算符 :
var x = 3;
console.log( x++ );// 输出 3
console.log( x );// 输出 4
var y = 3;
console.log( ++y );// 输出 4
console.log( y );// 输出 4
自减运算符
var x = 3;
console.log( x-- );// 输出 3
console.log( x );// 输出 2
var y = 3;
console.log( --y );// 输出 2
console.log( y );// 输出 2
2、比较运算符
- === 两个运算数的值相等并且类型相同时,结果为true。
- !== 两个运算数的值不等或者类型不同时,结果为true。
3、逻辑运算符
4、赋值运算符
5、字符串连接运算符
var str1 = "Hello";
var str2 = "Word";
var str3 = str1 + str2;
console.log(str3);
6、三元运算符
表达式一?表达式二 :表达式三 判断表达式一是否为真,为真取表达式一的值,否则取表达式二的值
var a = 10;
var b = 5;
var c = a > b ? a : b;
console.log(c);
# 类型转换
var n = "123"
console.log(Number(n))
console.log(parseInt("564"))
console.log(parseFloat("564.13"))
console.log(String(1234))
六、流程控制
1、条件语句
条件语句就是指通过判断指定的计算结果,来决定是执行还是跳过指定的语句块。
JavaScript提供了两种条件语句:if else语句和switch case语句。
1.1 if语句
var num = 5;
if( num < 10 ){
console.log( num );
}
1.2 if else语句
var score = 68;
if( score < 60 ){
console.log("不及格");
}else{
console.log("及格");
}
1.3 else if语句
var score = 68;
if( score > 90 ){
console.log("优秀");
}else if( score >= 80 ){
console.log("良好");
}else{
console.log("一般");
}
1.4 switch case语句(python中没有)
var num = 2;
switch( num ){
case 1:
console.log("查询余额");
break;
case 2:
console.log("在线充值");
break;
default:
console.log("转人工服务");
}
2、循环语句
循环语句是一系列反复执行到复合特定条件的语句。
2.1 for语句
for( var i = 1; i < 10; i++ ){
for( var j = 1; j <= i; j++ ){
//console.log(i + "*" + j + "=" + (i*j));
document.write(i + " * " + j + " = " + i*j + " ")
}
}
2.2 while语句
var num = 0;
while( num < 10 ){
console.log( num );
num = num + 1;
}
2.3 do…while语句
var num = 0;
do{
console.log( num );
num = num + 1;
}while( num < 10 );
# do..while 与 while的区别:
1. while循环是先判断条件,再执行循环体代码
2. do..while是先执行循环体,再判断条件,循环体的代码至少被执行一次
3、break和continue
- break语句是中断语句,用于终止循环语句或开关语句。
for( var i = 0; i < 10; i++ ){
if( i == 5 ){
break;
}
console.log( i );
}
- continue语句是连续语句,用于重新开始while、do while和for语句。
for( var i = 0; i < 10; i++ ){
if( i == 5 ){
continue;
}
console.log( i );
}
七、函数
1、基本语法
function 方法名(参数1,参数2){
...
return ...
}
function fn(){
console.log("this is function");
}
fn();
2、匿名函数
var fn = function(a,b){ //定义匿名函数,并赋值给一个变量
alert(a+" -- "+b)
}
fn(18,"Mr_lee") //调用
八、事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript代码。
1、事件注册、绑定
事件注册:定义函数myClick , 并在标签的事件中调用方法:οnclick=“myClick()”
function myClick(){
alert("我被点击了!")
}
<input type="button" onclick="myClick();" value="click_me"/>
2、可用事件
事件名 | 事件描述 |
---|---|
onclick | 鼠标点击时触发 一般给按钮绑定 |
ondblclick | 鼠标双击时触发 |
onfocus | 元素获得焦点时触发 输入框 |
onblur | 元素失去焦点时触发 输入框 |
onchange | 用户改变域的内容 单选、多选、下拉框 |
onmouseover、onmouseenter | 鼠标被移动到某个元素上(触发一次) |
onmousemove | 鼠标在元素内部移动时,不断触发 |
onkeydown | 键盘某个键被按下 输入框 |
onmouseout、onmouseleave | 鼠标从元素移开 |
onkeypress | 键盘的键被按下或按住 |
onkeyup | 键盘的键被松开 |
onload | 用于body标签,页面加载完毕时触发一次 |
3、event对象
在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到 。
<script>
function myClick(a){ //a = 接收事件对象 ,从οnclick="myClick(event);"中传来
alert("button clicked~")
console.log(a)
console.log(a.type) //事件类型
console.log(a.clientX) //事件触发x坐标
console.log(a.clientY) //事件触发Y坐标
console.log(a.target) //事件源-触发事件的标签
console.log(a.target.value) //获取事件源的属性值
}
</script>
<input type="button" onclick="myClick(event);" value="click_me"/>
4、事件冒泡
一个标签触发事件后,事件会向上传递给自己的父标签,然后父标签的父标签…
function div_click()
{
console.log('div_click')
}
function btn_click(e)
{
console.log('btn_click')
e.stopPropagation() //阻断事件向上传递
}
<div onclick="div_click()" style="width: 300px;height: 200px; background-color: blue;">
<input type="button" value="点击" onclick="btn_click(event)">
</div>
事件的冒泡,不会因为事件源没有该事件,而不冒泡;也不会因为某个中间的父标签没有该事件而停止冒泡。
注意:当父元素和子元素都有某一个事件,且需要独立执行时,冒泡会使得事件同时执行,所以需要防止。
5、常用技巧
5.1 超链接
为超链接注册单击事件,需要阻止其href (javascript:void(0))
function myClick()
{
console.log('go go go')
}
<a href="javascript:void(0)" onclick="myClick()">go</a>
5.2 form表单
form表单提交前,如果需要处理其他逻辑
先将提交按钮改为普通按钮,然后在按钮事件中手动提交表单。即可实现灵活的表单控制!
function myClick()
{
....逻辑处理...
document.forms[0].submit();//手动获取from,并提交
}
<form action="http:www.baidu.com" method="get">
<input type="button" name="" value="提交" onclick="myClick()">
</form>
5.3 this 当前元素
function myClick(a) // a=this,当前触发事件的元素
{
console.log(a)
}
<input type="button" name="" value="提交" onclick="myClick(this)">
6、另外的事件注册方式(Dom)
基于编程的事件注册,语法如下:
<head>
<title>学习Javascript</title>
<script type="text/javascript">
var button = document.getElementById('btn') //获得标签
button.onclick = function() //注册事件
{
console.log('注册成功')
}
</script>
</head>
<body>
<form action="http:www.baidu.com" method="get">
<input type="button" id="btn" value="提交">
</form>
</body>
如上语法,则使得html逻辑和js逻辑的耦合降到最低!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qfh2PU7F-1648718072791)(Javascript .assets/1566386566663.png)]
**原因:**标签还未出现,就去为标签注册事件!!
解决方案: onload或者 script后置
//解决方案1:onload事件
function onload9(){//load事件的handler,整个的页面加载完毕后执行
//1.获取按钮
var btn9 = document.getElementById("btn");
//2.注册事件
btn9.onclick=function(){
alert("clicked~~~");
}
}
...
<body onload="onload9();"> <!--注册onload事件-->
....
<input type="button" id="btn" value="提交"></input>
//解决方案2:script后置
<form action="http://www.baidu.com" method="get">
<input type="text" name="usermae"/><br/>
<input type="text" name="password"/><br/>
<input type="button" value="提交" id="btn"/>
</form>
<script type="text/javascript">
//1.获取按钮
var btn115 = document.getElementById("btn");
//2.注册事件
btn115.onclick=function(){
console.log('form submit');
document.forms[0].submit();
}
</script>
# 总结
# 给标签绑定事件有两种方式:
1. 直接在开始标签中,添加事件属性<button οnclick="f()">点击</button> 进行事件的绑定
2. 使用编程的方式,事件的绑定不写在开始元素标签中,解耦合
body中只写标签,不绑定事件 <button>点击<button>
在script标签中,先获取标签,再给标签的事件属性赋值-匿名函数
注意:使用第二种方式绑定事件,需要将script脚本代码后置 或 给body加一个onload事件 然后再将事件绑定的代码写在onload的事件对应的函数中
九、DOM
document object model Browser object model
DOM是文档对象模型,BOM是浏览器对象模型,前者是浏览器(可看成容器)内的内容进行操作,而后者是对浏览器本身进行操作
1、DOM简介
HTML DOM (文档对象模型):当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
HTML DOM 树
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
牛刀小试: 改变div的背景色
<div style="background-color: red; margin:0 auto; width: 500px;height: 300px;" id="div_1"></div>
<script type="text/javascript">
var element = document.getElementById("div_1");
element.onmouseover = function ()
{
element.style.backgroundColor = "blue"
}
element.onmouseout = function ()
{
element.style.backgroundColor = "red"
}
</script>
2、查找HTML元素
通常,通过 JavaScript,需要操作 HTML 元素。 因此必须首先找到该元素。有四种方法来:
- 通过 id 找到 HTML 元素 document.getElementById()
- 通过标签名找到 HTML 元素 document.getElementsByTagName()
- 通过类名找到 HTML 元素 document.getElementsByClassName()
- 通过name属性值找到 HTML 元素 document.getElementsByName()
<div style="background-color: red; margin:0 auto; width: 500px;height: 300px;" id="div_1" class="div_class" name="div_name"></div>
<script type="text/javascript">
var element = document.getElementById("div_1"); //通过id获取
console.log(element)
element = document.getElementsByTagName("div")[0]; //通过标签名获取(复数)
console.log(element)
element = document.getElementsByClassName("div_class")[0]; //通过标类名获取(复数)
console.log(element)
element = document.getElementsByName("div_name")[0]; //通过name属性值获取(复数)
console.log(element)
</script>
标签层级属性:
- children 获得所有子标签
- parentNode 获得父标签
- previousElementSibling 获得上一个兄弟标签
- nextElementSibling 获得下一个兄弟标签
<div style="background-color: red; margin:0 auto; width: 500px;height: 300px;" id="div_1">
<p id="p1">谁谓伤心画不成,画人心逐世人情。 </p>
<p id="p2">君看六幅南朝事,老木寒云满故城。 </p>
</div>
<input type="button" value="点我" onclick="myClick()">
<script type="text/javascript">
function myClick()
{
var element = document.getElementById("div_1"); //通过id获取
console.log(element)
var list = element.children;
for(var i = 0;i<list.length;i++){
var pe = list[i];
pe.style.color = 'white'; //将文字颜色改为白色
}
}
</script>
3、修改HTML
3.1 修改标签内容
双标签中间的内容
element.innerHTML = xxx
<div id="div_1">为中华之崛起而读书。</div>
<input type="button" value="点我" onclick="myClick()">
<script type="text/javascript">
function myClick()
{
var element = document.getElementById("div_1");
element.innerHTML = "读一本好书,就如同和一个高尚的人在交谈。"
}
</script>
3.2 修改标签基本属性
<input type="button" value="点我" onclick="myClick()" id="btn_1">
<script type="text/javascript">
var yes = true;
function myClick()
{
var element = document.getElementById("btn_1");
if (yes) {
element.value = "别点了"
yes = false;
}else {
element.value = "点我"
yes = true;
}
}
</script>
ele.value="new_value"; //多用于设置文本框的显示内容
ele.name="new_name"; //修改name属性值
ele.href="new_href"; //可用于修改a标签的链接地址
ele.src="new_src"; //可用于修改img标签的图片
...
...
ele.checked=true/false;//适用于radio-button 和 checkbox标签
ele.selected=true/false;//适用于select内的option标签、
ele.disabled=true/false;//禁用标签,多用于按钮
3.3 修改样式属性
ele.style.height="50px"; //单独修改标签的某一项css属性.
ele.style.backgroundColor="#abcdef";//单独修改标签的某一项css属性. 修改的属性为‘background-color’
t.style.display = "none" # 隐藏标签
t.style.display = "inlineblock" # 显示标签
4、删除和新增标签
4.1 删除标签
- removeChild(child) 删除指定的子标签
- remove() 删除自身
<div id="div_1">
<p>谁谓伤心画不成,画人心逐世人情。</p>
<p>君看六幅南朝事,老木寒云满故城。</p>
</div>
<input type="button" value="点我" onclick="myClick()">
<script type="text/javascript">
function myClick()
{
var element = document.getElementById("div_1");
var p1 = element.children[0];
element.removeChild(p1)
}
4.2 新增标签
- document.createElement(标签名) 创建新标签
- document.createTextNode(内容) 创建标签内容
- ele.appendChild(标签) 追加子标签
- ele.insertBefore(新的子标签,指定的子标签) 插入指定标签到ele标签中
<input type="button" value="点我" onclick="myClick()">
<script type="text/javascript">
function myClick()
{
var para = document.createElement("p")
var text = document.createTextNode("鸟三顾而后飞,人三思而后行。")
para.appendChild(text)
document.getElementsByTagName("body")[0].appendChild(para)
}
</script>
十、BOM
1、简介
1.1 概念
BOM 是 Browser Object Model,浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象;
由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;
1.2 学什么
我们将学到与浏览器窗口交互的一些对象,例如可以移动、调整浏览器大小的window对象,可以用于导航的location对象与history对象,可以获取浏览器、操作系统与用户屏幕信息的navigator与screen对象,可以使用document作为访问HTML文档的入口,管理框架的frames对象等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJHkVkhv-1648718072793)(Javascript .assets/BOM.gif)]
2、Window对象
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架
- window.alert(“警告”) 警告框
- window.confirm(“xxx”) 确认框,根据用户的选择,返回bool值
var y = window.confirm("提示消息:是否删除xxx")
if (y) {
console.log('...')
}
- window.prompt(“xxx”) 提示框,收集用户的输入
var txt = window.prompt("请输入")
console.log(txt);
- window.onload = function(){ …} 注册onload事件
3、History对象(了解)
- window.history.forward() 在浏览历史里前进一步
- window.history.back() 在浏览历史里后退一步
4、Screen对象
- window.screen.width 屏幕宽度
- window.screen.height 屏幕高度
5、Navigator对象
- window.navigator.appVersion 浏览器版本
6、Location对象
- window.location.href 载入页面–当前载入页面的完整UR
window.location.href = "http://www.baidu.com"
7、Document对象
- document.getElement…(…) 选择标签
- document.forms[0] 选择文档中的form
- document.write(“hello”) == 向文档中写入内容,会覆盖所有之前的 (了解)
补充:
-
计时器
-
var id1 = setInterval(function(){...},1000) ;
每1000毫秒执行一次function,返回事件的id -
var id2 = setTimeout(function(){...},1000);
1000毫秒后仅执行一次function,返回事件的id -
clearTimeout(id2);
移除事件 -
clearInterval(id1);
移除事件如何在网页上显示当前时间?
-
-
引入外部的js文件
<script src="xx.js"></script>
十一、具体的演示
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript展示</title>
</head>
<body>
<button id="button" onclick="f()">按钮</button>
<br>
<label>
姓名为:<input name="username" id="username" type="text" >
<input type="button" value="赋值" onclick="getusername()">
</label>
<br>
<img id="MI" width="50" height="120" src="{% static 'image/MI.png' %} " alt="MIUI"
onmouseout="f1()"
onmouseover="f2()">
<br>
<select id="movietype" onchange="changemovie()">
<option value="热门" selected >热门</option>
<option value="最新" selected >最新</option>
<option value="悬疑" selected >悬疑</option>
<option value="热门" selected >热门</option>
</select>
<br>
event事件: <input type="text" onblur="show_event(event)">
<br>
this事件:<input type="text" onblur="show_this(this)">
<br>
<button id="button1" value="不绑死的button">不绑死的button</button>
<script>
data=new Date()
console.log(data);
let arr=['太原理工大学','山西大学','中北大学']
for(let i=0;i<arr.length;i++) {
console.log(arr[i]);
}
function f(){
console.log('button触发')
}
{# 获取值并修改值 #}
function getusername(){
let username1=document.getElementById('username')
console.log(username1.value);
username1.value='我给你赋值'
console.log(username1)
}
let button = document.getElementById('button1');
button.onclick=function (){
alert(button.value)
}
</script>
{#放在上面时的触发事件#}
<script>
function f1(){
let image=document.getElementById('MI');
console.log(image);
image.src="{% static 'image/注册封面.jpg' %}"
}
function f2(){
let image = document.getElementById('MI');
console.log(image);
image.src = "{% static 'image/MI.png' %}"
}
</script>
{#多选更新更新时候:#}
<script>
function changemovie(){
let type = document.getElementById('movietype')
console.log(type.value);
}
</script>
{#获取属性之events#}
<script>
function show_event(event){
console.log("我是一个event获取")
console.log(event)
console.log(event.target.value);
}
</script>
{#获取属性值this对象#}
<script>
function show_this(t){
console.log(t);
console.log(t.value)
}
</script>
</body>