已经学了一段时间javaScript,在针对性的学习这块儿的时候，认为js就是属性、事件、方法，的混合使用。下面对js做个简单的总结。javascript又称js是一种用来交互的弱类型脚本语言，js大致分为以下几部分。
第一部分变量
在es6之前以var进行声明用来存储一个变化数据，可以用来做一个中转的容器方便以后的开发进行使用js数据类型可分为基本数据类型，引用数据类型
基本数据类型：**Number、String、Boolean、Null、 Undefined**这些类型可以直接操作保存在变量中的实际值。
引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象
注：基本数据类型直接进行存储，而引用数据类型则是将地址存储在栈中（具体的可以看我的引用型数据类型的赋值里面有详细的解释）
Number：用来表示一些数字型的数据主要可以分为浮点数，整数和NAN三种数据
整数顾名思义就是整数没有小数点的数，浮点数即为小数，nan就是非数字类型。数字和纯数字字符串之间也进行转换
Number可以将纯数字字符串转换为数字型
parseInt：可以提取数字的整数部分
paseFloat可以提取数字的整数和小数部分；
String：字符串型用来表示字符串的变量类型
Boolean：布尔类型又称为逻辑数据类型由true和false两部分组成一般用来进行设置一些布尔数据类型的属性的值例如diabled等等。以及状态切换的一种判断
第二部分数组
数组：就是用来表示一组有序数据的集合，分为基本数组和伪数组，伪数组具有数组的一些常用的属性和方法。
定义数组
// var arr=[10,20,30]
var arr = new Array();
var arr0 = new Array(10, 20, 30);
var arr1 = new Array(10);//声明一个长度为10的空数组2.1数组的使用
1.取值，通过索引
var arr=[1,2,12]
console.log(arr[0])2.赋值
var arr=[1,2,12]
arr[0]=23
console.log(arr[0])2.2数组遍历
//数组是一个有序的集合 索引 从0开始
for
for..in
foreach 2.3数组的普通方法
//1.concat 合并数组
var arrx=arr.concat(arr1,arr1,arr1)
var arrx=arr.concat() //复制
console.log(arrx);
//2.push 数组末尾添加元素
//3.splice 删除、添加、替换
// arr.splice(1,1) //删除
// arr.splice(1,3)
// arr.splice(1,0,'hello',"word") //添加
arr.splice(1,1,'hello') //替换
//4.slice 截取数组
var arrx=arr.slice(1,2) //[start,end) 取不到end
//5.pop 删除数组末尾元素
//6.shift 删除数组头部元素
//7.unshift 头部添加元素
//8.indexOf 获取元素在数组中的索引
//9.lastIndexOf
//10.sort 排序
//11.reverse
//12.join
//...2.4数组的迭代方法
//some //every //filter //map //forEach 不能被return或break终止循环 //reduce 累加器 //redudeRight 累加器(自右向左)
第三部分函数
函数就是把一些常用的代码段进行封装，需要的时候进行调用，使之用来简化代码，提高效率。
3.1函数的声明
匿名函数
function(){}
命名函数
function 函数名(){
函数体
}
var 函数名=function(){
函数体
}3.2函数的使用
匿名函数的使用：一般用来设置事件触发函数和作为高阶函数的参数
div.onclick=function(){
}
setInterval(function(){
})命名函数的使用
函数名+（）
3.3高阶函数
高阶函数：可以接收一个函数作为参数的函数
3.3.1回调函数
function show(fn) { //fn回调函数 show:高阶函数
console.log(fn);
}
show(function(){
console.log('hello world');
})3.3.2自执行函数
(function() {
console.log('哈哈哈');
})();3.3.3闭包
闭包：有权在一个函数内访问另一个函数作用域中的变量(返回该函数)
闭包是连通函数内外的一个桥梁，可以实现局部变量常驻内存。
例如
var arr = [];
for (var i = 0; i < 3; i++) {
(function (i) {
arr.push(function () {
console.log(i);
})
})(i)
}
// console.log(arr);
arr[0]()
arr[1]()
arr[2]()3.3.4递归
在函数执行过程中将改变的函数作为参数再传给该函数
//递归
//求阶乘
// function fn(n){
// if(n==1){
// return 1;
// }
// return n*fn(n-1);
// }
// console.log(fn(10));
// 10*fn(9)
打印杨辉三角
for (var i = 1; i < 9; i++) { //行
for (var j = 1; j <= i; j++) {//列
document.write(cal(i, j) + " ")
}
document.write("<br>")
}
//数字的计算
function cal(m, n) {
//第一行、第一列、最后一列
if (m == 1 || n == 1 || m == n) {
return 1;
}
return cal(m - 1, n) + cal(m - 1, n - 1)
}第四部分DOM
4.1找元素
找元素
-
方法
-
getElementById 根据Id查找符合的第一个元素
-
getElementsByClassName 根据classname查找符合的所有元素
-
getElementsByTagName 根据标签名查找符合的所有元素
-
getElementsByName 根据name属性查找元素
-
querySelector 根据选择器来查找符合的第一个元素
-
querySelectorAll 根据选择器来查找符合的所有元素
-
-
DOM节点的属性
-
childNodes 子节点(文本节点和元素节点)
-
children 子节点 元素节点
-
firstChild 第一个子节点
-
lastChild 最后一个子节点
-
parentNode 父节点
-
previousSibling 上一个兄弟节点
-
nextSibling 下一个兄弟节点
-
4.2修改/获取页面的样式
获取样式
-
对象.style.样式名 行内样式
-
getComputedStyle() 获取样式(行内和样式表) 不支持IE8之下
-
currentStyle IE低版本
修改样式
-
节点.style.样式名=值
4.3修改页面的内容
修改文本内容（闭合标签、表单元素）
-
innerHTML innerText
-
value
属性
-
获取
-
节点.属性名
-
节点[属性名]
-
节点.getAttribute(属性名)
-
-
设置
-
节点.属性名=值
-
节点[属性名]=值
-
节点.setAttribute(属性名,值
-
4.4页面节点操作
-
创建节点：
-
createElement 创建元素节点
-
createTextNode 创建文本节点
-
-
增
-
appendChild 末尾追加子元素
-
insertBefore 指定位置插入元素
-
-
删
-
removeChild
-
remove
-
-
改
-
replaceChild() 替换
-
4.5事件
事件的机制：事件不会自动执行，需要触发才可以执行
-
添加事件
-
HTML标签中添加
-
脚本绑定 节点.on-事件名 注意：不能为同一个节点对象添加多个同名事件
-
绑定
-
addEventListener() 不兼容低版本IE
-
attachEvent()
/* 事件兼容性写法 @nodeObj 事件绑定对象 @eventName 事件名称(不含on) @callback 事件函数 */ function addEvent(nodeObj, eventName, callback) { if (nodeObj.addEventListener) { //标准浏览器 nodeObj.addEventListener(eventName, callback, false); return; } nodeObj.attachEvent('on' + eventName, callback) //低版本IE } -
移除事件
-
removeEventListener 用来移除有addEventListener 设置的事件
-
detachEvent 用来移除有attachEvent设置的事件
-
null 用来移除由on设置的事件
-
-
/* 事件移除兼容性写法 @nodeObj 事件绑定对象 @eventName 事件名称(不含on) @callback 事件函数 */ function removeEvent(nodeObj, eventName, callback) { if (nodeObj.removeEventListener) { //标准浏览器 nodeObj.removeEventListener(eventName, callback); return; } nodeObj.detachEvent('on' + eventName, callback) //低版本IE }事件对象、事件流
-
事件对象：是对事件的一个抽象表述。当事件触发时，浏览器会将事件对象传递
-
事件对象的属性：
-
type 事件类型
-
srcElement(IE低版本)/target(标准浏览器) 事件绑定者
-
clientX/clientY 用来获取相对于可视区域的偏移量
-
pageX/pageY 用来获取相对于页面的偏移量
-
screenX/screenY 用来获取滚动的偏移量
-
altKey 是否按下alt键 true/false
-
ctrlKey 是否按下了Ctrl键 true/false
-
keyCode 键码
-
事件对象的兼容性写法
-
e = e || window.event;
-
-
-
-
事件流：事件的传递机制（捕获、冒泡）
-
冒泡：
-
阻止事件冒泡
e ? e.stopPropagation() : window.event.cancelBubble = true
-
-
捕获：
-
-
事件默认行为
-
阻止事件默认行为
-
addEventListener() e.preventDefault() 节点.事件 return false; attachEvent() e.returnVlaue=falseaC
-
-
事件委托 :又可以称为事件代理
-
将事件委托给父元素，子元素触发事件(冒泡机制)
-
box.onclick=function(e){ // console.log(e.target.nodeName); if(e.target.nodeName=='BUTTON'){ alert("哈哈哈哈，终于知道") } // alert("我是一个按钮") } document.querySelector('button').onclick = function () { // box.innerHTML =box.innerHTML+ "<button>按钮</button>"; var btn = document.createElement('button') btn.innerHTML = '按钮' box.appendChild(btn) } -
滚轮事件
-
onmousewheel 谷歌、IE
-
wheelDelta 上：正值 下：负值
var box = document.querySelector("div"); box.onmousewheel = function (e) { // console.log(e.wheelDelta);//上 正值 下：负值 // console.log(e.wheelDelta); if (e.wheelDelta > 0) { console.log(1,this.offsetHeight); this.style.height = this.offsetHeight - 5 + 'px' } else { console.log(2,this.offsetHeight); this.style.height = this.offsetHeight + 5 + 'px' } } -
-
addEventListener("DOMMouseScroll") 火狐
-
detail 上：负值 下：正值
//火狐 box.addEventListener("DOMMouseScroll", function (e) { // console.log(e.wheelDelta);//上 正值 下：负值 // console.log(e.detail); // 上：负值 下：正值 if (e.detail < 0) { console.log(1, this.offsetHeight); this.style.height = this.offsetHeight - 5 + 'px' } else { console.log(2, this.offsetHeight); this.style.height = this.offsetHeight + 5 + 'px' } }) -
-
-
其它事件：
-
onfocus 聚焦事件
-
onblur 失焦事件
-
onresize 尺寸改变
-
....
-
-
-
第五部分BOM
bom 浏览器对象是浏览器自带的一些属性方法的集合
5.1定时器
自动执行定时器需要手动关闭不会自动关闭，每隔一段时间会自动执行
setInterval(function(){
},1000)
function：自动执行的函数
1000：间隔时间（以ms为单位）
一次执行函数只会执行一次执行以后自动停止不需要手动关闭
setTimeout(function(){
}，1000)
function：自动执行的函数
1000：间隔时间（以ms为单位）
5.2this指向
在事件函数中this指向事件的调用者
div.onclick=function(){
console.log(this);
}在函数中this指向window
function da() {
console.log(this);
}
da();在构造函数中this指向函数的调用者
function Ma(name) {
this.name = name
console.log(this);
}
var xm = new Ma('小明')
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
