进阶"/>
js快速进阶
JavaScript快速进阶
JavaScript面向对象
基于Java的面向对象。在JavaScript 中同样也有面向对象。思想类似。
类的定义和使用
定义格式和使用
class 类名{constructor(变量列表){变量赋值； 例如： this.name = name}方法名(参数列表){方法体；return 返回值；}
}//使用格式
let 对象名 = new 类名(实际变量值);
对象名.方法名();
对象名.变量名();
字面量定义类和使用
定义格式和使用
let 对象名 = {变量名:变量值,变量名:变量值,...方法名:function(参数列表){方法体;return 返回值;}
}对象名.方法名();
对象名.变量名();
两种方法的差异： 第一种传统的方式需要构造方法，根据传入的参数进行生成对象。第二种方式，将对象的定义和赋值合成一步了，里面的变量和方法都是被固定了的。
如果你只需要使用一次对象而且对象使用的地方和功能固定，那么可以使用字面量的方法进行创建。如果你要定义一种规范，具体的实现要根据环境而定，那么就使用第一种传统的方式定义一个类。
JavaScript的继承
继承概念：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
继承关键字：extends
顶级父类：Object 所有类都直接或者间接的继承Object
在实际开发中，继承很少使用，而且JavaScript的继承几乎和Java一样。
JavaScript的内置对象
Set和Map内置对象为了解内容
正则表达式RegExp
JSON
JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和 生成，并有效的提升网络传输效率。
let myJson = {"name":"zhangsan","age":18
}
//定义天气对象
let weather = {city : "北京",date : "2088-08-08",wendu : "10° ~ 23°",shidu : "22%"
};//1.将天气对象转换为JSON格式的字符串
let str = JSON.stringify(weather);
document.write(str + "<br>");//2.将JSON格式字符串解析成JS对象
let weather2 = JSON.parse(str);
document.write("城市：" + weather2.city + "<br>");
document.write("日期：" + weather2.date + "<br>");
document.write("温度：" + weather2.wendu + "<br>");
document.write("湿度：" + weather2.shidu + "<br>");BOM
BOM(Browser Object Model)：浏览器对象模型。
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
windows窗口对象
定时器
唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
clearTimeout(标识)：取消一次性定时器。
唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
clearInterval(标识)：取消循环定时器。
加载事件
window.onload：在页面加载完毕后触发此事件的功能。
Location地址栏对象
时器。
clearTimeout(标识)：取消一次性定时器。
唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
clearInterval(标识)：取消循环定时器。
加载事件
window.onload：在页面加载完毕后触发此事件的功能。
Location地址栏对象
href 属性 ：就是浏览器的地址栏。我们可以通过为该属性设置新的URL，使浏览器读取并显示新的URL 的内容。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">table {border: 1;text-align: center;margin: 0 auto;}caption {margin: 100px auto;}td {width: 50px;background-color: hotPink;padding: 10px 20px;}div {width: 300px;margin-left: -150px;margin-top: 100px;padding-left: 50%;text-align: center;}</style></head><body><div id="time"></div><table><caption>随机点名器</caption><tbody id="tb"></tbody></table><div><button id="btn1">开始</button><button id="btn2">结束</button></div></body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>let names = [
"肖绍霆"
,"文鑫"
,"向贞好"
,"胥员员"
,"李勇"
,"熊明"
,"杜凯"
,"熊国良"
,"付帅"
,"龚文曦"
,"吴世林"
,"李鹏"
,"宋小明"
,"黄海"
,"曾光鹏"
,"墙世川"
,"幸勇"
,"彭清亮"
,"杨崇鑫"
,"王一舟"
,"汪家鹏"
,"高茂鑫"
,"张松恒"
,"杨海峰"
,"付杨恒"
,"唐浩翔"
,"张攀"]//根据数组长度，循环生成 表格。let myTbody = document.getElementById("tb");for(let i = 0; i<names.length ; i++){if(i%7 == 0){ //设置每一行多少个myTr = document.createElement("tr");myTbody.appendChild(myTr);}let myTd = document.createElement("td");myTd.innerText=names[i];myTr.appendChild(myTd);}//产生随机数的函数function myRondom(len){return Math.floor(Math.random()*len);}//存放定时器地址let timeId ;let romTd;//标志位，代表进入定时器，解决越点越快的buglet flag = 1;document.getElementById("btn1").onclick=function(){if(flag == 1){flag--;timeId = setInterval(function(){//清除上一个td的背景色,直接获取所有td，将所有td颜色重置//$("td").css("background-color","hotPink");let allTd = document.getElementsByTagName("td");for(let i = 0 ; i < allTd.length ; i++){allTd[i].style.backgroundColor="hotPink";}//根据随机数获取tdromTd = document.getElementsByTagName("td")[myRondom(names.length)];romTd.style.backgroundColor="lightYellow";},150);}}document.getElementById("btn2").onclick=function(){//清除定时器flag++;clearInterval(timeId);}//实时显示时间window.onload=function(){let myTime = document.getElementById("time")setInterval(function(){let localTime = new Date().toLocaleString();myTime.innerText = localTime;},1000)}
</script>
</html>
更多推荐
js快速进阶
发布评论