JS学习总结

参考&感谢：JS学习总结

一、JavaScript简介

1.1 是什么？

可嵌入HTML代码，是基于 对象 和 事件 驱动 的脚本语言

1.2 能做什么？

动态改变html和css代码，及时校验数据

1.3 组成？

• ES语法规范：数据类型、变量、作用域、判断、循环、内置对象、包装数据类型、方法
• BOM：

1. onload页面加载事件、windows顶级对象
2. 定时器
3. location、history

• DOM：动态增删改查页面标签元素及属性

1.4 引入方式

js脚本严格按照从上往下顺序加载

1. 标签内嵌脚本：onclick="addRoles()"
2. 页面内部脚本：<script type="text/javascript"></script>
3. 引入外部脚本：<script src="/js/jquery.min.js"></script>

二、JavaScript基本语法

2.1 原始数据类型

1. number
2. string
3. boolean
4. null 空类型
5. undefined 未定义

注意number、string、boolean是可调用方法的伪类型

        var aaa1 = null;
        var aaa2 = undefined;
        console.log(typeof(aaa1)) //object
        console.log(typeof(aaa2)) //undefined

2.2 强制类型转换

• number/boolean转string，直接toString即可
• boolean/string转number，直接parseInt。boolean转number会NaN（not a number）问题
• string/number转boolean，非空字符串true，空字符串false。0数字false，非0则true。Boolean(x)转换

2.3 运算符

赋值、算数、逻辑、比较（===全等）、
三元、void（跳转页面）、
类型（typeof（x）和 x instanceof Object）

2.4 逻辑语句

2.4.1 if-else

2.4.2 fori

2.4.3 switch

2.4.1 for in

常用解析循环：

var arr = [1,2,4,'11'];
for (index in arr) {
    console.log(arr[index])
}

三、JavaScript的内置对象及常用方法

1. Number
2. Boolean
3. String
4. Array
5. Date
6. Math
7. RegExp：正则表达式.test(数据) 返回boolean

3.1 String方法

length 长度
charAt(索引) 返回索引所在字符串
indexOf(字符) 返回字符所在索引
lastIndexOf(字符) 逆向返回字符所在索引
split() 切割字符串成数组
substring(截取两个索引之间的字符) 字符串索引从0开始，右边是开区间
substr(截取到哪的索引) 字符串索引从0开始，截取到哪的索引是开区间
大小写转换

3.2 Array方法

创建Array:
var arr = new Array();
var arr = [];
var arr = [1,2,'3'];
join() 数组切割成字符串
length 长度
reserve() 反转
sort() 排序 从左到右 小到大
push() 追加到最后
pop() 删除数组数据并返回

        var arr = [1,2,4,'11'];
        let pop = arr.pop();
        console.log(arr);//1,2,4
        console.log(pop);//11

3.3 Date方法

var nowdate = new Date()
var a = new Date(1629880086); 
getFullYear(): 年
getMonth(): 月 0-11
getDate(): 日 1-31
getDay(): 星期 0-6
getTime(): 返回毫秒数
a.toLocaleString() //1970/1/20 上午4:44:40

3.4 Math方法

Math并不能被创建对象
Math.ceil(x) 向上取整
Math.floor(x) 向下取整
Math.round(x) 四舍五入
Math.random(x) 生成随机数
Math.pow(2,3) 2的3次幂是8

四、JavaScript函数

4.1 创建函数

• 普通函数 function a(){}
• 匿名函数 var method = function(){}
• 对象函数 var method = new Function('a','b','alert(a+b)')

函数参数数量可以多不能少

function a(a, b, c){}
a(1,2,3,4);//可
a(1,2);//NaN

4.2 编码解码

三者的区别:进行编码的符号范围不同,开发中多用第一种

var url='http: //ww.baidu.com?name=wj先生&password=123456';
alert(encodeURI(ur1));
//http://www.baidu.com?name=wj%E5%85%88%E7%94%9F&password=123456
alert(encodeURIComponent(url));
//http%3A%2F%2Fwww.baidu.com%3Fname%3Dwj%E5%85%88%E7%94%9F%26password%3D123456
alert(escape(url));
//http%3A//www.baidu.com%3Fname%3Dwj%u5148%u751F%26password%3D123456

4.3 eval()方法

把字符串当成js脚本执行

 var str = "var a=2;var b=3;alert(a+b)";
 eval(str);

五、JavaScript事件

5.1 常用事件图解

5.2 JS绑定事件方式

1. 直接定义相应行为

<a onclick="alert('11')">新增角色</a>

2. 相应行为进行函数封装

<a onclick="addRole()">新增角色</a>
function addRole(){}

3. 相应行为和html标签脱离

<button id="clickme">点击</button>
document.getElementById("clickme").onclick = function(){}

5.3 阻止事件的默认行为

行为return false即可

<a href="xxx" onclick="return false"></a>

5.4 阻止事件的传播（冒泡行为）

点击包裹在内部的标签，不想让外部标签执行方法

event.stopPropagation();

六、JavaScript的BOM对象

6.1 什么是BOM

首先，什么是BOM？BOM的解释是：

1. BOM即浏览器对象模型。
2. BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
3. 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
4. BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
5. BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

使用BOM，开发者可以操控浏览器显示页面之外的部分。而它最独特的地方，就是问题最多的地方，激素它唯一一个没有相关标注的javascript实现。总体来说，BOM主要针对的是浏览器窗口和子窗口，但是通常会把任何特定于浏览器的扩展都归于在BOM的范畴内。下面是一些拓展：

1. 弹出新浏览器窗口的能力。
2. 移动、缩放和关闭浏览器窗口的详近信息。
3. navigator对象，提供关于浏览器的详尽信息。
4. location对象，提供浏览器加载页面的详尽信息。
5. screen对象，提供关于用户屏幕分辨率的详尽信息。
6. performance对象，提供浏览器内存占用、导航行为和时间统计的详尽信息。
7. 对cookie的支持

6.2 window对象方法

警告框window.alert("")
确认框window.confirm("") 确定true 取消false
输入框window.prompt("") 确定返回内容 取消返回null

open方法
window.open("https://www.baidu.com/"); 浏览器打开新的网址，原页面还在
window.open(/jshtml/index.html); 打开系统内页面

计时器方法

延时执行方法体内功能后就停止
var a = setTimeout(fn, 毫秒值)
clearTimeout(名)

隔多少毫秒循环执行，所以最好设置停止条件
var a = setInterval(fn, 毫秒值)
clearInterval(名)

6.3 location对象方法

获取当前url页面的web站信息
location.hostname返回web 主机的域名
location.pathname返回当前页面的路径和文件名location.port返回web主机的湍口(8O或443)
location.protocol返回所使用的web协议http://或https://
location.href("xxxxx") 此页面跳转到某个页面

6.4 history对象方法

页面的前进后退
onclick="history.back()" 后退
onclick="history.forward()" 前进
onclick="history.go(-1)" 后退
onclick="history.go(1)" 前进

6.5 screen对象方法

可获得用户显示器屏幕大小，然后针对性的做页面调整

七、JavaScript的DOM

7.1 什么是DOM？

一个html页面就是一棵DOM树。一个html标签就是一个元素节点，一个元素节点内包含 属性节点 和 文本节点。我们可以对这 三种 进行增删改查的操作

7.2 常用DOM操作

getElementById

getElementsByTagName

getElementsByName

元素.firstChild 获取此元素下的第一个元素节点
元素.lastChild  获取此元素下的最后一个元素节点

元素.getAttribute("x") 获取属性值
元素.setAttribute("属性名", "属性值") 

节点的增删改查：
元素.appendChild("x") 末尾增
元素.insertBefore("x") 头部增
元素.removeChild("x") 删
元素.replaceChild("x") 改
元素.insertHTML 查
元素.insertHTML() 新增

元素的兄弟元素：
previousSibling()上一个兄弟元素
nextSibling()下一个兄弟元素

八、学习总结XMIND