JS
核心（ECMAScript）
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
引入额外的JS文件
<script src="myscript.js"></script>
结束符
JavaScript中的语句要以分号（;）为结束符。
变量
声明变量使用 var 变量名; 的格式来进行声明
var name = "Alex";
var age = 18;
变量名是区分大小写的。
ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。
常量
ES6新增const用来声明常量。一旦声明，其值就不能改变。
const PI = 3.1415;
JavaScript拥有动态类型
var x; // 此时x是undefined
var x = 1; // 此时x是数字
var x = "Alex" // 此时x是字符串
数值(Number)
JavaScript不区分整型和浮点型，就只有一种数字类型。
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123
还有一种NaN，表示不是一个数字（Not a Number）。
常用方法：
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
字符串(String)
var a = "Hello"
var b = "world;
var c = a + b;
console.log(c); // 得到Helloworld
常用方法：
方法 说明
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.concat(value, ...) 拼接
.indexOf(substring, start) 子序列位置
.substring(from, to) 根据索引获取子序列
.slice(start, end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割
区别于Python，true和false都是小写。
布尔值是false的有
空字符串 0 null undefined NaN
null表示值是空，一般在需要指定或清空一个变量时才会使用，如name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined
还有就是函数无明确的返回值时，返回的也是undefined。
数组（类似于python里面的列表）[]
typeof ==> object
自定义对象（类似于python里面的字典）{}
常用方法：
方法 说明
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素 得到的是被移除的元素
.slice(start, end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串
.concat(val, ...) 连接数组
.sort() 排序
重点
.forEach() 将数组的每个元素传递给回调函数
var l=[111,222,333,444]
l.forEach(function(value){console.log(value)},l)
l.forEach(function(value,index,arr){console.log(value,index,arr)},l)
111 0 (4) [111, 222, 333, 444]
222 1 (4) [111, 222, 333, 444]
333 2 (4) [111, 222, 333, 444]
444 3 (4) [111, 222, 333, 444]
index:排序 arr：来自于谁
.splice() 删除元素，并向数组添加新元素。
l.splice(0,3,777)
先删除0-3位置（顾左不顾右）的数据，再添加777
.map() 返回一个数组元素调用函数处理后的值的新数组
l.map(function(value){console.log(value)},l)
111
222
333
444
a.map(function(value,index){return value*2},a)
(4) [222, 444, 666, 888]
运算符
+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;
res1;
10
res2;
12
这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！
1 == “1” // true 弱等于
1 === "1" // false 强等于 必须完全相等
&& 与
|| 或
！ 非
流程控制（if-else）
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
for
for (var i=0;i<10;i++) {
console.log(i);
}
while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
function(形参1，形参2){函数体代码}
函数中的arguments参数
复制代码
function add(a,b){
console.log(a+b);
console.log(arguments.length);
console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}
add(1,2)
箭头函数
var func1 = v =>v; 箭头左边是形参 右边是返回值
var func1 = function(v){
return v
}
创建对象：
var person=new Object(); // 创建一个person对象，此时为空"字典"
person.name="Alex"; // person对象的name属性
person.age=18; // person对象的age属性
Date对象
let d1 = new Date()
d1.toLocaleString()
'2021/8/7 下午10:03:07'
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
VM1035:2 2004/3/20 上午11:12:00
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); loads 反序列化
// 对象转换成JSON字符串
var str = JSON.stringify(obj1); dumps 序列化
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
// 正则校验数据
reg1.test('jason666')
true
reg2.test('jason666')
true
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
['s', index: 5, input: 'egondsb dsb dsb', groups: undefined]
s1.match(/s/g)
(3) ['s', 's', 's']
BOM是指浏览器对象模型，通过JS代码操作浏览器。
DOM是指文档对象模型，通过它，可以访问HTML文档的所有元素，通过JS代码操作标签。
window对象
window 对象指的就是浏览器窗口
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px')
新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口大小和位置
navigator对象（了解即可）
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息(掌握)用来表示当前是否是一个浏览器
navigator.platform // 浏览器运行所在的操作系统
window.history 对象包含浏览器的历史。
浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
history.forward() // 前进一页
history.back() // 后退一页
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
警告框
alert("aaa");
确认框（了解即可）
confirm("aaa")
提示框（了解即可）
prompt('aaa')
过一段时间之后触发
t=setTimeout(func,3000);3秒后执行函数
clearTimeout(t)取消定时任务
每隔一段时间触发一次
setInterval()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：
setInterval("JS语句",时间间隔)
直接查找(必会)
id查找
document.getElementById('')
类查找
document.getElementsByClassName('')
标签查找
document.getElementsByTagName('')
间接查找(熟悉)
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
创建节点
语法：
createElement(标签名)
示例：
var divEle = document.createElement("div");
添加节点
语法：
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
示例：
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
删除节点：(了解)
语法：
获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
替换节点：（了解）
语法：
somenode.replaceChild(newnode, 某个节点);
设置属性：(掌握)
somenode.setAttribute( ,url)
属性节点
获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1" 只拿文本，不识别html标签
divEle.innerHTML="<p>2</p>" 标签和文本全都要
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
