var: //全局作用域
let: //块级作用域
const: //用来定义常量 必须初始化 const a =2
BOM: //浏览器对象模型，核心是window
DOM: //文档对象模型
window.onload: //当文档和资源都加载完后调用(只能写一个)
window.write(): //操作标签body内容，会覆盖已有内容
$(document).ready(): //当网页中所有的DOM结构绘制完毕就执行,jquery中用法，可简写为$(function(){})
charCodeAt() //返回指定位置的字符编码
charAt() //返回指定位置的字符字符串
parseInt() //转换为number类型，整数
parseFloat() //转换为number类型，可以保留小数
null //访问一个不存在对象返回的值，空对象
undefined //访问一个声明完没有赋值的变量返回的值，空变量
arguments //表示当前函数的所有实参集合 console.log(arguments)
this //当前触发事件
evel() //计算一个字符串并执行里面的JS代码
/* 定时器 */
setInterval(函数,间隔时间); //重复执行，隔某个时间就执行一次
setTimeout(函数,间隔时间); //执行一次，延迟某个时间后执行
clearInterval(定时器ID) | clearTimeout(定时器ID); //清除定时器
// 改变this指向
call() 改变函数中的this指向
函数名.call(this指向,参数....)
fun.call(document.body)
fun.call(document.body,10,20) //函数有参时
apply() 用法与call()一致
fun.apply(document.body,[10,20]) //函数有参时1.js时间对象
此模块已分离至：JS中-常用时间对象
2.js字符串方法
此模块已分离至：JS中-字符串-常用方法
查询字符串：
截取字符串：
分割字符串：
替换字符串：
大小写转换：
其他：
trim() 去除首尾空格
seach() 查询，与indexOf()用法一致
match() 排除字符串中符合条件的组成一个新的数组返回
3.数组对象
此模块已分离至：JS中-数组对象-常用方法
创建数组：
字面量方式创建：var a = [1,2,3,4]
构造函数创建：var arr = new Array(1,2,3,4)
数组方法：
数组排序：
对象操作例子：
let arr = { aaa:123 , bbb:222 , ccc:333}
数组的迭代(遍历)方法：
4.数学对象
此模块已分离至：JS中-常用数学对象
其他不常用的点此查看
5.DOM操作
获取节点：
父节点.children 获取子节点，返回子元素集合
父节点.childNodes 获取子节点
子节点.parentNode 获取直接父节点
子节点.offsetParent 获取定位父节点
父元素.firstChild 获取父元素中的首尾节点 ie可用
父元素.firstElementChild 获取父元素首尾节点 标准浏览器专用
元素.nextSibling 获取下一个兄弟节点
元素.nextElementSibling 获取下一个兄弟节点 获取前一个兄弟节点
元素.previousSibling 获取前一个兄弟节点
元素.previousElementSibling 获取前一个兄弟节点 (获取前一个兄弟节点)
节点.nodeName 获取标签节点的标签名
节点.nodevalue 获取文本节点内容
节点.nodeTtpe 获取节点类型
创建节点：
document.createElement(标签) 创建标签
document.createTextNode(文本) 创建文本
添加节点：
父元素.appendChild(标签) 在父元素末尾添加
插入节点：
父元素.insertBefore(节点) 在某个元素之前插入
删除节点：
元素.remove() 移除元素
父元素.removeChild(子节点) 移除元素
替换节点：
父元素.replaceChild(新节点,被替换的节点)
复制节点：
节点.cloneNode(true) 默认false,只复制标签不复制内容，true复制标签和内容
获取和设置属性值：
标签.getAttribute(属性名) 获取属性 oLi.getAttribute(‘id’)
标签.setAttribute(属性名,属性值) 设置属性
操作标签内容：
标签.innerHTML = “” ; 设置标签内容
input.value = “” ; 设置表单内容
标签.style.color = “red” ; 设置样式
标签.className = “” ; 设置class
6.操作表单
提交事件 form.onsubmit 提交事件时触发
oForm.onsubmit = function(){
//如果值为空，不允许提交
if(oForm.user.value == ''){
return false
}
}
重置事件 form.onreset
获取焦点 form.onfocus
失去焦点 form.onblur
//获取焦点事件
oForm.user.onfocus = function(){
this.style.background = 'pink'
}
//失去焦点
oForm.user.onblur = function(){
this.style.background = ''
}
input.focus(); //打开界面input直接获取焦点
input.blur();
input.select(''); //默认选中
oForm.submit(); //提交
oForm.reset(); //重置
7.BOM-window对象
window.alert(''); //警告框
window.confirm('是否开始'); //带确认的框，返回true或false
window.prompt('请输入'); //带输入的对话框，确认返回输入的值，取消null
window.open(url); //打开新页面 window.open("http://osuu.net", "_blank", true)
window.close(); //关闭窗口
window.location.herf; //返回当前加载页面的完整url
window.location.search; //返回url中查询字符串，以?开头
window.location.reload(); //重新加载页面
history.go(0); //刷新页面 -1上一页 1后一页
navigator //获取浏览器信息 详情看文档这里就不多写了
8.位置属性
元素.clientWidth / .clientHeight 可视宽高 width+padding
元素.offsetWidth / .offsetHeight 占位宽高 width+padding+border
元素.offsetTop 当前元素的顶部到定位父元素的距离，没有则到body的距离
……
元素.scrollTop / .scrollLeft 元素被卷去的宽高
元素.scrollWidth / .scrollHeight 获取元素的实际内容宽高
onscroll 滚动事件 window.onscroll = function(){}
onresize 屏幕发生变化时调用
9.事件函数
事件绑定：
function fun (){
…..
}
标准浏览器：元素.addEventListener(“click”,fun,false) 是否捕获true/false
取消：元素removeEventListener(“click”,fun)
IE浏览器：元素.attachEvent(“onclick”,fun)
取消：元素.detachEvent(“onclick”,fun)
阻止事件冒泡：
标准浏览器：ev.stopPropagation()
IE浏览器：ev.cancelBubble = true
var ev = window.event || ev; ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true
阻止事件默认行为：
默认行为：浏览器赋予的默认的操作
阻止默认行为：
标签.事件 return false
标准浏览器：ev.preventDefault();
ie浏览器：ev.returnValue = false
键盘事件：
键盘事件
onkeyup
onkeydown
onkeypress
document.onkeydown = function(ev){
var ev = window.event ||ev;
//console.log(ev.key); //获取键盘按钮，在ie中获取不到 undefined
/* console.log(ev.keyCode); //编码不区分大小写，都是按大写的算
console.log(ev.ctrlKey); //有没有按住ctrl 按--true 没有false
console.log(ev.shiftKey); //有没有按住ctrl 按--true 没有false
console.log(ev.altKey); //有没有按住ctrl 按--true 没有false */
if(ev.ctrlKey && ev.keyCode == 67){
console.log("复制");
}
console.log(ev.key)
}
滚轮事件：
1.添加滚轮事件
标准、ie： 元素.onmousewheel
ff：必须使用事件绑定 标签.addEventListener(“DOMMouseScroll”,fun)
2.获取滚动方向
标准、ie： ev.wheelDelta 120上 -120下
ff : ev.detail -3上 3下
var oDiv = document.getElementsByTagName("div")[0];
//1.添加滚动事件
oDiv.onmousewheel = mouseScroll;
oDiv.addEventListener?oDiv.addEventListener("DOMMouseScroll",mouseScroll):null;
//2.事件触发时调用的事件处理函数
function mouseScroll(ev){
var ev = window.event || ev;
//3.获取滚动方向
var flag = true; //true---上 false---下
if(ev.wheelDelta){
flag = ev.wheelDelta>0?true:false;
}else{
flag = ev.detail>0?false:true;
}
if(flag){ //上
}else{ //下
}
}
事件代理：
//1.事件委托：子元素委托父元素
//将事件添加给父元素,当事件发生的时候，通过冒泡传递给父元素，父元素接收到事件，找到具体的子元素去处理
var oUl = document.getElementsByTagName("ul")[0];
//1.将事件委托父元素
oUl.onclick = function(ev){
var ev = window.event || ev;
//2.通过target找到具体的子元素去处理事件
var target = ev.target || ev.srcElement;
target.style.background = "red";
}
//3.后面添加的标签也可以实现功能，可以发生在未来
oUl.innerHTML += "
10.面向对象
new操作符都做了什么？
1.创建了一个空对象
2.让this指向这个空对象
3.让空对象的_proto_指向构造函数的prototype
4.隐式的返回创建的对象
面向对象的创建方式：
1.字面量创建 ： （适合创建单个对象，多个会代码冗余）
2.工厂模式创建
3.构造函数创建 ： （解决类型识别问题，但会造成浪费内存）
4.原型创建
5.实例创建
6.混合创建
面向对象的继承方式：
1.原型链继承(不能传参)
2.对象冒充继承
3.混合继承
闭包：
能够读取其他函数内部变量的函数，函数里面套函数，内部函数访问外部函数变量，在本质上，闭包是将函数内部与函数外部连接起来的桥梁
特点：变量会一直存储在内存中，类似全局变量，避免全局污染
缺点：浪费内存
- 最新
- 最热
只看作者