JavaScript-JQuery基础-笔记

jQuery

JavaScirpt库

JavaScirpt库：是一个封装好的特定的集合。简单理解：就是一个JS文件，里面对我们 原生JS代码 进行封装，存放在一起。这样可以有效提高我们的开发效率。

jQuery概述

jQuery是一个快速、简洁的JavaScript库。其设计的宗旨就是“Wirte less，Do More”，即提倡写更少的代码，做更多的事情。

JavaScript Query：JavaScript 查询，主要针对DOM元素的操作。

优点

• 轻量级。核心文件几十KB，不影响页面的加载。
• 跨浏览器兼容，兼容主流游览器。
• 链式编程、隐式迭代方便使用。
• 对事件、样式、动画支持，大大优化DOM操作。
• 支持扩展插件开发，有着丰富的第三方插件。
• 免费、开源。

入口函数

方法一：
$(document).ready(处理函数);
$(document).ready(function() {
    
});
方法二：
$(处理函数);
$(function() {
    
});

方法一和方法二效果等同，都是等待页面DOM元素加载完毕执行。

顶级对象

1. $是jQuery的别称，$同时也是jQuery的顶级对象。当然$也可以使用 jQuery 代替 。

$(处理函数); == jQuery(处理函数);

2. $是jQuery的顶级对象，相当于原生JS中的window对象。把元素利用$包装成jQuery对象，就可以直接调用jQuery的属性和函数。

3. 如何区分jQuery对象和DOM对象？

​ 答：查看获取的方式，DOM对象是通过原生JS获取的。而jQuery对象是通过jQuery获取的。

4. jQuery对象的本质就是通过$包装DOM对象后产生的对象，以伪数组的形式呈现。

$和DOM之间互相转换

// DOM -> jQuery
var 变量 = document.querySelector('标签'); //获取DOM对象
$(变量); //通过$包装为jQuery对象

// jQuery -> DOM
$(video)[索引];//因为它本身就是一个伪数组
$(video).get(索引);//内置方法

jQuery选择器

$('选择器');//使用方法和CSS一样

隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程我们就叫隐式迭代。

jQuery筛选器

当父盒子有多个同标签的子盒子时，在父盒子选择想要的子盒子。

语法	用法	描述
:first	$(‘标签:first’)	获取第一个元素
:last	$(‘标签:last’)	获取最后一个元素
:eq(index)	$(‘标签:eq(index)’)	获取 标签 中指定索引的元素
:odd	$(‘标签:odd’)	获取 标签 中奇数的元素
:even	$(‘标签:even’)	获取 标签 中偶数的元素

父、子、兄筛选

语法	用法	说明
parent()	$(‘选择器’).parent()	获取亲父亲元素
parents(‘选择器’)	$(‘选择器’).parents(‘选择器’)	获取祖先元素
children(‘选择器’)	$(‘选择器’).children(‘选择器’)	效果类似子代选择器，只选择儿子
find(‘选择器’)	$(‘选择器’).find(‘选择器’)	效果类似后代选择器，即选择儿子，也选择孙子
siblings(‘选择器’)	$(‘选择器’).siblings(‘选择器’)	选择亲兄弟元素，除自身
nextAll(‘选择器’)	$(‘选择器’).nextAll(‘选择器’)	选择自身之后亲兄弟元素，除自身
prevtAll(‘选择器’)	$(‘选择器’).nextAll(‘选择器’)	选择自身之前亲兄弟元素，除自身
eq(索引)	$(‘选择器’).eq(索引)	选择指定索引的元素
hasClass(‘类名’)	$(‘选择器’).hasClass(‘类名’)	判断是否有指定类名

事件对象-this

$(this)//当前对象，this不用引号。

常用函数

$对象.index();//获取当前元素的索引值，是父亲的第几个儿子。

$('checked复选框：checked');//选择被选择了的复选框。

jQuery鼠标事件

语法	用法	描述
mouseenter(处理函数)	$对象.mouseenter(处理函数);	当鼠标进入$对象时触发【不冒泡】
mouseleave(处理函数)	$对象.mouseleave(处理函数);	当鼠标退出$对象时触发【不冒泡】
mousemove(处理函数)	$对象.mousemove(处理函数);	当鼠标移动$对象时触发
mouseover(处理函数)	$对象.mouseover(处理函数);	当鼠标悬停$对象时触发
mouseout(处理函数)	$对象.mouseout(处理函数);	当鼠标离开$对象时触发
mousedown(处理函数)	$对象.mousedown(处理函数);	当鼠标按下$对象时触发
mouseup(处理函数)	$对象.mouseup(处理函数);	当鼠标弹起$对象时触发

hover切换

hover([over],out);
hover([鼠标经过处理函数],离开处理函数);

jQuery样式

1. 获取CSS属性

	var 变量 = $对象.css('属性名');//没有赋值就是获取，获取的是带单位字符串

2. 修改CSS属性

	$对象.css('属性名','属性值');//属性值带单位,不过如果属性值为数值型，那么可以不加单位

注意事项：如果我们是以对象的形式修改CSS属性，可以不用带单位,数值型不带引号。

	$对象.css({
    	height:400,
    	width:400
	});

操作类名

语法	用法	描述
addClass()	$对象.addClass(‘类名’);	添加类名
removeClass()	$对象.removeClass(‘类名’);	删除类名
toggleClass()	$对象.toggleClass(‘类名’);	切换类名

jQuery特效

基本

显示

show([speed定义速度],[easing运动轨迹],[fn回调函数]);

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

隐藏

hide([speed定义速度],[easing运动轨迹],[fn回调函数]);

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

切换

toggle([speed定义速度],[easing运动轨迹],[fn回调函数]);

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

滑动

下拉

slideDown([speed定义速度],[easing运动轨迹],[fn回调函数]);

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

上拉

slideUp([speed定义速度],[easing运动轨迹],[fn回调函数]);

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

切换

slideToggle([speed定义速度],[easing运动轨迹],[fn回调函数]);

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

动画队列

动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就会造成多个排队显示的情况。

停止排队

stop()//用于停止动画或者效果，写入动画之前。

淡入淡出

淡出

fadeIn([speed定义速度],[easing运动轨迹],[fn回调函数]);

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

淡出

fadeOut([speed定义速度],[easing运动轨迹],[fn回调函数]);

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

指定透明度

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeTo([speed定义速度],opacity透明度,[easing运动轨迹],[fn回调函数]);

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。（必选）

opacity透明度：取值范围0-1。（必选）

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

切换

fadeToggle([speed定义速度],[easing运动轨迹],[fn回调函数]);

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

自定义动画

animate(params,[speed定义速度],[easing运动轨迹],[fn回调函数]);

params：想要修改的样式属性，以对象的形式传递，必选，属性名可以不用带引号，如果采用复合属性则采取驼峰命名法。

可以是盒子宽度，top，left等等。

speed定义速度:有三种预定义（slow、normal、fast）或者表示动画时长的毫秒数值。

easing运动轨迹：指切换运动曲线，默认是：swing（摇摆），可以为linear匀速。

fn回调函数：回调函数。

返回顶部

$('html,body').animate({//因为animate是针对元素操作的，所以不能直接使用window，或者document。需要用html、或者body代替。
	scrollTop: 0//被“卷去”的顶部高度
}, 'normal', 'swing');

jQuery属性操作

固有属性

var 变量 = $对象.prop('属性');//获取元素的属性值
$对象.prop('属性','属性值')//属性赋值，数值型不用引号。

自定义属性

var 变量 = $对象.attr('属性');//获取元素的属性值[Attribute]
$对象.attr('属性','属性值')//属性赋值，数值型不用引号。

数据缓存

data数据缓存：数据绑定在元素上，它并不会改变DOM结构。

$对象.data('属性','属性值');//赋值
var 变量 = $对象.data('属性');//获取，能获取H5自定义属性（不用谢data开头），返回值为数值型。

jQuery元素内容

一、获取元素内容
var 变量 = $对象.html();//获取内容，等效innerHTML[也获取标签]
$对象.html('内容');//赋值

var 变量 = $对象.text();//获取内容,等效innerText[不区分标签]
$对象.text('内容');//赋值


二、获取表单元素内容
var 变量 = $对象.val();//获取内容,等效value
$对象.val('内容');//赋值

jQuery常用函数

数值型对象.toFixed(位数);//保留指定位数小数。

jQuery元素操作

遍历元素

jQuery隐式迭代是对相同类型的进入，如果我们想对不同类型进行迭代？

答：遍历元素即可。

$对象.each(回调函数);
$对象.each(function(index【索引】,domElement【DOM元素】) {
    
});

名词解析：
index【索引】：每个元素的索引号。
domElement【DOM元素】：DOM元素对象，如果需要使用jQuery属性和函数，那么需要转换成$对象。

$.each(数组、对象或者$对象,回调函数);
$.each(数组、对象或者$对象,function(index【索引】,domElement【DOM元素】) {
    
});

名词解析：
数组、对象或者$对象：它需要遍历的对象，可以是数组、也可以是$对象。
index【索引】：每个元素的索引号。
domElement【DOM元素】：DOM元素对象，如果需要使用jQuery属性和函数，那么需要转换成$对象。

$.each()与
for (变量名 in 对象) {
    var 变量 = 变量名;//属性名
    var 变量 = 对象[变量名];//属性值
}
相似。

创建元素

var 变量 = $('标签');
比如：var li = $('<li>创建一个li标签</li>');

放置元素

(一)内部放置
$对象.append(创建的元素);//放置在原本内容的最后面，与childAppend()相似。
比如：element.append(li);
$对象.prepend(创建的元素);//放置在原本内容的最前面。
比如：element.prepend(li);

(二)外部放置
$对象.afert(创建的元素);//放置在目标元素的之后
$对象.before(创建的元素);//放置在目标元素的之前

删除元素

$对象.remove();//删除当前元素
$对象.empty();//删除当前元素的所有子节点
$对象.html('');//清空当前元素的内容

jQuery事件

事件注册【事件绑定】

jQuery注册事件大多数与原生保持一样，如：click、鼠标事件【mouseenter、mouseleave、mousemove、mousedown、mouseup等等…】、键盘事件【keyup、keydown、keypress】。

单个事件注册

$对象.事件(处理函数);
如：element.click(function() {
    处理过程;
});

on事件

$对象.on(事件1,事件2,事件3...选择器,回调函数);
如：
格式一：已对象的形式，注册事件，同时注册多事件
element.on({
    click:function() {
        处理过程;
    },
    mousemove:function() {
    	处理过程;
	}
});

格式一：以字符串的形式注册事件，同时注册多事件，同处理过程。
element.on('click mousemove',function() {
    
})


名词解：
选择器：指$对象的子元素选择器。

事件委托

将事件绑定在父级上，通过冒泡的原理触发父级绑定的事件。这就是事件委托。

$对象.on(事件,子元素,回调函数);
$('ul').on('click','li',function() {
    处理过程;
})

on事件优点

1. 同时可注册绑定多事件。
2. 可进行事件委托。
3. 可绑定动态生成的元素。-仅限事件委托

事件删除【事件解绑】

$对象.off();//没有传参时，为解绑所有事件。需要解绑某个事件，那么就传入事件的字符串即可。
$对象.off('事件');
$对象.off('子级','事件');//解绑事件委托

one事件

$对象.one(事件,处理函数);//只触发一次，用法与on()相似。

自动调用事件

一、手动调用
$对象.事件();
element.click();

二、trigger()
$对象.trigger('事件');

三、
$对象.triggerHandler('事件');//不会触发元素的默认行为

事件对象

$对象.click(function(事件对象) {
    处理过程;
});

$对象.on({
    click:function(事件对象) {
        处理过程;
    },
    mousemove:function(事件对象) {
    	处理过程;
	}
});

$对象.on('click mousemove',function(事件对象) {
    
})


使用方式：与原生保持一致。

jQuery复制对象

extend(deep深浅复制,target目标对象,objects待复制对象列表);//即可以复制节点，也可以是数组，或者对象。

名词解释：
deep深浅复制：
节点时：true为深复制【深拷贝】即复制标签也复制内容。false为浅复制【浅拷贝】。
对象时：浅复制【浅拷贝】只是把“复杂数据类型”的内存地址赋值给目标对象，深复制【深拷贝】是将整个复制，开辟新的内存存储数据。
target目标对象：复制对象
objects待复制对象列表：复制源，多个时使用','分隔。

多库共存

问题：当我们使用了很多插件、框架或者自定义$【同名】方法时，会与jQuery的$冲突？

答：此时多库共存就很有必要。

jQuery的解决方案:

1. 使用jQuery()

2. var 变量 = $.noConflict();释放掉$的控制。

jQuery插件

基于jQuery框架开发的插件。

网页推荐

jQuery之家-自由分享jQuery、html5、css3的插件库 (htmleaf.com)

jQuery插件库-收集最全最新最好的jQuery插件 (jq22.com)

图片懒加载

值加载用户看的到的图片。

jQuery尺寸

语法	说明
width()/height()	获取元素的宽度和高度，只有width、height。
innerWidth()/innerHeight()	获取元素的宽度和高度，包含padding【content + padding】
outerWidth()/outerHeight()	获取元素的宽度和高度，包含padding、border【content + padding + border】
outerWidth(true)/outerHeight(true)	获取元素的宽度和高度，包含padding、border、margin【content + padding + border + margin】

注意：

1. 以上参数为空，则获取对应值【返回值为数值型】。
2. 需要复制，直接给单位即可【不需要单位】。

jQuery位置

offset系列

获取偏移量。

$对象.offset();
//返回值是一个对象，它包含top left。这些值是以文档【窗口】为基础得到的，与上级带定位父级无关。和原生不用。
$对象.offset().top;//top值
$对象.offset().left;//left值

$对象.offset({
    top:值,
    left:值
});//赋值

position系列

$对象.position();
//返回值是一个对象，它包含top left。这些值是以“定位的父级”为基础得到的，没有父级带定位时，以文档为基础
$对象.position().top;//top值
$对象.position().left;//left值
//不能赋值

scrollTop()/scrollLeft()系列

$对象.scrollTop();//返回被“卷去”头部的高度。
$对象.scrollLeft();//返回被“卷去”左部的宽度。
//赋值
$对象.scrollTop(值);//直接传参
$对象.scrollLeft(值);//直接传参

ES6

链式编程

对同对象进行多次操作，用“.”分隔调用函数。

$('div').on('click',function() {
    $(this).css('color',red).siblings('div').css('color','');//自己变红色，其他不变。链式编程
});

注意：注意编程“基对象”是否始终未变。注意到底是在操作的是谁？

面向对象编程

面向对象编程：找到对象，创建对象，使用对象。

在JavaScript中对象是一组无序的相关属性和方法的集合，所有事物都是对象。

对象中的属性和方法：

属性：事物的特征，在对象中用属性来表示。

方法：事物的行为，在对象中用方法来表示。

class类

类泛指了对象的公共部分，它泛指某类。–【模板】

对象则是特指某个，是通过类实例化得来的。–【产品】

constructor构造器

用于获取传参，初始化类。

class person {
	constructor(uname,age) {//构造方法
		this.uname = uname;
        this.age = age;
	}
    sing() {//方法
        
    }
}

注意事项：

1. 类名遵循驼峰式。
2. 如果类中没有constructor构造方法，那么js引擎就会自动添加一个。有就不添加。【保证必须有一个】
3. 方法不需要function关键字申明。
4. 方法之间不需要逗号分隔。

继承

子类 继承 父类 的属性和方法。

class 子类 extends 父类 {
    
}

super关键字

使用super关键字可以 constructor 调用父类的构造方法或者普通方法。

class 子类 extends 父类 {
    constructor(参数){
        super(参数);//调用父类的constructor构造方法。
    }
    方法名() {
        super.方法名();//调用父类方法
    }
}

注意事项：
使用super关键字调用父类构造方法，必须在给子类this之前。这是一种规定。

就近原则

当 子类 和 父类 有相同的方法，就近原则使用 子类 中的，如果子类没有再去 父类 中调用。

ES6没有变量提升

变量提升：就是提前将 script 标签中所有的变量和函数都提前加载进入内存。好处就是函数代码可以在函数调用代码下面。

ES6没有变量提升,所有类的代码必须在实例化之前。类中的共有的属性和方法一定要加 this 使用。

this指向

constructor构造函数中this指向它本身，方法中的this则指向调用者。

元素操作

插入元素

元素.insertAdjacentHTML(插入位置,字符串);//可以将字符串格式的元素放置到父级元素中。

名词解析：
插入位置：
	beforebegin 元素自身之前。
    afterbegin 插入元素内部第一个节点之前。
    beforeend 插入元素内容最后一个节点之后。
    afterend 元素自身之后。

删除元素

document对象.remove();//删除当前元素

事件

双击事件

document对象.dblclick() = ;//双击事件
document对象.dblclick() = 处理函数;//绑定事件
document对象.addEventListener('dblclick',处理函数);//绑定事件

window.getSelection ? window.getselectionr().removeAllRanges() : document.Selection.empty(); //阻止双击选择文字

选定状态

表单对象.select();//是表单内处于全部选择状态

拷贝对象

assign(目标对象，被拷贝对象);//浅拷贝，拷贝复杂对象时，只拷贝内存地址。

let

let关键字，声明一个块级作用域的变量。

在大括号中，let声明的变量才具备块级作用域，var是不具备这个特点的。

块级作用域：在大括号范围内可访问，超出不可访问。

if(true) {
    let 变量名 = 变量值;
}

特点：
1.大括号外不可访问变量，如：循环结束，其中的计数器不必使用。所以此时使用let声明变量就不会出现这种情况。
2.let关键字声明的变量眉头变量提升。
3.暂时性死区：使用let关键字声明的变量，会和函数（方法）整体绑定。不会收到外部的影响。


注意：
1.在函数（方法）中使用let声明变量之前就使用会报错。因为let关键字声明的变量会和函数（方法）整体绑定，即使函数（方法）外部有同名变量，也不会调用。

const

const关键字用于声明常量。

常量：一旦声明，终身不变。（声明之后内存地址固定，不可更改，变量值亦是如此）

使用const关键字声明的变量，拥有块级作用域。

const声明的变量必须给初始值。

解构赋值

ES6中允许从数组中提取赋值，按照对应位置，对变量赋值。对象也可以实现解构赋值。

数组
let arr = [1,2,3];
let [a,b,c] = arr;
//等效
let a = 1;
let b = 2;
let c = 3;

对象
let person = {name:'张三',age:18};
let {name,age} = person;
//等效
let person = {name:'张三',age:18};
let name = person.name;
let age = person.age;

匹配
let person = {name:'张三',age:18};
let {name:myName,age:myAge} = person;//使用变量名name和age在person中匹配，匹配成功后分别给变量Name和yAge。（在解构语法中name:myName中的name只是用来匹配 赋值符 右侧对象中的属性。）
结论：
这就是解构赋值，一一对应进行赋值。如果数组（对象）中没有对应值，那么变量的值就为undefined。

箭头函数

(参数列表) => {
    函数体;
}

let fn = (参数列表) =>{
    函数体;
    //1.当函数体只有一行代码时，可以省略大括号。执行的结果就是返回值。
    //2.当形参只有一个时，小括号也可以省略。
}

注意：
箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this（定义位置上下作用域的this）。

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

fn sum(name,age,...arr) {//函数参数列表使用剩余参数
    
}

let arr = ['张三','李四','王五'];
let [s1,...s2] = arr;

Array的扩展方法

扩展运算符（展开语法）

扩展运算符可以将数组或者对象转化为逗号分隔的参数列表。

let arr = [1,2,3];
...arrr;//...拆分符号，拆分数组中的元素。

案例

合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];

将伪数组转换为真数组
let divs = document.querySelectorAll('div');//获取元素对象，返回值伪数组
let newDivs = [...divs];//将伪数组转换为真正的数组，这样就可以调用Array中的函数（方法）。

Array.form

构造函数：Array.from(),可以将伪数组转换真正的数组。

Array.from(伪数组,处理函数);
名词解析：
处理函数：用来处理每个元素，将处理过的元素放入数组。（类似于map方法）

var arrayList = [
    '0':'张三',
    '1':'李四',
    '2':'王五',
    length:3
];
var ary = Array.from(arrayList);

Array对象.find

Array.find()返回满足条件的第一个元素。

Array.findIndex()返回满足条件的第一个元素的索引。

Array对象.find(处理函数);
Array对象.find(function(值value,索引index) {
	
});

var(let) 变量名 = Array对象.findIndex(处理函数)
var(let) 变量名 = Array对象.findIndex(function(值value,索引index) {
    
})

Array对象.includes

Array.includes()表示某个驻足是否包含指定的值，返回值为布尔值。

var(let) 变量名 = Array对象.includes(值);//于之前的indexof()方法效果一致，不过更加易懂（见名知义）。

String的扩展方法

模板字符串

模板字符串用于定义字符串，模板字符串可以解析变量。

var(let) 变量名 = `字符串内容`;
var(let) 变量名 = `字符串值${变量对象}`;//${}将大括号中的内容解析至字符串，不用再使用加号拼接了。

特点：
1.${}拼接字符串。
2.支持解析html标签，可换行。
3.调用函数，显示的是函数返回值。

startWith和endWith

startWith()：表示参数字符串是否在原函数字符的头部，返回布尔值。

endWith()：表示参数字符串是否在原函数字符的尾部，返回布尔值。

repeat

repeat()方法表示将原字符串重复n次，以新字符串返回。

Set数据结构

set数据结构与数组相似，都是用于存储数据的。不同的是set数据结构不允许出现相同的数据。数据唯一。

创建Set数据结构

var(let)　变量名 = new Set(初始值);
名词解析：
初始值：是构造函数，将元素以参数的形式存储。
注意:
如果构造函数和添加元素出现重复元素，忽略不存储。只添加一个。

Set属性

Set对象.size;//返回Set数据结构的长度，与数组中的length属性相同。

实例方法

add(值value):添加指定元素值，返回Set结构本身。
delete(值value):删除指定元素值，返回布尔值，成功true，不成功即false。
has(值value):返回一个布尔值，表示指定元素值是否为Set成员。
clear():清除所有成员，没有返回值。

注意：
Set数据结构也可以使用foreach()等方法。

ES5

对象

创建对象【构造函数】

1.通过 new Object() 创建
var 对象名 = new Object();

2.通过字面量创建对象
var 对象名 = {};

3.通过构造函数创建对象
function 对象名(参数列表) {//创建构造函数
    this.参数名 = 参数名
    this.方法名【函数名】 = function() {
        
    }
}
var 对象名 = new 对象名(参数列表);

注意事项：
1.构造函数名首字母需要大写，遵循驼峰式命名。
2.构造函数需要配合new关键字使用。

成员

ES6成员：函数中的属性和方法都是一个成员，成员可以添加。

成员分为：静态成员、实例成员。

静态成员

静态成员：构造函数本身上添加的成员，不能通过实例化对象来访问。通过构造函数直接访问即可。

实例成员

实例成员：是函数通过this创建的成员就是实例成员。实例成员只能通过new对象访问使用。

构造函数的缺陷

构造方法大量实例化对象时，存在内存浪费的问题。构造函数中的所有复杂数据类型需要反复开辟内存空间。

构造函数原型prototype

构造函数通过原型分配的函数是所有对象共享的。

JavaScript中规定，每个构造函数中都必须有一个prototype属性，指向另一个对象。注意：这个prototype就是一个对象，这个对象的所有属性和方法，都被构造函数所共享。

当我们不想相同的方法被反复开辟内存空间，此时就可以把需要共享的属性和方法存放到prototype原型对象上。

语法：
构造函数名.prototype.方法名 = function(参数列表){};
调用与之前一致。
实例化对象.方法名(参数列表);

对象原型_ _ proto _ _

实例化对象.__proto__//双下划线proto双下划线,js引擎会自动给所有实例化对象添加__proto__属性，该属性指向了构造函数原型prototype对象。__proto__属性是非标准的，无法直接进行赋值操作。

注意事项：

实例化对象的_ _ proto _ _属性和构造函数原型prototype是相等的。

方法的查找方式：

首先在对象身上找，找到则调用。因为有_ _ proto _ _属性在，则去构造函数原型prototype上找，找到就执行。

constructor构造函数

在构造函数的原型prototype和实例化对象的_ _ proto _ _属性中，都有constructor构造函数，它指向构造函数本身。

构造函数对象.prototype = {
    constructor:构造函数对象,//利用constructor构造函数指回构造函数对象本身。这样的好处是：可以通过对象的方式添加共享属性、方法，结构清晰。【不需要再通过 “构造函数原型prototype.方法名” 的方法添加共享方法】
    方法名:function(参数列表) {}
}

构造函数、构造函数原型、实例化对象之间关系图

注意事项：

1. 只要是对象就有_ _ proto _ _原型，指向原型对象
2. 构造函数的prototype

成员查找方式

（1）首先查找对象自身是否有该成员。

（2）对象自身没找到，再去对象原型上找。

（3）对象原型上也没找到，那么就去Object原型上找。

this指向

在构造函数中，里面this指向的是实例化对象。

原型对象中的this，也是指向实例化对象。

总结：

1. this指向没调用不知道。
2. this总是指向它的调用者。

call()

作用：调用这个函数可以修改运行时this的指向。【也可以调用函数】

函数对象.call(当前调用函数this的指向对象,参数列表);
名词解析：
当前调用函数this的指向对象，修改该属性可以改变this的指向。
参数列表：与function(参数列表)功能相似，都是用于传递参数提供方法使用。

组合继承

由于ES5没有继承，所有我们是通过构造函数和原型对象模拟实现的，这种形式被称为组合继承。

继承属性

原理在字构造函数中通过父构造函数.call(this)，调用父构造函数并修改其中this指向。

继承方法

Evar 子构造函数对象.prototype.constructor =  = new 父构造函数对象;
子构造函数对象.prototype.constructor = 子构造函数;//指回子构造函数，在继承父构造函数的方法时，保留原来原型中的方法。
//实例化父构造函数，创建独立于父构造函数对象.prototype的空间，将父构造函数赋值给子构造函数对象.prototype使用，达到继承效果。

ES5新增方法

数组（遍历）

迭代（遍历）方法：forEach()、map()、filter()、some()、every()等等。

1.forEach()
数组对象.forEach(function(当前值value,当前索引index,数组本身array){
    
});

2.filter():创建一个新数组，存放通过筛选【需要指定筛选条件】的元素。返回值：数组。
var 变量名 = 数组对象.filter(function(当前值value,当前索引index,数组本身array){
    return 返回筛选元素;//如：return value > 20;【筛选条件 元素值大于20】
});

3.some():查找数组中满足要求的元素，满足返回true，不满足返回false。返回值：不是数组，是一个布尔值
var 变量名 = 数组对象.some(function(当前值value,当前索引index,数组本身array){
    return 返回筛选元素;//如：return value > 20;【筛选条件 元素值大于20】
});
注意：它查找到第一个就满足，那么它就不会继续查找下去。


注意事项：
forEach和some的区别：forEach遇到return true不会停止，而some会立即停止。效率高。

字符串

var str = 字符串对象.trim();//去除字符串两端的空格，返回一个新字符串。

对象属性

添加属性

1.对象.属性 = 属性值;//添加或者修改属性。

2.Object.keys();
var arr = Object.keys(对象);//获取对象自身所有的属性，类似于for in。返回值由属性名组成的数组。

Object.defineProperty(对象obj,属性名prop,描述【目标的特性】descriptor{});//新增或修改对象属性。
名词解析：
描述【目标的特性】descriptor{}：对象形式传参
	1.value：设置属性的值。默认undefined。
    2.writable：值是否可重写。true|false，默认false。
	3.enumerable：属性是否可被枚举，true|false，默认false。【可否被遍历】
	4.configurable：属性目标是否可以被删除或者被再次修改的特性，true|false，默认false。

delete 对象.属性;//删除目标对象指定属性。

删除属性

delete 对象.属性;//删除目标对象指定属性。

严格模式

介绍

ES5提供了严格模式，采取语法更加严谨的具体限制。

优点

1. 消除JavaScript中的语法中不谨慎，不合理，有歧义的。
2. 消除代买一部分安全性。
3. 提高编译效率。
4. 禁止了ECMAScript的未来版可能会定义的一些语法，为未来版本做铺垫。比如保留关键字。

应用

严格模式可以应用在整个js文档或者个别函数。因此我们使用时，将其区分为脚本开启严格模式和为函数开启严格模式两种情况。

'use strict';//下面的js代码进入严格模式。
1.
<script>
    'use strict';//整个js文档
	(function() {
        'use strict';
    })();
</script>

2.
<script>
function() {//个别函数
       'use strict'; 
    }
</script>

规法【具体限制】

变量

1. 变量赋值前需要声明。

2. 严禁删除已经声明的变量。

this指向

1. 全局作用域中定义的函数不在指向window，而是指向undefined。

2. 严格模式下，如果，构造函数不实例化调用，this会报错。

3. 定时器this还是指向window。

4. 事件、对象this还是指向调用者。

函数

1.不允许将函数声明在非代码块中。如：if,for循环中再定义函数，不允许。

高阶函数

高阶函数是对其他函数进行操作的函数，它接受函数作为参数或将函数作为返回值输出。

闭包

说明

闭包（closure）值有权访问另一个函数作用域中局部变量的函数。

简单理解：一个作用域可以访问另一个内部作用域。被访问的作用域的函数称为闭包函数。

闭包的主要作用：延伸了变量作用范围。

立即执行函数是一个小闭包，因为立即函数中的所有函数都可以使用它的传参。

递归

函数内部可以调用自身，那么这个函数就是递归函数。

由于递归如果没有结束限制，那么它会死循环，造成栈溢出。所有必须加退出条件return。

函数

创建函数

1.自定义函数
function 函数名() {
    
};

2.函数表达式【匿名函数】
var 变量名 = function() {
    
};

3.利用new Function('参数列表','函数体');[了解]
var 变量名 = new Function('参数列表','函数体');

结论：
	1.所有函数都是Function的实例化对象。
	2.函数也是对象。

调用函数

1.普通函数
function fn() {
    
}
函数名();
函数对象.call(当前调用函数this的指向对象,参数列表);


2.对象的方法
var obj = {
    mothed:function() {
        
    }
}
对象名.方法名();


3.构造函数
function 对象名(参数列表) {//创建构造函数
    this.参数名 = 参数名
    this.方法名【函数名】 = function() {
        
    }
}
实例化-- new 构造函数名;


4.绑定事件
btn.addEventListener('click',function() {
    
});
触发事件，即可调用。


5.定时器函数 
setInterval(function() {
    
});
定时器自动调用。
6.立即执行函数


(function() {
    
})();
自动调用。

this指向

表中this指向在非严格模式下得出

调用方式	this指向
普通函数	window
构造函数	实例化对象，原型亦是如此
对象方法	该方法所属对象
事件绑定	绑定事件对象
定时器函数	window
立即执行函数	window

改变内部this指向

1.call()
函数对象.call(this指向,参数列表);//会调用函数
名词解析：
当前调用函数this的指向对象，修改该属性可以改变this的指向。
参数列表：与function(参数列表)功能相似，都是用于传递参数提供方法使用。

2.apply() 应用
函数对象.apply(this指向,[参数列表]);//会调用函数
this指向：不需要改变时，传递null。当然传递调用者更加。
参数列表：数组形式【伪数组】。

3.bind() 捆绑
var 新函数名 = 函数对象.bind(this指向,参数列表);//不会调用函数，会返回this值和初始化参数改造的原函数的拷贝。


主要应用场景
call()--继承
apply()--跟数组有关
bind()--不调用函数，改变内部this指向。

正则表达式

概述

正则表达式(Regular Expression)是用于匹配字符串的字符组合的模式，在JavaScript中，正则表达式也是对象。

主要作用：

1. 验证表单。
2. 过滤页面敏感关键词。
3. 提取特定字符串。

正则表达式优点：

1. 灵活性、逻辑性和功能性非常强。
2. 可以迅速简单的完成字符复杂的控制。

使用

创建

1.通过RegExp对象的构造函数创建正则表达式
var 变量名 = new RegExp(/表达式/);
2.通过字面量创建正则表达式
var 变量名 = /表达式/;

测试是否符合正则表达式

正则表达式对象.text(需要测试的字符串对象);//满足true，不满足返回false。

组成

一个则正表达式可以由简单的字符构成，也可以是简单和特殊字符 组成，其中特殊字符称为元字符。在正则表达式中具有特殊意义的专用字符。如：^、$、+等…

元字符	说明
边界符
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结尾）
注意事项	如果^和$一起使用可以达到精准匹配的效果
字符类
[]	表示有一个系列可供字符选择，只需要匹配其中一个即可。
[-]	范围内其一即可。
[^]	范围取反，不是范围中其一即可。
字符组合	[^a-zA-z0-9_-]不能是大小写英文字母、下划线和数子。【两个范围不需要空格相隔】
量字符	设定某个字符的出现次数
*	重复零次或者更多次【写在元字符后面】
+	重复一次或者更多次
?	重复零次或者更多次
{n}	重复n次
{n,}	重复n次或者更多次【大于等于】
{n,m}	重复n到m次【中间不可加空格】
优先级
()	优先级
预定义类
\d	匹配0~9之间任意一个数字，相当于[0-9]
\D	匹配0~9以外任意的字符，相当于[ ^0-9 ]
\w	匹配任意的字母、数字和下划线，相当于[A-Za-Z0-9_-]
\W	除所有字母、数字和下划线以外的字符，相当于[ ^A-Za-Z0-9_-]
\s	匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]
\S	匹配非空格的字符，相当于[ \t\r\n\v\f]
|	或者

注意事项

1. 正则表达式里面不需要加引号，不管数字还是字符串。