[JavaScript知识库]js阶段总结

什么是js

JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码,是一种弱类型语言。

js组成部分：

（1）核心：这一部分主要是js的基本语法。

（2）BOM：（浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

（3）DOM：（文档对象模型），此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（增删改查）

一 同步和异步

同步：按照顺序执行，会阻塞

异步：不一定按照顺序，不会阻塞

注意：同步和异步同时出现，先执行同步

?
 ? ? ? ?//异步
 ? ? ? ?// setTimeout(function () {
 ? ? ? ?// ? ? console.log(1);
 ? ? ? ?// }, 100)
?
 ? ? ? ?// setTimeout(function () {
 ? ? ? ?// ? ? console.log(2);
 ? ? ? ?// }, 50)
?
?
 ? ? ? ?// setTimeout(function () {
 ? ? ? ?// ? ? console.log(1);
 ? ? ? ?// }, 0)
?
 ? ? ? ?// console.log('2');
?
?
 ? ? ? ?function getData(fn) {
 ? ? ? ? ? ?let a;
 ? ? ? ? ? ?setTimeout(function () {
 ? ? ? ? ? ? ? ?a = 10 ? ? ?//服务器给的一份数据 10
 ? ? ? ? ? ? ? ?fn(a)
 ? ? ? ? ?  },1000) 
 ? ? ? ? ? ?// return a;
 ? ? ?  }
?
 ? ? ? ?// var num = getData()
 ? ? ? ?// console.log(num);//??  undefined
 ? ? ? ?//10？？？
?
 ? ? ? ?getData(function(num){ ? ? ?//回调函数
 ? ? ? ? ? ?console.log(num);
 ? ? ?  })
?
 ? ? ? ?//解决异步传参问题 ：回调函数

?二 数组方法

1.concat 合并数组

2.push 数组末尾添加元素

3.splice 删除、添加、替换

4.slice 截取数组

5.pop 删除数组末尾元素

6.shift 删除数组头部元素

7.unshift 头部添加元素

8.indexOf 获取元素在数组中的索引

10.sort 排序

三 数组的迭代方法

some????????若数组中的有一个元素满足条件，则返回true，若都不满足，则返回false
every????????若数组中每一个元素都满足条件，则返回true，有一个不满足，则返回false
filter???????? 过滤 筛选满足条件的数据，组成新数组 返回一个新数组

?var datas = [
? ? ? ? ? ? { no: 1001, name: "关羽", age: 20 },
? ? ? ? ? ? { no: 1002, name: "吕布", age: 33 },
? ? ? ? ? ? { no: 1003, name: "蔡文姬", age: 18 },
? ? ? ? ? ? { no: 1004, name: "张飞", age: 50 }
? ? ? ? ]

? ? ? ? var ps=datas.filter(function (item) {
? ? ? ? ? ? return item.age > 30
? ? ? ? })

map????????对原数组数据进行处理之后，返回新数组
forEach ? ? ? ?不能被return或break终止循环
reduce ? ? ? 累加器
redudeRight ?累加器(自右向左)

四 正则表达式

表单校验和字符串处理

定义正则：

new RegExp()
/规则/修饰符
修饰符： g、i、m
i 忽略大小写
g 全局匹配

|  或

元字符
[] ? ? 任意一个 ? ?  范围： [0-9] [a-z] [A-Z] [0-9a-zA-Z]
^ ? 
    [^] ? 取反
    ^ ? ? 开头
$ ? 结尾
\ ? 转义字符
?
?
\d ? ? ? 数字 ? ? [0-9]
\w ? ? ? 单词 ? ? [0-9a-zA-Z_]
\s ? ? ? 空格、换行、制表符
\D ? ? ? 非数字
\W
\S

?量词

? ? ? ? ? ? ? ? 零或一个{0,1}
+               至少一个 {1，}
* ? ? ? ? ? ? ? 零或多个 {0,}
{m} ? ? ? ? ? ? 出现m次
{m,n} ? ? ? ? ? 大于等于m，小于等于n
{m,} ? ? ? ? ?  大于等于m

?正则对象的方法

• test() 校验字符串是否满足规则， true/false

  五、DOM

• 找元素

  • 方法

    • getElementById

    • getElementsByClassName

    • getElementsByTagName

    • getElementsByName

    • querySelector

    • querySelectorAll

  • DOM节点的属性

    • childNodes 子节点(文本节点和元素节点)

    • children 子节点 元素节点

    • firstChild

    • lastChild

    • parentNode

    • previousSibling

    • nextSibling

• 修改页面的样式

  • 获取样式

    • 对象.style.样式名 行内样式

    • getComputedStyle() 获取样式(行内和样式表) 不支持IE8之下

    • currentStyle IE低版本

    兼容性写法：

     ? ? ? ?//样式的兼容性写法
     ? ? ? ?// function getStyle(o, property) {
     ? ? ? ?// ? ? if (window.getComputedStyle) {
     ? ? ? ?// ? ? ? ? return getComputedStyle(o)[property]
     ? ? ? ?// ? ? }
     ? ? ? ?// ? ? return o.currentStyle[property]
     ? ? ? ?// }
     ? ? ? ?function getStyle(o, property) {
     ? ? ? ? ? ?var tag = 'getComputedStyle' in window
     ? ? ? ? ? ?return tag ? getComputedStyle(o)[property] : o.currentStyle[property]
     ? ? ?  }

  • 修改样式

    • 节点.style.样式名=值

• 修改页面的内容

  • 修改文本内容（闭合标签、表单元素）

    • innerHTML innerText

    • value

  • 属性

    • 获取

      • 节点.属性名

      • 节点[属性名]

      • 节点.getAttribute(属性名)

    • 设置

      • 节点.属性名=值

      • 节点[属性名]=值

      • 节点.setAttribute(属性名,值)

• 页面节点操作

  • 创建节点：

    • createElement 创建元素节点

    • createTextNode 创建文本节点

  • 增

    • appendChild 末尾追加子元素

    • insertBefore 指定位置插入元素

       ? ? ? ?var o = document.querySelector("#box")
       ? ? ? ?var op = document.createElement('p')
       ? ? ? ?op.innerHTML = 'hello world';
       ? ? ? ?o.appendChild(op)
      ?
       ? ? ? ?var op1 = document.createElement('p')
       ? ? ? ?op1.innerHTML = '你好，';
       ? ? ? ?o.appendChild(op1)
      ?
       ? ? ? ?var myLink=document.createElement("a")
       ? ? ? ?myLink.href='#'
       ? ? ? ?myLink.innerHTML='我是超链接'
       ? ? ? ?// o.appendChild(myLink)
       ? ? ? ?o.insertBefore(myLink,op1)

  • 删

    • removeChild

    • remove

  • 改

    • replaceChild() 替换

  • 查

事件委托 :又可以称为事件代理

• 将事件委托给父元素，子元素触发事件(冒泡机制)

  e.target //返回目标节点元素节点

 ? ? ? ?box.οnclick=function(e){
 ? ? ? ? ? ?// console.log(e.target.nodeName);
 ? ? ? ? ? ?if(e.target.nodeName=='BUTTON'){// 判断点击的是什么 ? ? ?   e.target //返回目标节点元素节点
 ? ? ? ? ? ? ? ?alert("哈哈哈哈，终于知道")
 ? ? ? ? ?  }
 ? ? ? ? ? ?// alert("我是一个按钮")
 ? ? ?  }
?
 ? ? ? ?document.querySelector('button').onclick = function () {
 ? ? ? ? ? ?// box.innerHTML =box.innerHTML+ "<button>按钮</button>";
 ? ? ? ? ? ?var btn = document.createElement('button')
 ? ? ? ? ? ?btn.innerHTML = '按钮'
 ? ? ? ?box.appendChild(btn)
 ? ?  }

?

拖拽效果

 ?var o = document.querySelector('div');
?
 ? ? ? ?//鼠标按下
 ? ? ? ?o.onmousedown = function (e) {
 ? ? ? ? ? ?if (o.setCapture) { ? //IE低版本
 ? ? ? ? ? ? ? ?o.setCapture()
 ? ? ? ? ?  }
 ? ? ? ? ? ?e = e || window.event
 ? ? ? ? ? ?//鼠标相对于盒子的位置
 ? ? ? ? ? ?var offsetX = e.clientX - o.offsetLeft;
 ? ? ? ? ? ?var offsetY = e.clientY - o.offsetTop;
 ? ? ? ? ? ?//鼠标移动
 ? ? ? ? ? ?document.onmousemove = function (e) {
 ? ? ? ? ? ? ? ?e = e || window.event
 ? ? ? ? ? ? ? ?o.style.left = e.clientX - offsetX + "px";
 ? ? ? ? ? ? ? ?o.style.top = e.clientY - offsetY + "px";
 ? ? ? ? ?  }
 ? ? ? ? ? ?//鼠标抬起
 ? ? ? ? ? ?document.onmouseup = function () {
 ? ? ? ? ? ? ? ?document.onmousemove = null;
 ? ? ? ? ? ? ? ?document.onmouseup = null;
 ? ? ? ? ? ? ? ?if (o.releaseCapture) {
 ? ? ? ? ? ? ? ? ? ?o.releaseCapture();//释放全局捕获 ? 
 ? ? ? ? ? ? ?  }
 ? ? ? ? ?  }
 ? ? ? ? ? ?return false;//标准浏览器的默认行为
 ? ? ?  }

闭包

闭包：有权在一个函数内访问另一个函数作用域中的变量(返回该函数)

闭包是连通函数内外的一个桥梁，可以实现局部变量常驻内存。

闭包常见面试题：

 ? ? ? ?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]() var lis = document.querySelectorAll("ul li")
 ? ? ? 
?
 ? ? ? ?for (var i = 0; i < lis.length; i++) {
 ? ? ? ? ?  (function (a) {
 ? ? ? ? ? ? ? ?lis[a].onclick = function () {
 ? ? ? ? ? ? ? ? ? ?console.log(a);
 ? ? ? ? ? ? ?  }
 ? ? ? ? ?  })(i);
 ? ? ? ? ? 

?