JavaScript——原生

正则

作用： 用来匹配一段字符串中的一些内容

使用场景： 基本全部用于注册页面, 用户审核和约束用户输入的信息

创建：

1. 使用new 关键字来创建

var reg = new RegExp(/表达式/);

2. 使用字面量的方式来创建

var reg = /表达式/;

检测方法： 正则对象.test(需要审核的字符串)，返回一个布尔类型的值

console.log(reg.test("wsafdafb,mkmc"));

类型：
1. 简单类：

var reg = /abc/;  //表示匹配的字符串中，需要含有abc字符

备注： [] : 不带中括号表示一个整体，需要完全匹配，带上中括号表示任意一个匹配即可

var reg = /[abc]/;

2. 反向类： 表示含有 除了abc以外的任意字符 即可

var reg = /[^abcv]/;

3. 范围类：

1）小写字符的范围：表示 含有 a到z之间任意字符 即可

var reg = /[a-z]/;  

2）大写字符的范围：表示含有 A到Z之间任意字符 即可

//			var reg2 = /[A-Z]/; 

3）数字的范围

var reg3 = /[0-9]/;

4）混合范围

//			var reg4 = /[a-zA-Z0-9]/;

5）预定义类

	   .  匹配换行符以外的任意字符    
	   \w 匹配单词字符(所有的数字字母下划线)   [a-zA-Z0-9_]
	   \W 匹配非单词字符     [^a-zA-Z0-9_]
	   \d 匹配所有数字        [0-9]
	   \D 匹配所有非数字     [^0-9]
	   \s 匹配任意的空白字符
	   \S 匹配任意非空白字符
	   \b 匹配是否到了单词的边界 (开始或者结束) 
	   \B 匹配是否没到单词的边界 (开始或者结束)  

6）字符转义 ：将符号自带的其他含义去掉，只使用符号本身
语法： 在符号前 加 \ 例如： \

7）6. 或 |

var reg2 = /a|b/;    //等同于    [ab]

8） ^ 匹配字符串的开头

var reg3 = /^abc/;

9）$ 写在正则最后面， 匹配字符串结尾

var reg4 = /af$/;

10） ^ 和 $ 同时使用时， 表示严格模式。 只能有这些指定内容

var reg5 = /^abc$/;

11）量词：量词只有一个数字时， 表示 最少位数

var reg6 = /\d{4}/;

备注：

1. 使用严格模式时，不再是最少位置，而是指定位数
2. 量词有两个数字时， 表示一个指定的范围
3. 需要使用严格模式， 否则是 包含指定范围的数字

var reg6 = /^\d{4}$/;
var reg6 = /\d{4,6}/;

4. 正则常见的修饰符：
1） + 匹配1个到多个

var reg6 = /\d+/;

2） * 匹配0个到多个

var reg6 = /\d*/;

3）? 匹配0个或1个

var reg6 = /\d？/;

5. replace（）：

replace(替换目标，新的内容) : 字符串方法
var s = "ding guang";
console.log(s.replace(/d/,"D"));

6. 匹配模式：

g - global : 全局匹配
i - ignoreCase：   忽略大小写
m --    :首次出现的下标
var s7 = "a ba daAdaAdA";
var reg7 = /a/g;
var reg8 = /a/i;
//match :  提取符合正则的内容
console.log(s7.match(reg7));
console.log(s7.match(reg8));

DOM

父节点获取方法：

1. parentNode：获取该节点的父节点
2. .parentElement：获取该节点的父 元素节点

3.   console.log(ul_li[0].parentNode);
4.   console.log(ul_li[0].parentElement);

---

子元素节点的获取方法：

1. childNodes：获取该节点的子节点，获取所有的子节点，不分类型

console.log(ul[0].childNodes);

2. childElementCount：获取并返回 该节点的 子元素节点数量

console.log(ul[0].childElementCount);

3. children：获取到所有的子元素节点

console.log(ul[0].children);

4. firstElementChild：获取第一个子元素节点

console.log(ul[0].firstElementChild);

5. firstChild：获取第一个子节点

console.log(ul[0].firstChild);

6. firstElementChild：获取第一个子元素节点

console.log(ul[0].firstElementChild);

7. lastChild：获取最后一个子节点

console.log(ul[0].lastChild);

8. lastElementChild：获取最后子元素节点

console.log(ul[0].lastElementChild);

---

兄弟节点的获取方法：

1. nextElementSibling：获取该节点的下一个兄弟元素节点

console.log(ul[0].nextElementSibling);

2. nextSibling：获取该节点的下一个兄弟节点

console.log(ul[0].nextSibling);

3. previousElementSibling：获取该节点的 上一个兄弟元素节点

console.log(ul[0].previousElementSibling);

4. previousSibling：获取该节点的 上一个兄弟节点

console.log(ul[0].previousSibling);

---

创建节点：

语法：

var li_new = document.createElement("li");

备注： 元素创建完成后，并不在DOM树中，需要我们手动添加

添加节点：

1. appendChild： 添加到目标里的最后一位

目标.appendChild(内容)
ul[0].appendChild(li_new);

2. insertBefore：将新节点，添加到已有的节点之前

父节点.insertBefore(新的节点，已有的节点)
ul[0].insertBefore(li_new,ul_li[0]);

备注： 添加到的目标，一定是在页面中已经存在的

删除节点：

1. removeChild

指定目标的父元素.removeChild(指定目标)
ul[0].removeChild(ul_li[0]);

2. remove

指定目标.remove()
ul_li[0].remove();

替换节点：

替换目标的父元素.replaceChild(新的元素,被替换的元素); 
ul[0].replaceChild(meng,ul_li[0]);

克隆节点：

// 需要克隆的目标.cloneNode() ，该方法会将克隆体返回
var meng_two = meng.cloneNode();

nodeName： 返回节点名称

nodeValue： 返回节点属性

nodeType： 返回节点类型

闭包

闭包的本质： 它就是个函数

概念： 能够访问其他函数内部变量的 函数

条件：

1. 在函数中嵌套定义另外一个函数
2. 被嵌套的函数(在里面的那个),一定要访问外部函数的变量
3. 被嵌套的函数要返回

原理： 通过作用域链

作用： 能持久化 局部变量, 手动 控制局部变量的回收时间

弊端： 不能够大批量的使用，会造成程序加载过慢. 极容易造成内存泄露

返回的方式：

function big(){
				var c = 10;
				
				//返回的方式1：
//				return function small(){
//					console.log(c);
//				}

//				返回的方式2：
//				return function (){
//					console.log(c);
//				}

				//返回的方式3：
				function small(){
					console.log(c);
				}

				return small;  
				// 函数带着(), 是执行。   不带(), 只是定义
			}
			
			var test =  big();
		    test();

作用域链

作用域链：
先在当前作用域的上下文中查找，找到即执行
如果没有，继续向 上 一层查找，找到即执行。
如查找到全局中，依然没有，报错，阻断程序运行

变量提升：
如果使用了未声明的变量，正常情况会因为找不到而报错
但在使用的下方，出现了它的声明。 会默认将它提升到使用之前。不包括值
先使用，后声明。 该变量的 因变量提升， 可以找到，但值为undefind;

存在的意义： 保证后续任务继续执行，只是失去了 当前功能的值

匿名函数

实质： 没有名字的函数 实质还是一个函数

和普通函数的区别：

1. 普通函数是有函数名的， 函数调用需要使用函数名
2. 匿名函数没有函数名， 无法通过函数名来调用

匿名的作用：

1. 匿名函数可以有效的保证在页面写入js时，不会造成全局变量的污染，就是可以有效的隔离作用域
2. 通常我们希望这个函数，只执行一次，就结束时。使用匿名函数的自调用(也叫立即执行函数)

匿名函数调用的两种方式：

1. 绑定给一个变量 或者一个事件， 通过他们来调用
2. 自调用

    小括号1 ：  里面存放函数的定义
    小括号2 ：  代表着调用函数，里面存放实参	
   // 自调用 写法一 : 官方推荐 的写法
    (function (b) {
        console.log(b+1);
    }(20));

    //写法二 ：
    // (function(a){
    //     console.log(a+10);
    // })(10);

    //写法三：
    // !function () {
    //    console.log("我是自调用的函数");
    // }

    //写法四：
    // [function () {
    //
    // }()]

    //写法五：
    // ~function () {
    //
    // }();

事件对象

this指针的指向问题：

1. 在普通函数外部调用的时候

var a = 20;//   相当于   window.a  = 20
// alert(this); //  指向window
// alert(this.a); // 输出20,  指向 window.a

2. 在普通内部调用的时候

		function text(){
            var a = 10;
            // alert(a);
            // alert(this.a);  // 相当于   window.a
            this.a = 50;
            this.b = function() {
                console.log(this);
            }
        }
        // text(); // text()   相当于  window.text()

3. 和new 构造器结合使用

		var obj1 = new text();
        var obj2 = new text();
        var c = obj1.b;
        console.log(obj2.a);
        console.log(c());

4 对于自执行匿名函数 而言 this的指向 window

备注： 当不希望this指向发生改变的时候，可以定义变量来保存this(例如：拖拽中使用)

event对象补充

如何产生： 在事件发生时，负责处理事件的函数，会接受到一个event对象
备注： 浏览器负责处理事件， js负责告诉浏览器 如何处理

作用： 用来存储 事件源的信息 例如： 鼠标的位置 键盘的编码。
将这些信息提供给开发者， 便于开发者进行编码

event对象的属性：

1. ev.target : 返回 事件源
2. ev.button：　返回鼠标被按下的那个键
3. ev.offsetX : 鼠标在元素上 X轴的位置
4. ev.clientX: 鼠标 在浏览器可视区域 x轴上的位置(左边距)
5. ev.clientY: 鼠标 在浏览器可视区域 y轴上的位置(上边距)
6. ev.keyCode : 返回键盘的编码，以此来确定是哪个键位

事件冒泡与捕获

事件监听：

添加事件监听： addEventListener()

参数1 ： 事件类型
参数2 ： 触发事件后执行的函数
参数3 ： 布尔值 默认值是 false 事件冒泡 ； true 事件捕获

删除事件监听： removeEventListener()

注意：

1. 相同元素调用
2. 相同事件名称
3. 相同函数名(匿名函数不行,需要全局函数)
4. 相同的执行阶段

普通事件绑定和 事件监听的区别：

1. 普通的只能给元素相同类型的事件绑定一个，如果绑定相同的第二个，会将上一个覆盖
2. 事件监听可以给 同一个元素的相同类型事件绑定多个
3. 事件监听可以控制事件的传播方式(冒泡或捕获)
4. 事件监听可以通过删除的方法，来取消事件，而普通绑定只能通过 null来取消

阻止默认事件： ev。preventDefault()

事件委托

原理： 事件冒泡
作用： 可以给多个元素同时绑定不同的或者相同的功能