1 JS类型
1 是一门解释型语言：边执行边解释(预解析？？？) 编译型语言：先全部执行一遍，翻译成机器语言再运行
2 是一门运行在客户端的脚本语言
3 是一门基于对象的语言
4 是一门弱类型语言，声明变量都用 var 变量类型可以相互转换
5 是一门动态类型的语言
1> 代码只有运行到变量(对象)所在的行后才知道变量中存储的是什么，若是对象，就有对象的属性和方法， 如果是变量，就是变量的作用
2> 对象通过点语法可以为对象添加属性和方法
2 命名规则
第一个字符必须是字母、下划线（_）或美元符号（$）
ECMAScript中，变量可以存放两种类型的值：原始值 和 引用值
原始值存放在栈中，引用值存放在堆中、、、、、、、
3 JS预解析
js执行前会进行代码预解析，把变量和函数声明提升到当前作用域的最前面(变量在函数前面)，但不提升赋值与调用
未声明的变量可以进行赋值，若没有赋值就进行运算会报错，声明后没有赋值就进行运算则为NaN
函数和变量同名，函数会覆盖变量
注意：变量的提升只提升声明了的变量，函数有形参的话会在函数内自动声明一个形参
4 JS进制
//js进制表示
var num=10; //十进制
var num2=0o12 //八进制
var num3=0x123 //十六进制
var num4=0b123 //二进制
//其他进制转十进制
parseInt(a,10);按十进制转换
(a,8);八进制转十进制
(a,2);二进制转十进制
(a,16);十六进制转十进制
//十进制转其他进制：
a.toString(16);
a.toString(8);
a.toString(2);
5 隐式类型转换
//隐式类型转换： 隐式转换转换成数字是用函数Number()进行转换
+ //变成字符串
- * / % ++ -- ///变成数字
> < //数字与字符串按数字比；字符串与字符串按编码比
! //把右边的数据类型转换成布尔值
== //比较两边的值
=== //全等 先比较两边的类型再判断值
6 显示类型转换
//显式类型转换：
var a='100'
Number(a) // 将字符串类型a转换成数字类型a
// "" null false 都为0 ；
Number(undefined)---->返回NaN
parseInt(a); // 解析成整数 只能转换成字符串类型，从左往右直至遇到非数字
parseFloat(a); // 解析成整数，带小数
// 转换失败为NaN
num.toString() //被动调用(弱类型转换？) 只能转有意义的变量
//如null undefined不行，会直接报错
String(num1); //主动转换(强类型转换？)
7 NaN与isNaN
NaN:
运算无法返回正确的数值时，就会返回“NaN”值；表示一个无法表示的值，以至于NaN都不等于他自己
表示的是一种运算结果
isNaN();
//判断结果是否为NaN
isNaN(undefined) true
//原理：先用Number()进行强制转换再判断；如果转换成功，则不输出NaN，失败则输出NaN，再进行判断
isNaN(null) false
isNaN('') false
isNaN('123') false
isNaN(123) false
isNaN(false) false
8 转换成布尔值
//转换为布尔值：
var a = ""
"" 0 null NaN undefined 为--->false
其余为--->true
Boolean(a);
9 转义字符
//转义字符：
\0：空字符
\'：单引号
\"：双引号
\\：反斜杠
\n：换行
\r：回车
\v：垂直制表符
\t：水平制表符------->相当于8个空格；前面的输出内容位数是8的倍数，输出8个空格；
小于8的倍数时，补足到8的倍数
\b：退格
\f ：换页
10 数据类型及操作
//原始数据类型：number string null boolean undefined object
基本类型(简单类型)，值类型： number string boolean sumbol
复杂类型(引用类型)： object Array
空类型（基本类型）： null undefined
function 也是一个数据类型
/*基本包装类型：本身是基本类型，但是在执行代码的过程中，如果这种类型的变量调用了属性或者方法，
那么这种变量的类型就不是基本类型，而是基本包装类型，此时这种类型的变量就不再是基本类型，
而是基本包装类型的对象--------->number string boolean,当调用完属性或方法后，该类型就会返回为基本类型
包装数据类型就会被销毁
*/
值类型的值一般在"栈"中存储；
引用类型：对象在堆，引用(地址)在栈
值类型之间的赋值传递的是值（因为栈中存储的是值）
/***** 重点 ******/
/* 引用类型之间的赋值传递的是地址（因为栈中存的就是地址） */
11 运算符
算数运算符：+ - * / %
算术表达式：由算术运算符连接起来的表达式
一元运算符：这个操作符只需要一个操作数就可以运算的符号 ++ --
二元运算符：这个操作符需要两个操作数就可以运算
三元运算符：表达式1？ 表达式2 : 表达式3 ; a > 18 ? a = b : a = c;
复合运算符：+= -= *= /= %=
复合运算表达式：由复合运算符连接起来的表达式
关系/比较运算符：> < >+ <= ==(只比较内容，不比较类型，自动进行隐式转换)
=== ！= ！==
逻辑运算符：&&与 ||或 ！非 可以连接两个表达式
|| 的另外一种判断方式，先判断第一个数，如果为true，则直接返回第一个数，并不判断第二个数的类型反之，如果为false，则直接返回第二个数，并不判断第二个数的类型
12 运算符优先级
[外链图片转存失败(img-OKrd6ZvZ-1562823304542)(E:\资料\运算符优先级.png)]
13 类型判断
var a = 1;
console.log(typrof a );
var arr=[];
console.log( arr instanceof Array );
DOM文档对象模型
一 基础概念
DOM：Document Object Model 文档对象模型
API : 应用程序编程接口，是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得 以访问一组例程分能力，而又无需访问源码，或理解内部工作机制的细节
文档：html页面
html : 展示数据，展示信息
xml : 侧重于存储数据
文档对象：页面中的元素
元素：页面中所有的标签
文档对象模型：定义 为了能够让程序(js)去操作页面中的元素
DOM节点：若文档是一棵树，那么里面的每一个内容就是DOM节点
节点：页面中所有的内容
节点------>元素节点，属性节点，文本节点，注释
元素节点：标签----> div p a ul li…
属性节点：标签里的 title 属性 id 属性等等…
文本节点：标签里的文字
根节点：
1. 显示可提示用户进行输入的对话框:
prompt(text,defaultText);
返回的类型为字符型
text 可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
defaultText 可选。默认的输入文本。
**例：**var name=prompt(“Please enter your name”,“请输入姓名”);
2. 清空浏览器的所有内容并显示新的内容:
document.write(‘123’);
3. 将字符串变成语句执行
eval( string );
二 获取元素
1. 静态方法
1.通过ID名称：--------->返回一个元素的对象
document.getElementById('ad');查找页面上元素的 id=ad 的元素,id是唯一的
2.通过选择器获取元素：--------->返回第一个元素的对象
document.querySelectror('#id .classname')
/* 此选择器特殊，有毒 */
/* 返回文档中与指定选择器或选择器组匹配的第一个 html元素 */
2. 动态方法
1.通过标签-------->返回一个集合---->伪数组
var arr=document.getElementsByTagName('li');查找页面上的所有li
var arr=ad.getElementsByTagName('li');查找ad中的所有li
arr---->[li,li,li] 元素的集合
arr.length---->arr[0]
ad.getElementsByTagName('li')[0] == arr[0]; 查找ad里面的第一个li
2.通过类名------->返回一个集合---->伪数组
document.getElementsByClassName("")
3.通过 name 属性值来获取元素------>返回一个集合---->伪数组
// 一般用于form表单的数据提交？
document.getEIementsByName('name1') 查找页面上所有元素为 name 值为 name1 元素
4.通过选择器获取元素：--------->返回一个集合---->伪数组
document.querySelectrorAll('.class')
3. 获取当前选中的option索引值
var index = selectObject.selectedInddex
三. 属性：
<1> 元素节点属性
//判断元素类型
.nodeType : 只读属性 判断当前元素的元素类型,
alert(oUl.childNodes[0].nodeType); 返回一个数字
元素节点---->1
属性节点---->2
文本节点---->3
//判断节点名字
.nodeName: 节点的名字
标签节点---->大写的标签名，
属性节点---->小写的属性名字，
文本节点---->#text
//节点的值
.nodeValue :可以获取或者更改当前节点的值
标签节点---->null，
属性节点---->属性值，
文本节点---->文本内容
//属性列表集合
.attribute : 只读属性 属性列表集合
alert( oUl.attributes[0].nodeType );
/*****************************************************/
注！！！
节点的页面唯一性？？？
1. 元素节点是唯一的，在另一处添加后，页面上原节点所在的会消失，若存储在数组中，数组内的不会消失
2. 因为节点是唯一的，所以节点数组是动态的，因此在for循环中不能把节点数组的长度当成判断语句，需 另声明一个变量保存原始长度
/*****************************************************/
//父节点
.parentNode : 只读属性 当前节点的父节点
this.parentNode.style.display='none';
//父元素
.parentElement ：父级元素
//子节点
.childNodes : 只读属性 子节点列表的集合,包含元素节点和文本节点(回车符)
alert( oUl.childNodes.length );
//子元素
.children : 只读属性 子元素列表的集合,只包含元素节点
oUl.children[i].style.background = 'red';
//第一个子节点
.firstChild : 只读属性 获取第一个子节点(元素节点和文本节点) IE8为第一个元素节点
//第一个子元素
.firstElementChild : 只读属性 获取第一个子节点(元素节点) IE8不支持
//最后一个子节点
.lastChild
//最后一个子元素
.lastElementChild
//上一个兄弟节点
.previousSibling
//上一个兄弟元素
.previousElementSibling
//下一个兄弟节点
.nextSibling
//下一个兄弟元素
.nextElementSibling
<2> 动态创建元素即操作：
//创建元素
// 自己创建的一个元素时行内元素
div = document.createElement(标签名称); // 注：只是创建一个元素还没有执行，返回一个对象
document.body.appendChild(div); // 在页面中添加创建好的元素
document.write( ); // 页面加载完毕后创建会清除原页面的所有内容
// 页面加载时不会清除内容，可以创建
对象.innerHTML( );
//追加
父级.appendChild(要添加的元素对象);
//注意：appendChild()里面是对象不能加引号，在后面添加
//插入
//在指定元素前插入一个元素
父级.insertBefore(新的元素,指定元素);
//在第一个子元素前插入元素：
div.insertBefor( li , div.fistElementChild );
//删除
父级.removeChild(指定元素); 删除在指定元素
//注：一次44只能删除一个
//替换
父级.replaceChild(新元素,指定元素); 替换指定元素
//注：String中的 replace(指定元素，新元素)；
//复制
Node.cloneNode(true/false);
-----true ：复制节点中的内容
-----false ：只复制当前节点，不复制里面的内容
// 例
var oLi = document.createElement('li');在文档中创建一个li
oLi.innerHTML = oText.value;
// 在oUl中最后一个子节点的后面添加一个子元素oLi;
oUl.appendChild(oLi);
// 注意兼容性
oUl.insertBefor(oLi,oUl.children[0]); 每次在第一个元素前插入一个新元素
// 注:若IE下第二个参数不存在则会报错，其他标准下则会以appendChild()的形式插入
<3> 元素的各种宽度
.style.width //:样式宽 width 只能获取标签本身的样式，不能获取CSS样式
.clientWidth //:可视宽 width(样式宽) + padding 可获取到CSS样式的宽度，
document.documentElement.clientHeight; // 获取屏幕大小
.scrollWidth //:内容宽 width(样式宽) + padding (父级)算内容溢出(隐藏)的宽度和滚动条的宽度
.offsetWidth //:占位宽 width(样式宽) + padding + border 可获取到CSS样式的宽度
screen.height //:屏幕分辨率
//获取浏览器计算后的样式：
window.getComputedStyle(ad)th;!IE6 7 8 // 返回的值带px
ad.currentStyle.width;//不兼容标准浏览器
// ---网页中的各种宽高------
function a(){
document.write(
"屏幕分辨率为："+screen.width+"*"+screen.height
+"<br />"+
"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"网页可见区域宽："+document.body.clientWidth
+"<br />"+
"网页可见区域高："+document.body.clientHeight
+"<br />"+
"网页可见区域宽(包括边线的宽)："+document.body.offsetWidth
+"<br />"+
"网页可见区域高(包括边线的宽)："+document.body.offsetHeight
+"<br />"+
"网页正文全文宽："+document.body.scrollWidth
+"<br />"+
"网页正文全文高："+document.body.scrollHeight
+"<br />"+
"网页被卷去的高："+document.body.scrollTop
+"<br />"+
"网页被卷去的左："+document.body.scrollLeft
+"<br />"+
"网页正文部分上："+window.screenTop
+"<br />"+
"网页正文部分左："+window.screenLeft
+"<br />"+
"屏幕分辨率的高："+window.screen.height
+"<br />"+
"屏幕分辨率的宽："+window.screen.width
+"<br />"+
"屏幕可用工作区高度："+window.screen.availHeight
+"<br />"+
"屏幕可用工作区宽度："+window.screen.availWidth
);
}
<4> 元素的距离
.offsetParent //: 离当前元素最近的一个有定位属性的父节点，若没有定位父级，则默认是body
.offsetLeft //: 当前元素到定位父级的距离(偏移值)
.offsetTop //: 当前元素到定位父级的距离(偏移值)
// .offsetTop .offsetLeft .offsetParent 组合起可获得元素到页面的距离
.clientTop/Left //: 元素的内边距的外边缘和边框的外边缘的距离---相当于计算外边框的大小
.scrollTop /Left //: 内容溢出(隐藏)的Top 和 Left
<5> 页面滚动的距离----不是滚动条的距离
document.documentElement.scrollTop/scrollLeft // 不兼容chrome
// documentElement ----> 对应着 html 标签 而body对应着 body 标签
// document.body.scrollTop/scrollLeft // 不兼容IE
// 当前文档在窗口的移动距离
window.pageYoffset/pageXoffset
// 兼容处理
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYoffset || 0;
alert(scrollTop)；
<6> 设置元素不可用
//元素禁用
disabled:true
false:消除不可用
// 例：ad.disabled = true;
//设置元素只能读取------>只能用于文本框？？？？
readonly:readonly
<7> 自定义属性
//注：只能用于元素节点
//获取自定义属性：
div.getAttribute(属性名); ə'trɪbjuːt
getAttributeNode('id') //获取属性节点？
//设置自定义属性：----可设置自定义属性
div.setAttribute(属性名，属性值);
//删除自定义属性：
div.removeAttribute(属性名);
removeAttribute("class")----->删除类样式，标签内无残留
className=""------>将类名为“”来达到删除效果，标签内有残留
// 另一种方法
//元素的属性名必须是 data-xxx的形式(必须以 data- 开头)
1.例如：
<div data-school=”itcast”></div>
获取 dataset[“school”]
如下格式设置时，以驼峰格式获取
2.例如：
<div data-school-name=”itcast”></div>
获取 dataset[“schoolName”]
// 对象.属性名
ad[i].index=0; 添加索引值 ------->此方式在DOM对象，标签中看不到
ad[i].setAtrribute('indedx',i*10); ------->此方式可以在标签中查看到
<8> 添加删除类样式
/* node.classList.add(类名)
.remove(类名)
.toggle(类名)
.contains(类名)
*/
// 添加类--添加多个
document.querySelector('li').classList.add('redClass');
// 移除类--移除多个
document.querySelector('li').classList.remove('redClass');
// 添加或删除类--先判断，有则删除，无则添加
document.querySelector('li').classList.toggle('redClass');
// 判断是否存在指定类---返回布尔值
var flag = document.querySelector('li').classList.contains('redClass');
<9>.JSON
JSON.parse(str); // 将json格式的字符串转换成数组或者对象 []则是数组 {}则是对象
JSON.stringify(obj); // 将键值对形式的对象转换成json格式的字符串
四. 事件
事件----->事件源，事件名称，事件执行过程
事件名称为：click 注册事件才为onclick
注：循环函数添加事件，推荐使用命名函数，可以节省空间
如果不是循环函数添加时间，推荐使用匿名函数
直接在DOM里绑定事件：
<1>.注册鼠标事件：
onclick //鼠标单击
ondblclick //鼠标双击
onmouseover //鼠标移入
onmouseenter //鼠标移入，不会冒泡
onmouseout //鼠标移出
onmouseleave //鼠标移出，不会冒泡
onmousedown //鼠标按下
onmouseup //鼠标抬起
onmousemove //鼠标移动
// 鼠标右击
//阻止右击时系统默认的弹出框
document.getElementById("btn1").oncontextmenu = function(e){
e.preventDefault();
};
//定义事件的函数
document.getElementById("btn1").οnmοuseup=function(e) {
if (!e) e=window.event;
if (e.button==2) {
// 0 1 2 / 左 中 右
console.log('鼠标右击了')
}
}
对象名.οnclick=function(){ }
对象名['on' + 'click'] = function(){}
onmouseenter（不会冒泡）= onmouseover（会冒泡） 鼠标移入
onmouseleave（不会冒泡）= onmouseout（会冒泡） 鼠标移出
//阻止 a 标签默认的跳转命令：
onclick 事件的结尾加个 return false;
<2>.注册键盘事件：
onkeyup 键盘按键抬起才触发
// 当按键抬起时，按键所代表的值已经显示到文本框中，
onkeydown 键盘按键按下才触发
// 当按键按下时，按键所代表的值还没有显示到文本框中，
// 还可以通过取消默认行为来取消当次按键，使之显示不出来
<3>.焦点事件
onfocus: //当元素获取到焦点时触发
oText.οnfοcus=function(){ };
onblur ://当元素获失去焦点时触发
oText.οnblur=function(){ };
focus()://直接给指定元素设置焦点
oText.focus();
blur() ://取消指定元素的焦点
oText.blur();
select()://选择指定元素里面的文本内容
oText.select();
// 获得当前焦点的元素
let ele = document.activeElement //返回的是当前的元素
<4>.滚动条触发事件
onscroll : 当滚动条滚动的时候触发该事件
<5>.窗口大小触发事件
onresize : 当窗口大小发生变化的时候触发该事件
<6>.事件处理对象
function( e );
// e---->event 事件参数（事件对象），当事件发生时，可以获取到事件的一些相关参数
// IE 8 支持-----> window.event
e.target // 获取到真正触发事件的对象
e.clientX // 相对于浏览器可视区域（窗口）的X轴坐标
e.clientY // 相对于浏览器可视区域（窗口）的Y轴坐标
e.pageX // 相对于整个页面（文档）的X轴坐标 // IE8不支持
e.pageY // 相对于整个页面（文档）的Y轴坐标 // IE8不支持
e.eventPhase // 该属性可以知道当前发生在什么阶段
e.type // 获取事件的名称----->注意，事件名称没有on
e.keyCode // 获取键盘上的按键所对应的ASCLL码
e.preventDefault() // 取消默认行为 ------->配合获取按键值时-当前按键不起作用
e.cancelBubble = true // 阻止事件冒泡
e.stopPropagation() // 阻止事件冒泡 谷歌火狐支持
<7>.内容发生改变触发
onchange：当文本框发生改变并且失去焦点时执行
oninput：当文本框发生改变时直接触发
<8>.绑定事件
可以为同一个元素绑定多个相同的事件----> 与注册事件不能一起用？
**1 .addEventListener**(“事件类型”，事件处理函数，布尔值); // IE8不支持
参数1：事件类型-----事件的名字，没有on
参数2：事件处理函数
参数3：布尔类型-----默认–>false目标阶段+冒泡阶段，true表示捕获阶段+目标阶段
this 指向当前绑定的对象
myDiv.addEventListener(“click”，function(){}，false)
2 .attachEvent(“事件类型”，事件处理函数); // IE8支持，谷歌，火狐不支持
参数1：事件类型-----事件名字，有on
参数2：事件处理函数
this 指向window对象
事件冒泡：当前元素触发事件时，会判断他的所有父级有没有相同的事件名，有则一起触发事件处理函数，此时就成为事件冒泡
事件的三个阶段：1. 捕获阶段（从外往里） 2.目标阶段（执行事件函数） 3. 冒泡阶段（从里往外）
阻止事件冒泡： 1 window.event.cancelBubble = true ; IE特有
2 e.stopPropagation() ; 谷歌火狐支持
3 e.cancelBubble = true ; 阻止事件冒泡
4 return false;
<9>.解绑事件的三种方式
1 btn.onclick = null;
相当于直接把指向事件函数的地址改成null来达到消除事件的目的
2 btn.removeEveneListener(‘没有on的事件’ , 事件函数名称，false) // IE8不支持
注意，这种方式解绑事件的时候需要在绑定事件的时候使用命名函数，不能使用匿名函数，否则解绑失败
3 btn.detachEvent(‘有on的事件’ , 事件函数名称) // IE8 支持，谷歌火狐不支持
<10>.元素拖拽事件
/* 在HTML中默认只有 a 标签和图片 img 具有拖拽效果，如果想要让其他标签具有拖拽效果，
需要加一个行内属性
draggable = "true"
*/
<p draggable = "true" > 123456</p>
'被拖拽元素的触发事件'
// 1. 拖拽元素时触发事件---每隔350毫秒就触发一次该事件
ele.ondrag = function(){ ... };
// 2. 开始拖拽元素时触发
ele.ondragstart = function(){};
// 3. 元素拖拽结束时触发
ele.ondragend = function(){};
'目标元素触发事件'
// 1. 拖拽元素进入目标元素时调用
ele.ondragenter = function(){};
// 3. 拖拽元素停留在目标元素上时调用
ele.ondragover = function(){};
// 4. 在目标元素上松开鼠标时调用
ele.ondrop = function(){};
// 5.拖拽元素离开当前容器范围时调用
ele.ondragleave = function(){};
/*
注意：ondrop 事件在浏览器中是默认阻止的，所以需要阻止 ondragover事件来进行触发 ondrop 事件
e.preventDefault(); 阻止默认行为
*/
<11>.网络连接/断开触发事件
// 1. ononline 网络连通时触发事件
window.addEventListener('online',function(){
alert('网络连通');
});
// 2. onoffline 网络断开时触发事假
window.addEventListener('offline',function(){
alert('网络断开');
});
五. 修改元素/超链接内容
p . innerHTML = '124';
// 在标签中设置新的html标签，有标签效果
// 获取内容时，会获得标签内所有的内容，包括后代标签的标签名和内容
p . innerText = '124';
// 纯文本，有标签也没有标签效果，会把标签用转义符进行转义
// 获取内容时，会获取标签内所有的内容，包括后代标签内的内容，但不包括标签名
// 去除前后空白和换行
p . textContent = '124';
// 过滤标签，获取内容，不去除前后空白和换行
// 修改超链接
// 自带属性可直接调用获取
P.href = 'http://www.baidu.com'；
p.alt = ' ';
p.title = ' ';
p.value = ' ';
p.type = ' text ';
// 注：img.src 和 a.href 获取的是绝对地址，所以需要用 .getAttribute() 方法获取行内属性
// 在表单标签中，如果属性和值只有一个，那么在写Js代码中，DOM操作的时候，这个属性的值设置为 true/false 就行
// 例：p.checked = true/false; // 默认选中项
// 注：给任何值都会选中，checked= 值是一个非空字符串，只有当值为空时，才不会选中
// selected 属性 HTML中可直接写这个属性不用赋值
BOM浏览器对象模型
BOM : Browser Object Model 浏览器对象模型
一 窗口相关
//窗口打开
window.open(地址默认是空白页面，打开方式) 默认新窗口
_self 当前窗口
var NewWindow = window.open();返回打开的新窗口的对象
//关闭当前窗口
window.close() ;
//提示输入框
window.prompt() ;
//确定框
window.confirm() ;
//窗口关闭
NewWindow.close()
Firefox : 无法关闭
chrome : 直接关闭
ie : 询问用户
二 浏览器的信息
<1> 浏览器信息
浏览器信息----->.navigator 对象
//获取浏览器所在的系统平台类型
window.navigator.platform;
//获取用户浏览器的类型
window.navigator.userAgent;
<2> 地址栏信息
**地址栏信息------> .location**
window.location;-----> 是一个对象
//属性
.href URL ---->跳转后将原页面的地址存进浏览器的历史记录中，所以可以后退
.search url ?及后面的内容-----> 搜索的内容
.hash url #及后面的内容 -----> #一般用于锚点？
.host 主机名及端口号
.hostname 主机名
.port 端口号
.pathname 当前页面的相对路径 path:路径
.protocol 协议
//方法：
.assign("http://www.baidu.com"); ---->括号内为跳转的地址
.reload();----->刷新，重新加载
.replace ("http://www.baidu.com"); --->在当前页面替换地址的方式进行跳转，没有后退
.status(); ----->设置或返回窗口状态栏中的文本。
<3> 历史记录
历史记录------> .hostory 对象
window.history.back(); -------> 后退
window.history.forward(); --------> 前进
window.history.go(Number|Url); --------> 直接跳转到指定网址
三 页面加载
1 页面加载完执行
页面加载完执行------{页面上只能执行一个,页面上所有的元素（图片，外部文件等）加载完之后再执行}
window.onload = function () { }
2 页面退出时执行
window.onunload = function () {
// 当用户退出页面时执行
}
四 Web 存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案
1. window.sessionStorage
/* 特点：
a) 设置，读取方便
b) 容量相对于 cookie 教大，为4M
c) 只能存储字符串，可以将对象JSON.stringify() 编码后存储
JSON.stringify(对象名)：把键值对格式的对象转换成 json 格式的字符串
JSON.parse(str); // 将json格式的字符串转换成数组或者对象 []则是数组 {}则是对象
d) 只是单纯的存储数据的容器，不能进行服务器交互
e) 存储空间:当前页面会话期间有效的存储空间
f) 生命周期:当前浏览器窗口，只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在
*/
// 使用
1. 设置数据
window.sessionStorage.setItem(key，value);
2. 获取数据
window.sessionStorage.getItem(key);
3. 删除指定 key 及对应的 value值
window.sessionStorage.removeItem(key);
4. 清空所有
window.sessionStorage.clear()
2. window.localStorage
/* a) 设置，读取方便
b) 容量相对于 cookie 教大，为20M
c) 只能存储字符串，可以将对象JSON.stringify() 编码后存储
JSON.stringify(对象名)：把键值对格式的对象转换成 json 格式的字符串
JSON.parse(str); // 将json格式的字符串转换成数组或者对象 []则是数组 {}则是对象
d) 只是单纯的存储数据的容器，不能进行服务器交互
e) 可以在当前浏览器的所有页面共享数据，但是不能跨浏览器
f) 永久存储在硬盘上，除非手动删除
*/
// 使用
1. 设置数据
window.localStorage.setItem(key，value);
2. 获取数据
window.localStorage.getItem(key);
3. 删除指定 key 及对应的 value值
window.localStorage.removeItem(key);
4. 清空所有
window.localStorage.clear()
五 全屏接口
// 1. 开启全屏模式
元素.requestFullScreen()
// 退出全屏模式
document.cancelFullScreen()
// 判断是否是全屏模式
document.fullScreenElement
// 浏览器兼容性
chrome:webkit firefox:moz ie:os opera: o
// 兼容性解决
if(document.fullscreenElement||
document.wekitfullscreenElement||
document.mozfullScreenElement ||
document.osfullscreenElement||
document.ofullscreenElement){}
//只有火狐的document.mozfullScreenElement需要大写,严格按照W3C语法规则;
4. URLSearchParams
/* URLSearchParams对象是浏览器的原生对象，
用来构造、解析和处理 URL 的查询字符串（即 URL 问号后面的部分）。
它本身也是一个构造函数，可以生成实例。参数可以为查询字符串，起首的问号?有没有都行，
也可以是对应查询字符串的数组或对象。*/
// 方法一：传入字符串
var params = new URLSearchParams('?foo=1&bar=2');
// 等同于
var params = new URLSearchParams(document.location.search);
new URLSearchParams(location.search).get('parkCode')
// 方法二：传入数组
var params = new URLSearchParams([['foo', 1], ['bar', 2]]);
// 方法三：传入对象
var params = new URLSearchParams({'foo' : 1 , 'bar' : 2});
函数和对象
一 函数
1 定义：
封装了一段 可被重复调用执行的代码块
函数无返回值时，接受这个函数，结果是undefined
函数也是一种数据类型
2 函数分类
<1> 命名函数
function getSum() { … }
<2> 匿名函数-----函数自调用
(function() { … })() ;
{ … }
<3> 函数表达式 == 匿名函数
var sum = function() { … };
无参数无返回值的函数
无参数有返回值的函数
有参数有返回值的函数
有参数无返回值的函数
3 回调函数
回调函数：当一个函数作为参数使用时，此函数就是一个回调函数
指 使用者自己定义一个函数，实现这个函数的程序内容，然后把这个函数（入口地址）作为参数传入别人（或系统）的函数中，由别人（或系统）的函数在运行时来调用的函数。虽然函数是你实现的，但是由别人（或系统）的函数在运行时通过参数传递的方式调用，这就是所谓的回调函数。
简单来说，就是由别人的函数运行期间来回调你实现的函数。
4 函数的四种调用模式
1 函数模式 fn()
2 方法模式 o.fn()
3 构造器模式 var f = new foo();
4 上下文模式
foo.call(null); ===>foo();
foo.call(o); ===>o.foo();
5 arguments属性：
arguments----->获取函数调用的时候，传入的实参个数：
arguments----->是一个对象，是一个伪数组
arguments.length------>实参的个数
arguments[索引]------> 获取传入的参数的值;
6 作用域
作用域： 变量的使用范围
全局作用域： 全局变量在任何位置都可以使用的范围
局部作用域： 局部变量只能在某一个地方使用—>函数内
作用域链： 在一个函数中使用一个变量，先在该函数中查找这个变量，若没有，则向上寻找，此次查找的路径称为作用域链
全局变量： 在函数外面声明的变量全部是全局变量
隐式全局变量： 没有 var 声明的变量 为隐式全局变量
局部变量： 在函数内用 var 声明的变量 生存范围为当前函数
let a=0; 声明为局部变量，作用域在当前代码块
7 预解析
预解析： js执行前会进行代码预解析，把变量和函数声明提升到当前所在作用域的最前面(变量在函数前面)，但不提升赋值与调用
未声明的变量可以进行赋值，若没有赋值就进行运算会报错，声明后没有赋值就进行运算则为NaN
函数和变量同名，函数会覆盖变量
8 静态方法与实例方法
**静态方法：**通过构造函数名.方法名调用
构造函数名.name = function(){ … };
**实例方法：**通过实例对象.方法名调用
实例对象名.name = function(){ … };
**静态成员：**通过构造函数添加到属性和方法
构造函数名.属性名
**实例成员：**在构造函数内部通过this添加的属性和方法
实例对象名.属性名
实例对象名.方法名
9 eval()
eval() : 将括号内的字符串解析成表达式来执行
二 对象
0 new obj()
//当运行到 new CreateObject() 时//
'系统'
1.在内存中申请一块空的空间，存储创建新的新的对象
2.把 this 指向 当前对象
3.设置对象的属性和方法的值
4.返回 this 这个对象
5.__proto__内部原型指向构造函数的原型
'实例成员'：在构造函数内部通过this添加的属性和方法
调用：对象名.属性名；对象名.方法名
'静态成员'：通过构造函数添加到属性和方法
调用：构造函数名.属性名
1 定义
面向对象的特性：封装，继承，多态 （抽象性）
Js不是面向对象语言，但是可以模拟面向对象的思想
js是一门基于对象的语言：js里面有很多对象可以直接调用
对象&&true -------->true
true&&对象 -------->对象
<1>对象： 具有 属性和方法（特征和行为）；
具体特指某个事物一组无序属性的集合
属性： 特征
方法： 行为
对象是无序的，数组是有序的
<2>函数和对象区别
函数 - 可以封装一段代码
对象 - 封装一组属性和方法
<3>函数和构造函数的区别
函数名的首字母是否大写
<4>创建对象
new Object();
判断 obj 是不是 Object 类型
console.log(obj instanceof Object); ----->true/false
<5> 内存原理
创建一个对象时，在内存中申请了两个空间，分别是 “栈"和"堆”
栈 存放的是这个对象的地址，
堆 存放的时这个对象的内容
调用时通过对象的地址来找到对象的内容
2 对象实例化
var obj = new Object();
**注意！！：**每次 new 时都会在 堆 内创建一个新的空间
所以 var obj1 = new Object(); 与 var obj2 = new Object();
此时 obj1 与 obj2 所指向的是不同的空间（地址）;
var obj2 = new Dog();
此时，堆里开辟了一个新空间来存放 Dog()，栈中obj2存放的是 Dog() 的地址，原先Object()的地址作废
3 创建对象
1》'调用系统的构造函数创建对象'
'实例化对象：'
var obj = new Object (); //Object:系统的构造函数
//对象都特征---->属性 行为---->方法;
//添加属性：对象.属性名 = 属性值；
obj.name = '小黄';
obj.age = 18;
//添加方法：对象.方法名 = 函数；
obj.eat = funtion ( ) {
console.log("我很帅" + this.name);
};
obj.play = funtion ( ) {
console.log("我真的很帅");
};
//属性调用
console.log(obj.name); ----> '小黄'
console.log(obj.age); ----> 18
//方法调用
obj.eat(); ----> '我很帅小黄'
//一次性创建多个对象，把创建对象的代码封装在一个函数中
//-------------工厂模式
function createObject (name , age){ //create:创造
var obj = new Object ();
obj.name = name';
obj.age = age;
obj.eat = function(){
console.log("我很帅" + this.name);
}
return obj; //返回一个对象
}
var perple = createObjece("小黄",18); //create里的返回值赋值给perple
console.log(perple.name); ---->'小黄'
perple.eat();
2》'自定义构造函数创建对象'（结合第一种的需求通过工厂模式创建对象）
function CreateObject (){
this.name = '小黄';
this.age = 18;
this.eat = function ( ) {
console.log("我很帅" + this.name);
};
}
var a =new CreateObject();
/-----------注意-----------/
//当运行到 new CreateObject() 时//
'系统'
1.在内存中申请一块空的空间，存储创建新的新的对象
2.把 this 赋值给当前对象
3.设置对象的属性和方法的值
4.返回 this 这个对象
'实例成员'：在构造函数内部通过this添加的属性和方法
调用：对象名.属性名；对象名.方法名
'静态成员'：通过构造函数添加到属性和方法
调用：构造函数名.属性名
3》'字面量的方式创建对象'---------缺陷：一次性对象
'字面量'：脚本中按字面意思给出的固定的值，为常量
var obj = {
name:"123",
age:18,
eat:function(){
console.log("123" + this.name);
},
play:function(){
console.log("123" + this.age);
}
}
'注意'：用逗号隔开
修改值：对象.属性名=值；对象.方法名=函数；
对象["属性名"]=值；对象["方法名"]=函数；
调用：对象["属性名"]； 对象["方法名"]()；
对象.属性名;对象.方法名();
'注意'：用 [ ] 调用时，[ ] 内需加 ' ' 否则是undefined
'删除'：delete 对象.属性名/对象.方法名
'点语法'：对象.属性名=值；对象.方法名=函数；
通过 . 可以调用或者添加对象中的属性与值
4》'自调用函数'----声明的同时直接调用--->一次性函数
( function( 形参 ){
console.log("123456");
} )( 实参 );
【注意】函数最后的【 ; 】一定要加上
4 json
定义：格式化的一组"字符串"数据
1》.json格式的数据：一般都是成对的，为键值对
2》.json也是一个对象，数据都是成对的，一般json格式的数据无论是键还是值都用双引号括起来
3》.json 是 js 对象中的一个字符串表示法，
var json={
"name" : "xiang",
"age" : "18",
"sex" : "男"
};
/注意：结尾用 逗号 隔开/
// 调用
对象["属性名"]； 对象["方法名"]()；
对象.属性名 ; 对象.方法名(); //此方法只能调用属性名为常规了，如属性名为！，则会报错
'注意'：用 [ ] 调用时，[ ] 内需加 ' ' 否则是undefined
// for in 遍历 ----> 只能遍历属性，不能遍历方法
for(var key in json) { // key 为变量
// 注意：遍历时必须要用 [ key ] 才行；
console.log(key); name age sex //此时key是json中的属性名
console.log(key[0]); n a s //属性名中下标为0的字符
console.log(key[2]); m e x //属性名中下标为2字符
console.log(key[3]); e undefined undefined // 无 则显示undefined
console.log(json.key); undefined //此时是添加了一个json中的属性名key，未赋值，所以是 undefined
console.log(json[key]); xiang 18 男 //遍历输出key所对应的属性值
console.log(json.name); xiang //直接调用输出
}
for(var key in json) {
console.log(key + "**" + json[key]);
//name**xiang
//age**18
//sex**男
}
5 js中三种对象
1 内置对象----js系统自带的对象
2 自定义对象----自己定义的构造函数创建的对象
3 浏览器对象----BOM
内置对象：Math Date String Array Object
<1>实例对象：通过构造函数创建出来的，实例化的对象
<2>静态对象：不需要创建，本身就是一个对象，直接通过这个对象名调用即可
实例方法必须通过实例对象调用
静态方法必须通过（大写的）对象调用
6 Object.is()
Object.is() 判断两个值是否相同。如果下列任何一项成立，则两个值相同：
这种相等性判断逻辑和传统的 == 运算符所用的不同，== 运算符会对它两边的操作数做隐式类型转换（如果它们类型不同），然后才进行相等性比较，（所以才会有类似 "" == false 为 true 的现象），但 Object.is 不会做这种类型转换。
这与===运算符也不一样。===运算符（和==运算符）将数字值-0和+0视为相等，并认为Number.NaN不等于NaN。
Object.is('foo', 'foo'); // true
Object.is(window, window); // true
Object.is('foo', 'bar'); // false
Object.is([], []); // false
var test = { a: 1 };
Object.is(test, test); // true
Object.is(null, null); // true
// 特例
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
Array—数组的属性和方法
数组对象 是用于构造函数的全局对象；它是高阶，类似列表的对象
数组 是一种存储数据的结构，用来存储一组有序的数据，
? 数组迭代的方法在运行中时确定元素的索引范围，即：遍历次数运行前的数组长度，并不是运行中改变的数组长度
1 .isArray()
// 判断变量是不是数组类型：
// 1.---instanceof
var obj = [ ];
console.log( obj instanceof Array );
// 2.---.isArray() 判断传递的值是否是一个 Array
console.log(Array.isArray(obj));
2 .indexOf()
// 查找指定元素的位置：
// Array.indexOf(元素值，开始位置); 返回该元素数组中第一次出现的索引值，没有则返回-1
// 不能判断NaN
var arr = [10, 20,30];
var index = arr.indexOf(20)
3 .from()
// 复制一个数组：不是地址传值，是新开辟一个空间
Array.from(数组名);
var arr = [1,2,3,4];
var brr = Array.from(arr);
// 可以将一个类数组转换成一个真正的数组
let arr = {
'0':'a',
'1':'b',
'2':'c',
length:3
}
let arr2 = Array.from(arr); // ['a','b','c']
4 .concat()
// 数组合并
// arr.concat(arr1,arr2);
var arr = [1,2,3,4];
var arr1 = [1,22,3,42];
var arr2 = [1,22,32,4];
var brr = arr.concat(arr1,arr2); // arr与arr1与arr2合并
5 .push()
// 添加或删除数组项：
var arr = [1,2,3];
// 1. 在数组的最后添加一个元素
arr.push(ele)；// 可以有返回值 返回的是当前数组的长度
// 2. 向数组的开头添加一个元素
arr.unshift（ele）; // 可以有返回值 返回的是当前数组的长度
// 3. 去除最后一个元素
arr.pop(); // 可以有返回值 返回的是去除的元素
// 4. 去除第一个元素
arr.shift(); // 可以有返回值 返回的是去除的元素
// 5. 扩展----->最后一个移动到第一个
arr.unshift（arr.pop()）; // 先删除最后一个，再在开头添加该元素
6 .join()
// 数组转字符串
// Array.join(分隔符)
arr.join('分隔符'); // 没有则默认逗号连接，返回一个字符串
7 .reverse()
// 翻转数组
// Array.reverse(); 把数组中的元素颠倒过来
arr.reverse();
// 扩展----->颠倒字符串
str.split('').reverse().join(''); // 先变成数组，再数组翻转，再变回字符串
8 .sort()
// 排序
// Array.sort();
//对数组元素进行排序，因为不稳定，不传函数时按ASCII码进行排序，所以需要在 ( ) 内添加一个函数
var brr = arr.sort( function( a, b ){ if(a>b){ // a-->arr[j] b-->arr[j+1]
return 1 ;
}else if(a==b){
return 0 ;
}else{
return -1;
}
} );
// 原理：相当于冒泡排序中的判断语句用回调函数进行替换来进行判断
9 .slice()
// 数组截取
// Array.slice(索引start，索引end)
var brr = arr.slice(0,5)； // 返回一个新数组
// 从索引start处(包含start)开始，索引end处结束截取字符串；[start，end)
10 .splice()
// 删除/替换/添加多个
// Array.splice( 开始的索引值，删除的个数，替换/插入的值 );
// 在索引值为2的位置 插入'a'，插入后的元素索引为2
arr.splice( 2 , 0 , 'a');
// 在索引值为2的位置删除一项元素
arr.splice( 2 , 1); // 返回一个数组，数组项是删除的元素
// 在索引值为2的位置 删除一项，然后添加一个元素 'b' 来实现替换
arr.splice( 2 , 1 , 'b');
11 .every()
// Array.every(function(currentValue,index,arr), thisValue); 返回值为布尔类型
/* 筛选数组中的每一项进行判断：返回一个布尔值
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，才返回 true。
第一个参数--函数:有三个参数，一是数组项(必选)，二是索引值，三是调用的数组
第二个参数：thisvalue ---> 为一个对象，设置后可以改变第一个参数函数内部的 this 指向
*/
var arr = [1000, 2000,3000];
var flag = arr.every( function( ele , index ){ // 函数内的第三个参数一般不用
// 遍历数组 arr，若有不满足条件的就直接中断执行返回 false
return ele>2000; //返回的是false，因为还有其他的元素比2000小
});
12 .filter()
// Array.filter(function(currentValue,index,arr), thisValue);
// 返回一个新的数组
// 不会改变原数组
// 筛选数组中的每一项进行判断，把满足条件的数组项变成一个新数组的返回
var arr = [1000, 2000,3000];
var newArr = arr.filter( function( ele，index ){ // 第三个参数一般不用
return ele>2000; // 把符合大于2000的数组项组成一个新数组返回
});
13 .map()
// Array.map(function(currentValue,index,arr), thisValue);
// 数组中的每个元素都要执行 map() 方法里的函数或者方法，
// 返回一个新数组
var arr = [1,4,9,16,25];
var brr = arr.map( Math.sqrt()); // 数组中的每个元素有执行了一次开平方
14 .forEach()
// Array.forEach(function(currentValue, index, arr), thisValue);
// 循环遍历每个数组项---相当于for循环
// break return 都不能中断循环？
arr.foeEach( function( ele，index ){
console.log( ele+'======'+index );
});
15 .findIndex()
// Array.findIndex(function(currentValue, index, arr), thisValue)
// 返回满足指定条件的当前元素的索引值
// 如果没有满足条件则返回 -1
// 当遇到 return true，直接中断函数
// 可判断 NaN
var arr = [5000,NaN, 2000,3000,10000];
var flag =arr.findIndex( function(value , index){
return isNaN(value); //---> -1
return Object.is(NaN,value); // 判断特殊类型是否相等
} )
console.log(flag);
16 .find()
// Array.find(function(currentValue, index, arr), thisValue)
// 返回满足指定条件的当前元素的值
// 如果没有满足条件则返回 undefined
// 当遇到 return true. 时，直接中断函数
// 当运行中删除某个元素时，遍历到此元素的位置会返回undefined
var arr = [5000,2000,3000,10000];
var flag =arr.findIndex( function(value , index){
if(value<3000){
return true;
}
} )
console.log(flag);
17 .some()
// Array.some(function(currentValue, index, arr), thisValue)
//根据指定条件遍历每一个数组元素，直到此函数返回 true
//返回一个布尔值
//只有一个条件满足，就返回true
//如果没有满足条件的元素，则返回false。
var array = [1, 2, 3, 4, 5];
var even = array.some(element) {
return element % 2 === 0;
};
console.log(array.some(even));
18 .includes()
// Array.includes(ele,fromIndex )；
// 判断数组是否包含某一个元素，返回布尔值，对NaN有效
// fromIndex:指定位置开始查找
var flag = arr.includes('a');
19 .keys()
// Array.keys() 该方法一般用于对象，数组没多大用处
// 返回一个包含数组中每个索引键的Array Iterator对象。
// 对键名的遍历 values() 是键值的遍历 entries() 是键值对的遍历，返回一个对象
var arr = [1,1,1,1,1,1,1,1,1];
var obj = arr.keys();
for(let key of obj) {
console.log(key); // 0 1 2 3 4 5 6 7 8
}
'注意：'/----------------------------------------------------
for in // 遍历的是数组的索引--即键名
---遍历时会包括数组的原型属性和方法，所以一般用来遍历对象而不是数组
---用 arr.hasOwnPropery(属性) 方法可判断该属性是不是该对象的实例属性
---数组的键名是数字时，for..in循环会转换成字符串获取
---某些情况下，遍历顺序是任意的
for of // 遍历的是数组的元素值
---遍历时不包括数组的原型属性和方法
---遍历数组时只返回具有数字属性的值
String—字符串的属性和方法
string 是基本类型
String 是引用类型，是一个对象
字符串可以看做字符组成的数组，所以可以用 for 循环遍历
字符串特性：不可变性
字符串中的单个值是不可改变的 ----用对象的方式来看待?
字符串的值之所以改变了，是因为字符串的指向改变了，并不是字符串的值改变了
每次字符串的操作都会生成一个新的字符串
var str = "hello";
var str[1] = 'w'
console.log( str ); // 输出为hello
1 .charAt( )
// 查找指定索引值对应的字符
// str.charAt(n)
// 返回值是指定索引位置的字符
// 如果参数 n 超出字符串的最大长度 则 返回 '' 空字符
var str = “123456798”；
console.log(str.charAt(0));
2 .indexOf()
// 字符串查找
// str.indexOf(str1，开始查找的起始位)
// 返回指定字符串第一次出现的索引值
// 查找失败则返回-1
var str = "123456789";
var index = str.indexOf('45');
console.log(index); ----3
3 .lastIndexOf()
// 从后往前字符串查找
// str.lastIndexOf(str1，开始查找的起始位)
// 从后往前，返回指定字符串第一次出现的索引值
// 查找失败则返回-1
// 【注意】--- 返回的索引值是从前往后开始数的
var str = "123456789";
var index = str.lastIndexOf('45');
console.log(index);
4 .concat()
// 字符串合并
// str.concat(str1,str2)
// 将一个或多个字符串合并成一个新的字符串，并返回
var str1 = "1";
var str2 = "2";
var str3 = "3";
var str = str1.concat(str2,str3);
console.log(str);
5 .replace()
// 字符串替换
// str.replace(原字符串，新字符串)
// 返回一个新字符串
var str = "123456789";
var str1 = str.replace('45','0');
console.log(str1);
6 .substr()
// 字符串截取
// str.substr(start);
//--从指定索引值开始截取，包含指定开始索引值，[start
//--返回一个新字符串
// str.substr(start,length)
//--从指定索引值开始截取指定的长度
//--返回一个新字符串
var str = "123456789";
var str1 = str.substr(5); ---6789
console.log(str1)
var str = "123456789";
var str1 = str.substr(2,5); ---34567
console.log(str1)
7 .substring()
// 字符串截取
// str.substring(start)
//--从指定索引值开始截取，包含指定开始索引值，[start
//--返回一个新字符串
// str.substring(start,end)
//--从指定索引值开始截取字符串到指定索引值结束，包含起始值 [start,end)
//--返回一个新字符串
var str = "123456789";
var str1 = str.substring(5);
console.log(str1) ---6789
var str = "123456789";
var str1 = str.substring(2,5);
console.log(str1) ---345
8 .slice()
// 字符串截取
// str.slice(start)
//--从指定索引值开始截取，包含指定开始索引值，[start
//--返回一个新字符串
// str.slice(start,end)
//--从指定索引值开始截取字符串到指定索引值结束，包含起始值 [start,end)
//--返回一个新字符串
// 与substring() 不同的是 slice()方法可以指定负值
var str = "123456789";
var str1 = str.slice(2,-1);
console.log(str1) ---345678
9 .split
//字符串变数组
// str.split(分隔符，保留的个数)
// 返回一个字符串数组
var str = "1234";
var str1 = str.split('');
console.log(str1); =====> ['1','2','3','4']
var str1 = str.split(',');
console.log(str1); =====> ['1234']
var str1 = str.split('',2);
console.log(str1); =====> ['1','2']
10 大小写转换
// 转换成大写
str.toUpperCase();----->直接转换成大写
str.toLocalUpperCase();----->按本地方式转换成大写，有地区语言限制？
// 转换成小写
str.toLowerCase();----->转换成小写
str.toLocalLowerCase();----->转小写
11 去除两端空格
// 去除两端空格
// str.trim()
var str = " 123456789 ";
var str1 = str.trim();
console.log(str); ====> '123456789'
// 去除左边空格
str.trimLeft();
// 去除右边空格
str.trimRight();
12 编码和值互换
// 1. 根据编码返回值
// 此方法是静态方法，所以通过String对象调用
// String.fromCharCode(39033,23431)
var str = String.fromCharCode(39033,23431);
console.log('根据编码返回值： ' + str);
// 2. 根据值返回编码
// 此方法是静态方法，所以通过String对象调用
// str.charCodeAt(0)
// str.charCodeAt(1)
13 字符串填充
------------常用于前导零的填充
// str.padStart(填充后的总长度，要填充的字符)
// 1.在当前字符串的前面进行填充
// 2.如果填充后的总长度<=当前字符串的长度，则不进行填充-即：填充方法失效
var str ='123';
var str1 = str.padStart(5,'0');
console.log(str1);-----> '00123'
14 includes()
// str.includes(char)
// 判断指定字符是否在指定的字符串中，返回布尔值
Math—数字的属性和方法
Math 是静态对象，所以是对象名直接调用
Math：静态对象
Math.PI // 圆周率
Math.random(); // 伪随机数在0~1之间，包括0不包括1---[0,1)
Math.round(3.4); // 自动四舍五入取值
Math.floor() // 向下取整，即小数自动为0加进去
Math.ceil(3.4); // 向上取整，即小数自动为1加进去
Math.abs() // 绝对值
Math.max()/Math.min() // 函数返回一组数中的最大值/最小值
Math.sin()/Math.cos() // 正弦/余弦
Math.sqrt() // 求指数次幂/求平方根
Math.pow(a,b) // 返回 a 的 b次方 的值
num.toFixed(小数位位数) // 指定小数位位数，自动进行四舍五入
随机颜色案例
window.onload = function(){
function getColor() {
var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
var brr = ["#"];
for (i = 0; i < 6; i++) {
brr.push(arr[parseInt(Math.random() * 16)]);
}
return brr;
}
var color = getColor().join('');
console.log(color);
};
Date—系统时间对象
// 获取日期和时间
// 创建系统时间对象
var dt = new Data();
// 获取当前时间
console.log(dt);
// 将传入的时间字符串转换成时间对象
var dt = new Date("2018-11-02"); 2018/11/02
console.log(dt);
// 获取 年 月 日
console.log( dt.toDateString( ) ); // ------> Wed Nov 14 2018
console.log( dt.toLocaleString( ) ); //-----> 2018/11/14 下午3:07:03
console.log( dt.toLocaleDateString( ) ); // ------->2018/11/14
// 获取 时 分 秒
console.log( dt.toTimeString( ) ); // ------>15:06:25 GMT+0800 (中国标准时间)
console.log( dt.toLocaleTimeString( ) ); // 数字格式（分上下午）----> 下午 3:04
// 获取总毫秒数
var dt = new Date();
var dr = new Date("2018-11-02");
var dl = new Date("2018-11-02");
console.log( dt.valueOf() ); // 获取从1970.1.1 0:0:0 到现在的毫秒数
console.log( dt.getTime() ); // 获取从1970.1.1 0:0:0 到现在的毫秒数
console.log( +new Date() ); // 由于浏览器的兼容性问题，会多大约10毫秒
console.log( +new Date(dr) ); // 获取从1970.1.1 0:0:0 到指定时间的毫秒数
console.log(Data.now()); // 获取从1970.1.1 0:0:0 到现在的毫秒数
console.log( dl.getTime() ); // 获取从1970.1.1 0:0:0 到指定时间的毫秒数
// 获取 年 月 日 小时 分钟 秒
var dt = new Date();
// 获取 年
console.log(dt.getFullYear());
// 获取 月
console.log(dt.getMonth()+1) // 国外月份从 0 开始计算
// 获取 日
console.log(dt.getDate())
// 获取星期
console.log(dt.getDay()) // 国外的星期为 0-6
// 获取小时
console.log(dt.getHours())
// 获取分钟
console.log(dt.getMinutes())
// 获取秒
console.log(dt.getSeconds())
// 获取当前的毫秒数，注意：是当前的毫秒数，不是总毫秒数
// 即：当前1秒内的多少毫秒
dt.getMilliseconds();
// 倒计时公式
//注意：是总秒数，不是总毫秒数
d = parseInt(总秒数/60/60/24); // 计算天数
h = parseInt(总秒数/60/60%24); //计算小时
m = parseInt(总秒数/60%60); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数
文件的属性与方法
// 创建文件对象
var file = new FileReader();
// 因为读取是耗时操作，所以是异步
// 文件读取：
// 1. 读取文本文件
file.readAsText():
// 2. 按字节读取文件，并创建一个缓冲区，以二进制保存
file.readAsArrayBuffer()
// 3. 读取文件的内容，当做一个地址保存
file.readAsDataURL()
// 与文件相关的事件
onabort : //文件读取中断时触发
onerror : //文件读取错误时触发
onload : //文件读取成功时触发
onloadend : //文件读取完成时触发(无论成功或者失败)
onloadstart ： //文件开始读取时触发
onprogress : //文件读取的过程中持续触发
扫一扫
4638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
