版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Stream_who/article/details/82961515
六、JavaScript常用对象
1.Array(对象用于在单个的变量中存储多个值)
1) 属性
（1）length 返回数组中元素数目
（2）constructor 返回对创建此对象的数组函数的引用
（3）prototype 使您有能力向对象添加属性和方法
2) 方法
（1）push() 向数组的末尾添加一个或更多元素，并返回新的长度
（2）pop() 删除并返回数组的最后一个元素
（3）shift() 删除并返回数组的第一个元素
（4）join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
（5）slice() 从某个已有的数组返回选定的元素
（6）sort() 对数组的元素进行排序
（7）splice() 删除元素，并向数组添加新元素
（8）reverse() 颠倒数组中元素的顺序
（9）contact() 连接两个或更多的数组，并返回结果
（10）toString() 把数组转换为字符串，并返回结果
（11）valueOf() 返回数组对象的原始值
2.String
1) 属性
（1）length 返回字符串的长度
（2）constructor 对创建该对象的函数的引用
（3）prototype 允许您向对象添加属性和方法
2）常用方法
（1）replace() 换与正则表达式匹配的子串
（2）slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
（3）split() 把字符串分割为字符串数组
（4）indexOf() 检索字符串
（5）charAt() 返回在指定位置的字符
（6）substr() 从起始索引号提取字符串中指定数目的字符
（7）substring() 提取字符串中两个指定的索引号之间的字符
3.Date
1）常用方法
（1）Date() 返回当日的日期和时间
（2）getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
（3）getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
（4）getFullYear() 从 Date 对象以四位数字返回年份
（5）getTime() 返回 1970 年 1 月 1 日至今的毫秒数
（6）getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)
（7）setDate() 设置 Date 对象中月的某一天 (1 ~ 31)
（8）setTime() 以毫秒设置 Date 对象
（9）toString() 把 Date 对象转换为字符串
4.Math
1) 属性
（1）PI 返回圆周率（约等于3.14159）
（2）E 返回算术常量 e，即自然对数的底数（约等于2.718）
（3）SQRT2 返回 2 的平方根（约等于 1.414）
2）常用方法
（1）abs(x) 返回数的绝对值
（2）ceil(x) 对数进行上舍入
（3）floor(x) 对数进行下舍入
（4）round(x) 把数四舍五入为最接近的整数
（5）random() 返回 0 ~ 1 之间的随机数
（6）sqrt(x) 返回数的平方根
（7）max(x,y) 返回 x 和 y 中的最高值
（8）min(x,y) 返回 x 和 y 中的最低值
（9）pow(x,y) 返回 x 的 y 次幂
5.Number
1）属性
（1）MAX_VALUE 可表示的最大的数
（2）MIN_VALUE 可表示的最小的数
（3）NaN 非数字值
2）常用方法
（1）toString() 把数字转换为字符串，使用指定的基数
七、BOM（Window对象，其他都是Window对象的属性，包括后面介绍的Document对象）
1.Window对象（表示浏览器窗口）
1）所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
2）常用方法
（1）window.open() - 打开新窗口
（2）window.close() - 关闭当前窗口
（3）window.moveTo() - 移动当前窗口
（4）window.resizeTo() - 调整当前窗口的尺寸
3）对话框
（1）alert 弹出一个警告框 ，alert("");
（2）confirm 显示一个确认框，确定返回true,错误返回false, confirm("");
（3）prompt 显示一个带有输入框的确认框，确定返回输入的字符串，错误返回null, prompt("","缺醒文本");
4）计时事件
（1）setTimeout(执行代码，毫秒数) 当到了制定毫秒数后，自动执行功能代码
（2）clearTimeout(定时器) 取消由setTimeout(0设置的定时器
（3）setInterval(重复执行的代码，毫秒数) 按指定周期重复执行功能代码
（4）clearInterval(时间间隔期) 取消由setInterval设置的时间间隔器
2. Screen对象（window.screen 对象在编写时可以不使用 window 这个前缀,下同）
1）screen.availWidth - 可用的屏幕宽度
2）screen.availHeight - 可用的屏幕高度
3）screen.height
4）screen.width
3. Location对象（用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面）
1）常用属性
（1）location.hostname 返回 web 主机的域名,同location.host
（2）location.pathname 返回当前页面的路径和文件名
（3）location.port 返回 web 主机的端口 （80 或 443）
（4）location.protocol 返回所使用的 web 协议（http:// 或 https://）
（5）location.href 属性返回当前页面的 URL
（6）location.search 设置或返回从问好（？）开始的URL
（7）location.hash 设置或返回从井号（#）开始的url
2）常用方法
（1）location.assign() 加载新的文档
（2）reload() 重新加载当前页面
（3）replace(newURL) 用新的文档替换当前文档
4. History对象（包含浏览器的历史）
1）常用方法
（1）history.back() 加载历史列表中的前一个 URL,在浏览器中点击后退按钮是相同的
（2）history.forward() 加载历史列表中的下一个 URL
（3）hisotry.go() 返回某个具体的页面
5. Navigator对象（包含有关访问者浏览器的信息）
1) 常用属性
（1) navigator.appName 返回浏览器的名称
（2）navigator.appCodeName 返回浏览器的代码名
（3）navigator.appVersion 返回浏览器的平台和版本信息
（4）naviagtor.cookieEnabled 返回浏览器中是否启用cookie的布尔值
（5）navigator.platform 返回运行浏览器的操作系统平台
八、DOM基本操作(window.document)
1.在 HTML DOM （文档对象模型）中，每个部分都是节点
1）文档本身是文档节点
2）所有 HTML 元素是元素节点
3）所有 HTML 属性是属性节点
4）HTML 元素内的文本是文本节点
5）注释是注释节点
2.元素节点属性
1）document.getElementById('box').innerHTML 设置或返回元素节点的内容
2）nodeName 获取节点的名称，是只读的
3) nodeValue 设置或返回元素值
4) nodeType 节点的类型，是只读的。1，表示元素，2表示属性，3表示文本，8表示注释，9表示文档
5) style 设置或返回元素的 style 属性
3.获取节点
1）document
（1） document.getElementById(元素ID) 通过元素id获取节点
（2）document.getElementByName(元素name属性) 通过元素name属性获取节点
（3）document.getElementsByTagName(元素标签) 通过元素标签获取节点
（4）document.write() 向文档写 HTML ，（只是为了记住）
2）节点指针
（1）父节点.firstChild 获取元素的首个子节点
（2）父节点.latsChild 获取元素的最后一个子节点
（3）父节点.childNodes 获取元素的子节点列表
（4）兄弟节点.previousSibling 获取已知节点的前一个节点
（5）兄弟节点.nextSibling 获取已知节点的后一个节点
（6）子节点.parentNode 获取已知节点的父节点
4.节点操作
1）创建节点
（1）document.createElement（元素标签） 创建元素节点
（2）document.createAttribute（元素属性） 创建属性节点
（3）document.createTextNode(w文本内容) 创建文本节点
2）插入节点
（1）appendChild(所添加的新节点) 向节点的子节点列表的末尾添加新的子节点
（2）insertBefore(所要添加的新节点，已知子节点) 在已知的子节点前插入一个新的子节点
3）替换节点
（1）replaceChild(要插入的新元素，将被替换的老元素) 将某个子节点替换为另一个
4）复制节点
（1）需要被复制的节点.cloneNode(true/false) 创建节点的副本，true复制当前节点及其所有子节点，false仅复制当前节点制
5）删除节点
（1）removeChild(要删除的节点) 删除制定的节点
5.属性操作
1）获取属性
（1）元素节点.getAttribute(元素属性名) 获取元素节点中指定属性的属性值
2）设置属性
（1）元素节点.setAttribute(属性名，属性值) 创建或改变元素节点的属性
3）删除属性
（1）元素节点.removeAttribute(属性名) 删除元素中的指定属性
九、JavaScript事件
1.事件流（事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流）
1）事件捕获 Document-->Element(html)-->Element(body)-->Element(div)
2）事件冒泡 Element(div)-->Element(body)-->Element(html)-->Document (IE9+/现代浏览器冒泡到window对象)
2.事件处理程序（也叫事件句柄，响应某个事件的函数就叫事件处理程序，事件处理程序的名字以"on"开头）
1）html事件处理程序——事件直接加在html元素上
<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
alert("clicked!");
}
</script>
注意： （1）通过event变量可以直接访问事件本身，比如onclick="alert(event.type)"会弹出click事件
（2）this值等于事件的目标元素，这里目标元素是input。比如 onclick="alert(this.value)"可以得到input元素的value值
2）DOM0级事件处理程序——把一个函数赋值给一个事件处理程序属性
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
myBtn.onclick=function(){
alert("clicked!");
}
</script>
注意： （1）这种方法简单而且跨浏览器，但是只能为一个元素添加一个同类型事件处理函数
（2）因为这种方法为元素添加多个事件处理函数，则后面的会覆盖前面的
（3）删除事件处理程序：myBtn.onclick=null;
3）DOM2级事件处理程序
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
myBtn.addEventListener("click",function(){
alert("hello");
},false);
myBtn.addEventListener("click",function(){
alert("world");
},false);
</script>
注意：
（1）DOM2级事件处理程序可以为一个元素添加多个事件处理程序
（2）定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()，所有的DOM节点都包含这2个方法
（3）这两个方法都需要3个参数：事件名，事件处理函数，布尔值
（4）个布尔值为true,在捕获阶段处理事件，为false，在冒泡阶段处理事件，默认为false
（5）在使用 addEventListener 函数来监听事件时，第三个参数设置为 false，这样监听事件时只会监听冒泡阶段发生的事件
这是因为 IE 浏览器不支持在捕获阶段监听事件，为了统一而设置的，毕竟 IE 浏览器的份额是不可忽略的
（6）删除事件处理程序 removeEventListener（参数同add的必须一模一样） 最好把事件处理程序保存在一个变量中，要不然删除不了
3.事件对象（event）（在触发DOM上的事件时都会产生一个对象）
1) 触发事件，this就是该元素，函数会默认传入一个event
2）事件在浏览器中是以对象的形式存在的，即event
3）触发一个事件，就会产生一个事件对象event，该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息
4）所有浏览器都支持event对象，但支持方式不同，在DOM中event对象必须作为唯一的参数传给事件处理函数，在IE中event是window对象的一个属性
5）DOM0级和DOM2级事件处理程序都会把event作为参数传入（可以用e，或者ev或者event）
6）DOM中事件对象重要属性和方法(event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法不一样。但是，DOM中所有事件都有以下公共成员)
（1）属性
a.type 用于获取事件类型
b.target 用户获取事件目标 事件加在哪个元素上。（更具体target.nodeName）
c.bubbles 表明事件是否冒泡
d.detail 与事件相关的细节信息
e.eventPhase 调用事件处理程序的阶段：1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段
（2）方法
a.stopPropagation() 用于阻止事件冒泡
b.preventDefault() 阻止事件的默认行为 移动端用的多
4.常用事件类型
1）UI事件
（1）load() 一张页面或一幅图像完成加载
（2）unload() 用户退出页面
（3）select()
2) 焦点事件
（1）focus() 元素获取焦点时触发,不冒泡
（2）blur() 元素失去焦点时触发，不冒泡
（3）fosunin() 元素即将获取焦点时触发，冒泡
（4）focusout() 元素即将失去焦点时触发，冒泡
3）鼠标事件
（1）click() 单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行
（2）dbclick() 双击鼠标左键时触发
（3）mousedown() 鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发
（4）mouseup() 鼠标按钮被释放弹起时触发。不能通过键盘触发
（5）mouseover() 鼠标移入目标元素上方。鼠标移到其后代元素上时会触发
（6）mouseout() 鼠标移出目标元素上方
（7）mouseenter() 鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发
（8）mouseleave() 鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发
（9）mousemove() 鼠标在元素内部移到时不断触发。不能通过键盘触发。
顺序：
4）键盘事件
（1）keydown() 任意键（按住不放会重复触发）,某个键盘按键被按下
（2）keyup() 某个键盘按键被松开
（2）keypress() 字符键（按住不放会重复触发）,某个键盘按键被按下并松开
参考网址
王福朋的博客
深入浅出 妙用Javascript中apply、call、bind
扫描二维码关注公众号，回复：
3469114 查看本文章
注：文章是经过参考其他的文章然后自己整理出来的，有可能是小部分参考，也有可能是大部分参考，但绝对不是直接转载，觉得侵权了我会删，我只是把这个用于自己的笔记，顺便整理下知识的同时，能帮到一部分人。
ps : 有错误的还望各位大佬指正,小弟不胜感激