javascript学习小结
已经学了一段时间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("
")}//数字的计算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+ "";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 = nameconsole.log(this);}var xm = new Ma('小明')以上就是本人对js全部总结
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！