JavaScript

JS (JaveScript)

1 概述
  • JaveScript 是脚本语言

  • js是动态型语言,创建变量时不需要指定数据类型。(python也是动态型的)

  • 是一种轻量级的编程语言。后来出现了node.js,可以作为后端语言来开发项目,js是一个既能做前端又能做后端的语言,但是js这个作者用了10天就开发了这么个语言,所以写的不是很完善。

    • JavaScript 是可插入 HTML 页面的编程代码。

    • JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行

    • JavaScript 很容易学习。

  • ECMAScript和JavaScript的关系:前者是后者的规格,后者是前者的一种实现。

    • ECMAScript 5.1 现在学的

    • ECMAScript 6 更加完善,简称:ES6.

  • 一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

    • 核心(ECMAScript)

    • 文档对象模型(DOM) Document object model (整合js,css,html)

    • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器 )

2 js引入
方式1:
<script>
//js代码
   alert("澳门皇家赌场上线!!!")
</script>

方式2:
<script src="js文件路径"></script>
3.1.注释
// 这是单行注释

/*
这是
多行注释
*/
3.2 结束符
/ 结束符 JavaScript中的语句要以分号(;)为结束符。也就是说和缩进没关系了
4 声明变量var
var a = 10;
声明变量时可以先不赋值
var a;此时a的值为undefined
5 基础数据类型
1. 数值类型Number
var a = 10;
undefined
typeof a;
var b = 1.11;
undefined
typeof b;
"number"
查看数据类型用 typeof a;

var c = 123e5; //12300000
var d = 123e-5; //0.00123
2. 字符类型String
var a = "alexdsb";
undefined
a
"alexdsb"

var a = "hello";
var b = "world";
var c = a + b; //字符串拼接
console.log(c); // 得到helloworld
3. 类型转换
parseInt("123") //返回123
parseInt("ABC") //返回NaN,NaN属性是代表数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") //123.456

示例:
var a = "a123";
var b = parseInt(a);
b
NaN
typeof b;
"number"

var b = "1.11";
parseFloat(b)
1.11
4 字符串常用方法
1 .length属性,查看字符串长度
/ 示例:
var a = "hello";
a.lenth; // 5

2 .trim(); / 移除空白
/ 示例:
var a = " hello "
a.trim(); // "hello"

3 .trimleft() /去左边的空白 .trimRight() /去右边的空白

4 .charAt(n) / 返回索引为n的那个字符

5 .concat() /字符串拼接
示例:
var a = "hello";
var b = "world";
a.concat(b) // "helloworld"

6 .indexOf() / 通过元素找索引
示例:
var a = "hello";
a.indexOf('e')

start参数,索引起始位置
a.indexOf('l',3)

找不到返回-1
a.indexOf('e',3) // -1

7 .slice() / 切片
var a = 'hello';
a.slice(2,4) / 顾头不顾腚

8 .toLowerCase() / 全变小写
.toUpperCase() / 全变大写
示例:
var a = 'HH';
a.toLowerCase();

9 .split 字符串分隔,第二个参数返回的是多少个数据
示例:
var a = "hello";
a.slipt('e') //(2) ['h','llo']
5 布尔值
var a = true;
var b = false;
""(空字符串),0,null,undefined,NaN都是false。
6 null和undefined
/null和undefined
/null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
/undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时, 返回的也是undefined。
    /null表示变量的值是空,undefined则表示只声明了变量,但还没有赋值。
7 对象类型object
JavaScript 中的所有事物都是对象:字符串,数值,数组,函数,...此外,JavaScript允许自定义对象。
比如声明一个字符串对象
var a = new String('bb')
6 复杂数据类型或者引用数据类型
1 数组 Array
创建数组:
var a = [11,22,33];
var b = new Array([22,33])
typeof a; // object类型
2 数组常用方法和属性
1 索引取值
var a = [123,"ABC"];
console.log(a[1]); // 输出"ABC"

2 .length a.length // 2

3 .push() 尾部追加 .pop() 尾部删除
示例:
var a = [11,22,33]
a.push("123"); // [11,22,33,"123"]
a.pop(); // "123"
a --[11,22,33]

4 .unshift(ele) 头部追加 .shift() 头部删除
var a = [11,22,33]
a //(3) [11,22,33]
a.unshift('aa')
a
(4) ['aa',11,22,33]
a.shift('aa');
'aa'
a
(3) [11,22,33]


5 .sort()排序
var a = [11,4,84,73];
a.sort()
(4) [11,4,73,84] // 是按照ascii码对照表个位数来拍的

function sortNumber(a,b){
   return a - b;
}
a.sort(sortNumber)
(4) [4,11,73,84]

function sortNumber(a,b){
   return b - a;
}
a.sort(sortNumber)
(4) [84,73,11,4]

解释:
如果想按照其他标准进行排序,就需要提供比较函数,也就是自己提供一个函数提供排序规则,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a b,其返回值如下:

      a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
      a 等于 b,则返回 0
      a 大于 b,则返回一个大于 0 的值。

6 .splice() 删除元素   var a = [84, 73, 11, 4];  a.splice(1,2,'aa','bb','cc');

7 .slice() 切片
8 .reverse()--原数组上反转
9 .join("+") 通过加号拼接

10 .concat()
var b = ["aa","bb"]
a.concat(b)-- 类似于python的extend
3 自定义对象{}
var a = {"name":"alex","age":18};
var b = {name:"chao",age:18}; / 键可以不加引号
console.log(a.name);
console.log(a["age"]);

for 循环遍历自定义对象
var a = {"name":'alex','age':18}
for (var i in a){
   console.log(i,a[i]);
}
7 运算符
1 算数运算符
+ - * / % ++ --  i++,是i自加1,i--是i自减1   i++的这个加1操作优先级低,先执行逻辑,然后再自加1,而++i,这个加1操作优先级高,先自加1,然后再执行代码后面的逻辑。
2 比较运算符
> >= < <= != == === !==   ==是弱等于(不比较数据类型)    ===强等于 强等于会比较数据类型
3 逻辑运算符
&& || !  # and,or,非(取反)!null返回true
4 赋值运算符
= += -= *= /=  #n += 1其实就是n = n + 1
8 流程控制
if-else if-else
var a = 10;
if (a > 5){  
 console.log("a > 5");
}else if (a < 5) {
 console.log("a < 5");
}else {
 console.log("a = 5");
}
switch 切换
var a = 10;
switch (a){    //switch (a++){} 试一试结果
   case 9:
console.log('999');
break;
   case 10:
console.log('101010');
break;
   case 11:
console.log('111111');
break;
}

加上default示例:

   var a = 20;

   switch (a){
       case 9:
           console.log('999');
       break;
       case 10:
           console.log('101010');
       break;
       case 11:
           console.log('111111');
       break;
       default :  //上面的条件都不成立的时候,走default
           console.log('啥也不对!!')
  }


var a = 10;
switch (a){
   case 10:  /case 10 成立的话,执行case 10 后面的内容,和case 10:case 11:两个条件共同要执行的那段代码,条件成立一个就行
       console.log("999");
   case 11: / 两个case 成立一个就执行
       consloe.log('666');
   break;
   default:
       consloe.log("do something")
}
9 for 循环和while循环
for (var i=0;i<10;i++) {  
 console.log(i);
}

循环数组:
var l2 = ['aa','bb','dd','cc']
方式1
for (var i in l2){  // i是索引,在python中的for i in [11,22,33]:i是元素
  console.log(i,l2[i]);
}
方式2
for (var i=0;i<l2.length;i++){
  console.log(i,l2[i])
}

循环自定义对象:
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
   console.log(i,d[i],d.i)  # 注意循环自定义对象的时候,打印键对应的值,只能是对象[键]来取值,不能使用对象.键来取值。
}
var i = 0;
while (i < 10) {
 console.log(i);
 i++;
}
三元运算符
var a = 1;
var b = 2;
var c = a > b ? a : b
// 如果a>b这个条件成立,就把冒号前面的值给c,否则把冒号后面的值给c   //python中的:a = x if x>y else y
10 函数
// 普通函数定义
function f1(){
   console.log("hello world!");
}

// 带参数的函数
function f2(a,b){
   console.log(arguments); // 内置的arguments对象
   console.log(arguments.length);
   console.log(a,b);
}

// 带返回值的函数
function sum(a, b){
 return a + b;  //在js中,如果你想返回多个值是不行的,比如return a ,b;只能给你返回最后一个值,如果就想返回多个值,你可以用数组包裹起来 return [a,b];
}
sum(1, 2);  // 调用函数 sum(1,2,3,4,5)参数给多了,也不会报错,还是执行前两个参数的和,sum(1),少参数或者没参数也不报错,不过返回值就会是NAN

// 匿名函数方式,多和其他函数配合使用,后面我们就会用到了
var sum = function(a, b){  //在es6中,使用var,可能会飘黄,是因为在es6中,建议你使用let来定义变量,不过不影响你使用
 return a + b;  
}
sum(1, 2);

// 立即执行函数,页面加载到这里,这个函数就直接执行了,不需要被调用执行
(function(a, b){
 return a + b;
})(1, 2);  //python中写可以这么写:ret=(lambda x,y:x+y)(10,20) 然后print(ret)
11 函数的全局变量和局部变量
局部变量:

      在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

    全局变量:

      在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

    变量生存周期:

      JavaScript变量的生命期从它们被声明的时间开始。

      局部变量会在函数运行以后被删除。

      全局变量会在页面关闭后被删除。
作用域
/ 首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。
闭包
var city = 'beijing'
function f(){
   var city = "shanghai";
   function inner(){
       console.log(city);
  }
   return inner;
}
var ret = f();
12 面向对象
  • es5封装方式

function Person(name){
   this.name = name;
}
var p = new Person('taibai');
p.name

"taibai"
Person.prototype.sum = function(a,b){return a+b;}
ƒ (a,b){return a+b;}

p.sum(2,3);
Date对象
var d1 = new Date(); 获取当前时间console.log(d1.toLocaleString());  //当前时间日期的字符串表示//方法2:参数为日期字符串var d2 = new Date("2004/3/20 11:12");console.log(d2.toLocaleString());var d3 = new Date("04/03/20 11:12");  #月/日/年(可以写成04/03/2020)console.log(d3.toLocaleString());//方法3:参数为毫秒数,了解一下就行var d3 = new Date(5000);  console.log(d3.toLocaleString());console.log(d3.toUTCString());   //方法4:参数为年月日小时分钟秒毫秒var d4 = new Date(2004,2,20,11,12,0,300);console.log(d4.toLocaleString());  //毫秒并不直接显示
date对象的其他方法
var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期 ,数字表示(0-6),周日数字是0
//getMonth ()               获取月(0-11,0表示1月,依次类推)
//getFullYear ()           获取完整年份
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()       获取毫秒
//getTime ()               返回累计毫秒数(从1970/1/1午夜),时间戳
json
var str1 = '{"name": "chao", "age": 18}';
var obj1 = {"name": "chao", "age": 18};
// JSON字符串转换成对象 反序列化
var obj = JSON.parse(str1);
// 对象转换成JSON字符串 序列化
var str = JSON.stringify(obj1);
13 RegExp 正则对象
创建正则对象的方法
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
简写方式:
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

.test方法.测试某个字符串是否符合正则规则
var s = 'hello'
reg1.test(s)  符合返回True,不符合返回false

一个坑:
reg1.test() 里面什么也不写,会默认放一个"undefined"字符串
reg1.test("undefined")
其他正则方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容 ,/o/g后面这个g的意思是匹配所有的o,
s2.search(/h/g);        // 0                     查找字符串中符合正则表达式的内容位置,返回第一个配到的元素的索引位置,加不加g效果相同
s2.split(/o/g);         // ["hell", " w", "rld"] 按照正则表达式对字符串进行切割,得到一个新值,原数据不变
s2.replace(/o/g, "s");  // "hells world"         对字符串按照正则进行替换

var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"     全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不区分大小写

坑:
var reg = /a/g;
var s = 'alex a sb';
reg.test(s); //true
reg.lastIndex; // 1
reg.test(s); //true
reg.lastIndex; // 6
reg.test(s); //false

reg.lastIndex = 0;重新赋值,让其归零
14 Math计算模块
Math.abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    小数部分进行直接舍去。
log(x)      返回数的自然对数(底为e)。
max(x,y)    返回 x y 中的最高值。
min(x,y)    返回 x y 中的最低值。
pow(x,y)    返回 x y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

9 Bom 浏览器对象模型

1. 一些常用的window方法
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
2. window的子对象
navigator对象(了解)
navigator.appName  // Web浏览器全称
navigator.appVersion  // Web浏览器厂商和版本的详细字符串
navigator.userAgent  // 客户端绝大部分信息
navigator.platform   // 浏览器运行所在的操作系统
screen 对象(了解)
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
history 对象(了解)

window.history 对象包含浏览器的历史。

history.forward()  // 前进一页,其实也是window的属性,window.history.forward()
history.back()  // 后退一页
location对象

window.location 对象获取当前页面的地址(URL),并把浏览器重新定向到新的页面。

location.href  获取当前URL
location.href="URL" // 跳转到指定页面
示例:location.href = 'http://www.baidu.com';直接跳转到百度

location.reload() 重新加载页面,就是刷新一下页面
弹出框
  • 可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

警告框
  • 警告框经常用于确保用户可以得到某些信息。

  • 当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法:
alert("你看到了吗?")
确认框(了解)
  • 确认框用于使用户可以验证或者接受某些信息。

  • 当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

  • 如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

语法:

confirm("你确定吗?")
提示框(了解)
  • 提示框经常用于提示用户在进入页面前输入某个值。

  • 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

  • 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为默认值,就是第二个参数,如果没有默认值那么返回null。

prompt("请在下方输入""你的答案")
3. 计时器相关
1. setTimeout 计时器,一段时间之后做某些事情
setTimeout("confirm('你好');",3000); # 3秒之后执行前面的js代码,注意:如果写的不是字符串,就会直接执行

setTimeout(function(){confirm('xxx')},3000); # 最好写成函数
var a = setTimeout(function(){console.log('xxx')},3000);
# a 是浏览器来记录计时器的一个随机数字 3000毫秒

clearTimeout(a) # 清除计时器,通过这个数字可以清除
2. setInterval 计时器,每隔一段时间做某些事情
/ 每隔一段时间就执行函数
var a = setInterval(function(){console.log('xxx')},3000);
clearInterval(a);

setInterval() 每隔一段时间做一些事情
setInterval("JS语句",时间间隔)
3 clearInterval()
  • clearInterval() 方法可取消由 setInterval() 设置的 timeout。

  • clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

clearInterval(setinterval返回的ID值)
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

 

10 DOM 选择器

1 概念
  • DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。

  • 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

  • HTML DOM 模型被构造为对象的树。

 

DOM标准规定HTML文档中的每个成分都是一个节点(node):

  • 文档节点(document对象):代表整个文档

  • 元素节点(element 对象):代表一个元素(标签)

  • 文本节点(text对象):代表元素(标签)中的文本

  • 属性节点(attribute对象):代表一个属性,元素(标签)才有属性

  • 注释是注释节点(comment对象) 

  JavaScript 可以通过DOM创建动态的 HTML:

  • JavaScript 能够改变页面中的所有 HTML 元素

  • JavaScript 能够改变页面中的所有 HTML 属性

  • JavaScript 能够改变页面中的所有 CSS 样式

  • JavaScript 能够对页面中的所有事件做出反应(鼠标点击事件,鼠标移动事件等)

2. 直接查找
document.getElementById         根据ID获取一个标签
document.getElementsByClassName 根据class属性获取(可以获取多个元素,所以返回的是一个数组)
document.getElementsByTagName 根据标签名获取标签合集

示例:
<div class='c1' id="d1">
   带到将军归来日,朕与将军解战袍!
</div>

<div class='c1' id='d2'>
   日照香炉生紫烟,遥看瀑布挂前川!
</div>

var a =document.getElementById('d1'); # 获取地属性值为d1的标签,拿到的直接是标签对象

var a =document.getElementById('c1'); # 获取class值为c1的所有标签 ,拿到的是数组。

var a = document.getElementsByTagName('div'); # 获取所有div标签,拿到的是数组
3 间接查找
var a = document.getElementById('d1');
a.parentElement; # 获取啊这个标签的父级标签。
children    # 所有子标签
firstElementchild # 第一个子标签元素
lastElementchild # 最后一个子标签元素
nextElementSibling  # 下一个兄弟标签元素
previousElementSibling # 上一个兄弟标签元素
4 节点操作
创建节点(创建标签)
var a = document.createElement("标签名称");
示例,创建a标签
var a = document.createElement('a');
var dd = document.getElementById('dd'); # 找到div标签

添加节点
# 添加节点,添加到了最后
dd.appendChild(a); # 将创建的啊标签添加到dd这个div标签里面的最后。

# 在某个节点前面添加节点
父级标签.insertBefore(新标签,某个儿子标签);
示例
var dd = document.getElementById('dd'); # 找到父级标签

var dd = document.createElement('a'); # 创建一个新的a标签

var d2 = dd.children[1]; # 找到父级标签下的某个儿子标签

dd.insertBefore(a,d2); # 将a标签插入到上面这个儿子标签的前面。

删除节点
dd.removeChild(d2); # 父级标签中删除子标签

替换节点
var dd = document.getElementById('dd'); # 找到父级标签
var a = document.createElement('a');  # 创建a标签
a.innerText = '百度';  
var d1 = dd.children[0];  #找到要被替换的子标签
dd.replaceChild(a,d1);  #替换
5 文件操作
d1.innerText; # 查看

设置:

d1.innerText = '<a href="">百度</a>';
d1.innerHTML = "<a href=''>百度</a>"; # 能够识别标签

var divEle = document.getElementById("d1")
d1.innerText  #输入这个指令,一执行就能获取该标签和内部所有标签的文本内容
d1.innerHTML  #获取的是该标签内的所有内容,包括文本和标签
6 属性操作
var divEle = document.getElementById('d1');                设置 divEle.setAttribute('age','18') # 比较规范的写法
查看 divEle.getAttribute('age')
删除 divEle.removeAtrtribute('age')

// 自带的属性还可以直接.属性名来获取和设置,如果是你自定义的属性,是不能通过.来获取属性值的
imgEle.src       标签对象.属性;
imgEle.src="..." 标签对象。属性='xxx'

7 值操作
var inp = document.getElementById('username');
inp.value;  # 查看值
inp.value = 'taibai'; # 设置值

选择框:

<select name='city' id='city'>
   <option value='1'>上海</option>
<option value='2'>北京</option>
<option value='3'>深圳</option>
</select>

var inp = document.getElementById('city');
inp.value; # 查看值
inp.value = '1'; # 设置值
8 class的操作
var d = document.getElementById('oo');
标签对象.classList;

d.classList; # 获得这个标签的class属性的所有的值
d.classList.add('xx2'); # 添加class值
d.classList.remove('xx2'); # 删除class值
d.classList.contains('xx2'); # 判断是否有某个class值,有就返回true,没有返回false
d.classList.toggle('xx2'); # 有就删除,没有就增加
9 css操作
var d = document.getElementById('oo');
d.style.backgroundColor = 'deeppink'; # 有横杠的css属性,写法要去掉横杠,并且横杠后面的首字母大写

d.style.height = '1000px'
10 事件

绑定事件的方式有两种

方式1:

<div id = 'd1' class='c1' onclick='f1();'></div>

<script>
   function f1(){
  var d = document.getElementById('d1');
  d.style.backgroundColor = 'yellow';
}
</script>

方式2:

<div id='d1' class= 'c1'></div>

var d = document.getElementById('d1');
d.onclick=function(){
   d.style.backgroundColor = 'yellow';
}
11 事件里面的this

绑定方式1:

this表示当前标签对象
<div id='d1' class='c1' onclick='f1(this);'></div>
function f1(ths){
   // var d = document.getElementById('d1');
   // d.style.backgroundColor = 'yellow';
   ths.style.backgroundColor = 'yellow';
   var d = document.getElemengById('d2');
   d.style.backgroundColor = 'yellow'
}

方式2:

<div id='d1' class='c1'></div>

var d = document.getElementById('d1');
d.onclick = function(){
   this.style.backgroundColor = 'yellow';
   //d.style.backgroundColor = 'yellow'; //this表示当前标签对象
}
  • onblur和onfocus事件

var inp = document.getElementById('username');
inp.onfocus = function(){
   var d = document.getElementById('d1');
   d.style.backgroundColor = 'pink';
};
// onblur 失去光标时触发事件

inp.onblur = function(){
   var d = document.getElementById('d1');
   d.style.backgroundColor = 'green';
};
  • onchange事件,域内容发生变化时触发

<select name='' id='技师'>
   <option value="1">太白</option>
   <option value="2">alex</option>
   <option value="3">沛齐</option>
</select>

//onchange事件,内容变化时触发的事件
var s = document.getElementById('技师');
s.onchenge = function(){
   // this.options select标签的所有的option标签
   // this.selectedIndex被选中的标签在所有标签中的索引值
   console.log(this.option[this.selectIndex].innerText + '搓的舒服');
}
用户名:<input type='text' id='username'>
   // input标签绑定onchange事件
   var inp = document.getElementById('username');
inp.onchenge = function(){
  console.log(this.value);
};
onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。
定时器
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="x-ua-compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>定时器</title>

</head>
<body>

<input type="text" id="timer">
<button id="start">开始</button>
<button id="end">结束</button>


<script>
   var timetag;
   // 1 获取当前时间
   function f1() {
       var showTime = new Date();
       var showLocaleTime = showTime.toLocaleString();
       var inpEle = document.getElementById('timer');
       inpEle.value = showLocaleTime;
  }
   // 2 把时间放进去
   //     2.1 找到strat开始按钮,绑定点击事件
   var startBtn = document.getElementById('start');
   startBtn.onclick = function () {
       //2.2 找到input标签,并将值放到input标签里面
       f1();
       if (timetag === undefined){
           timetag = setInterval(f1,1000);
      }
  };
   // 3 停止时间
   var endBtn = document.getElementById('end');
   endBtn.onclick = function () {
       clearInterval(timetag);
       timetag = undefined;
  }


</script>

</body>
</html>
select 联动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="x-ua-compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>select联动</title>
</head>
<body>

<select id="province">
 <option>请选择省:</option>

</select>

<select id="city">
 <option>请选择市:</option>
</select>

<script>
   var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

   // 1 将省份的数据放到省份的下拉框里面
   //1.1 找到省份下拉框
   var proSelect = document.getElementById('province');
   // 1.2 创建option标签

   //1.3 将数据放到option标签中,并将option标签放到省份下拉框里面
   for (var province in data){
       var proOption = document.createElement('option');
       proOption.innerText = province;
       proSelect.appendChild(proOption);
  }

   //2 选择省份,将被选择的省份的市都放到市的那个下拉框里面
   var citySelect = document.getElementById('city');
   proSelect.onchange = function () {
       citySelect.innerText = '';
       var proText = this.options[this.selectedIndex].innerText;
       var cityData = data[proText];
       for (var cityindex in cityData){
           var cityOption = document.createElement('option');
           cityOption.innerText = cityData[cityindex];
           citySelect.appendChild(cityOption);

      }
  }


</script>

</body>
</html>

 

 

posted @ 2021-03-26 09:15  Jack_Gao  阅读(208)  评论(0)    收藏  举报