JS

JavaScript的组成：

JavaScript基础

var 和 let 是 JavaScript 中用来声明变量的关键字，它们之间的区别如下：

1. 作用域：

   • var 声明的变量属于函数作用域（function scope），在函数内部声明的 var 变量在函数外部是无法访问的。
   • let 声明的变量属于块作用域（block scope），在 {} 内声明的 let 变量只在该块内部有效。

2. 变量提升：

   • 使用 var 声明的变量存在变量提升（hoisting）现象，即在声明变量之前使用变量也不会报错，但是其值为 undefined。
   • 使用 let 声明的变量不存在变量提升，如果在声明变量之前使用变量会导致 ReferenceError 错误。

3. 重复声明：

   • 使用 var 可以重复声明同一个变量，不会报错。
   • 使用 let 在同一作用域内重复声明同一个变量会导致 SyntaxError 错误。

综上所述，建议在 ES6 以后的代码中优先使用 let 来声明变量，因为它有利于避免一些常见的问题，比如变量提升和重复声明。

Web APIs

DOM

• 文档：一个页面就是一个文档，DOM中使用document表示
• 元素：页面中的所有标签都是元素，DOM中使用element表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

获取元素

获取页面中的元素可以使用以下几种方式：

• 根据ID获取

• 根据标签名获取

• 通过HTML5新增的方法获取

• 特殊元素获取

根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象

根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

还可以获取某个元素(父元素)内部所有指定标签名的子元素 element.getElementsByTagName（标签名） 注意：父元素必须是单个对象（必须指明是哪一个元素对象，获取的时候不包括父元素自己。

通过HTML5新增的方法获取

document.getElementsByClassName（类名）；//根据类名返回元素对象集合
document.guerySelector（'选择器'）；//根据指定选择器返回第一个元素对象
document.querySelectorAll（选择器）;//根据指定选择器返回

特殊元素获取

获取body元素

document.body

获取html元素

document.documentElement

事件

执行事件的步骤

1.获取事件源 2.注册事件（绑定事件） 3.添加事件处理程序（采取函数赋值形式）

<a href="#" onfocus="func();">xxxx</a>

<script>
	element.onfocus=func;
	element.onfocus=function(){};
</script>

常见的鼠标事件

操作元素

改变元素内容

element.innerText();

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML();

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

元素的属性操作

element.属性 = ...

常见属性：

innerText、innerHTML改变元素内容 
src、href
id、alt、title

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式。

element.style		//行内样式操作
element.className	//类名样式操作

自定义属性的操作

获取自定义属性值

• element.属性 获取属性值。

• element.getAttribute（属性');

区别：

element.属性 获取内置属性值（元素本身自带的属性） element.getAttribute（属性'）；主要获得自定义的属性（标准）我们程序员自定义的属性

设置属性值

• element.属性=“值’ 设置内置属性值。
• element.setAttribute（属性’，值）

区别：

• element.属性 设置内置属性值
• element.setAttribute（属性）； 主要设置自定义的属性（标准）

移除属性

• element.removeAttribute（‘属性’）；

H5自定义属性

自定义属性自的：是为了保存使用数据。有些数据可以保存到面中而不用保存到数据库中。自定义属性获取是通过getAttribute（属性）获取。 但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值比如

<div data-index="1"></div>

或者使用JS设置 element.setAttribute(‘data-index’,2)

获取H5自定义属性

1.兼容性获取element.getAttribute(‘data-index); 2.H5新增element.dataset.index或者element.dataset['index'] ie11才开始支持

节点操作

节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

父级节点

node.parentNode

子节点

parentNode.childNodes (标准)
parentNode.children（非标准）
parentNode.firstchild
parentNode.lastchiid
parentNode.firstElementchild
parentNode.lastElementchild

parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。

parentNode.children（非标准）

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的） 虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

parentNode.firstchild

firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

parentNode.lastchiid

lastChild返回最后一个子节点，找不到则返回nu。同样，也是包含所有的节点

parentNode.firstElementchild

firstElementchi1d返回第一个子元素节点，找不到则返回null。

parentNode.lastElementchild

lastElementchild返回最后一个子元素节点，找不到则返回null

实际开发中，firstchild和1lastchild包含其他节点，操作不方便，而firstElementchild和 1astElementchi1d又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案： 1．如果想要第一个子元素节点，可以使用parentNode.chilren[0]

2．如果想要最后一个子元素节点，可以使用parentNode.chilren[parentNode.chilren.lenth-1]

兄第节点

node.nextSibiing

nextsibling返回当前元素的下一个兄弟节点，找不到则返回nul。同样，也是包含所有的节点。

node.previoussibling

previoussibling返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点

node.nextElementsibling

nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null

node.previousElementsibling

previousElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null

创建节点

document.createElement('tagName')

document.createElement（）方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点

node.appendchiid(child)

node.appendchild（）方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的 after 伪元素。

node.insertBefore(child，指定元素）

node.insertBefore（）方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before 伪元素。

删除节点

node.removechild(child)

node.removechild（）方法从DoM中删除一个子节点，返回删除的节点。

复制节点(克隆节点）

node.cloneNode()

node.cloneNode（）方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

三种动态创建元素区别

• document.write）
• element.innerHTMI
• document.createElement()

区别

1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2. innerHTML是将内容写入某个DoM节点，不会导致页面全部重绘
3. innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. createElement（）创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML效率要比creatElement高

事件（高级）

注册事件概述

给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式

• 利用on开头的事件onclick
• <button onclick="alert(hi~)”></button>
• btn.onclick=function(){}
• 特点：注册事件的唯一性
• 同一个元素同一个事件只能没置一个处理函数{多个处理函数用逗号隔开：<button onclick="f1(),f2();”></button>}，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

• w3c标准推荐方式
• addEventListener()它是一个方法
• IE9之前的IE不支持此方法，可使用attachEventO代替
• 特点：同一个元素同一个事件可以注册多个监听器
• 按注册顺序依次执行

addEventListener事件监听方式

eventTarget.addEventListener(type,listener[,usecapture])

eventTarget.addEventListener（)方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

• type：事件类型字符串，比如click、mouseover，注意这里不要带on
• listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值，默认是false。是否冒泡

删除事件（解绑事件）

1.传统注册方式

eventTarget.onclick=null

2.方法监听注册方式

• eventTarget.removeEventListener(type,listener[,useCapture]);

DOM事件流

事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这人传播过程即DOM事件流比如我们给一个div注册了点击事件：

DOM事件流分为3个阶段：

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

• 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。
• 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

注意 1．JS代码中只能执行捕获或者冒泡其中的一个阶段。

2.onclick和attachEvent只能得到冒泡阶段。

3．addEventListener（type，1istener［，useCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。 4． 实际开发中我们很少使用事件捕获，我们更关注事件冒泡 5．有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

6．事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

事件对象

什么是事件对象

eventTarget.onclick=function(event)Nt)
eventTarget.addEventListener('click'，function(event)()）//这个event就是事件对象，我们还喜欢的写成e或者evt

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

事件对象的常见属性和方法

事件委托（代理、委派）

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

点击每个li都会弹出对话框，以前需要给每个li注册事件，是非常辛苦的，而且访问DOM的次数越多，这就会延长整个页面的交互就绪时间。

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其交节点上，然后利用冒泡原理影响设置每个子节点以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上， u有注册事件，就会触发事件监听器。

事件委托的作用

我们只操作了一次DOM，提高了程序的性能。

常用的鼠标事件

1.禁止鼠标右键菜单contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e) e.preventDefault;

2.禁止鼠标选中（selectstart开始选中）

document.addEventListener('selectstart',function(e){ e.preventDefault;

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们门主要是用鼠标事件对象 MouseEvent和键盘事件对象KeyboardEvent。

常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。

BOM

什么是BOM

BOM（BrowserObiectModel）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。 BOM由一系列相关的对象构成，并每个对象都提供了很多方法与属性 BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

DOM

• 文档对象模型
• DOM就是把「文档」当做一个「对象来看待
• DOM的顶级对象是document
• DOM主要学习的是操作质面元素
• DOM是W3C标准规范

BOM

• 浏览器对象模型
• 把「浏览器」当做一个「对象」来看待
• BOM的顶级对象是window
• BOM学习的是浏览器窗口交互的一些对象
• BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

window对象是浏览器的顶级对象，它具有双重角色。

1.它是S访问浏览器窗口的一个接口。 2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法

在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alerto、prompto等。

window对象的常见事件

窗口加载事件

window.onload=function(){} 或者window.addEventListener("load",function(){});

window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS 文件等),就调用的处理函数。

window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。

document.addEventListener('DoMcontentLoaded',function()()）

DOMContentLoaded事件触发时，仅当DOM载完成，不包括样式表，图片，flash等等 le9以上才支持 如果面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DoMContentLoaded事件比较合适

调整窗口大小事件

window.onresize=function()()
window.addEventListener("resize",function()(});

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。

定时器

两种定时器

window对象给我们提供了2个非常好用的方法-定时器，

• setTimeouto
• setlntervalo

setTimeouto定时器

window.setTimeout（调用函数,[延迟的毫秒数]）;

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

两种写法
window.setTimeout（fun,[延迟的毫秒数]）;
window.setTimeout（'fun()',[延迟的毫秒数]）;

setTimeout()这个调用函数我们也称为回调函数callback

普通函数是按照代码顺序直接调用。 而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数 简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。 以前我们讲的 element.onclick=function(00或者 element.addEventListener(“click”,fn);里面的函数也是回调函数。

停止setTimeout定时器

window.clearTimeout(timeoutID)

setlntervalo定时器

window.setInterval（回调函数，[间隔的毫秒数]）

setlntervalo方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

注意： 1.window可以省略。

2.这个调用函数可以直接写函数，或者写函数名或者采取字符审函数名0：三种形式，

3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

停止setlnterval()定时器

 window.clearInterval(intervalID);

clearInterval方法取消了先前通过调用setInterval()建立的定时器。

注意： 1.window可以省略。 2.里面的参数就是定时器的标识符

location对象

什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

URL的一般语法格式为：

protocol://host[:port]/path/[?guery]#fragment
http://www.itcast.cn/index.html?name=andy&age=l8#link

location对象属性

location对象的方法

navigator对象

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。 下面前端代码可以判断用户那个终端并页面，实现跳转

history 对象

window对象给我们门提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

元素偏移量offset系列

offset 概述

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等

• 获得元素距离带有定位父元素的位置

• 获得元素自身的大小（宽度高度）

• 注意：返回的数值都不带单位

offset系列常用属性：

offset 与 style区别

offset

• offset可以得到任意样式表中的样式值 offset系列

• 获得的数值是没有单位的

• offsetWidth包含padding+border+width

• offsetWidth等属性是只读属性，只能获取不能赋值

• 所以，我们想要获取元素大小位置，用offset更合适

style

• style只能得到行内样式表中的样式值
• style.width获得的是带有单位的字符串
• style.width获得不包含padding和border的值
• style.width是可读写属性，可以获取也可以赋值
• 所以，我们想要给元素更改值，则需要用style改变

元素可视区client系列

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素

立即执行函数

两种形式

(function(){}())
(function(){})()

主要作用：创建一个独立的作用域。

元素滚动scroll系列

元素scroll系列属性

scrol翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等

三大系列总结

他们主要用法： 1.offset系列经常用于获得元素位置 offsetLeftoffsetTop 2.client经常用于获取元素大小clientWidthclientHeight 3.scroll经常用于获取滚动距离scrollTopscrollLeft 4.注意页面滚动的距离通过window.pagexoffset获得

mouseenter和mouseover的区别

mouseenter鼠标事件

• 当鼠标移动到元素上时就会触发mouseenter事件
• 类似mouseover，它们两者之间的差别是
• mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发
• 之所以这样，就是因为mouseenter不会冒泡
• 跟mouseenter搭配鼠标离开mouseleave同样不会冒泡

动画函数封装

动画实现原理

核心原理：通过定时器setlntervalo不断移动盒子位置。

实现步骤： 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动距离 3.利用定时器不断重复这人操作 4.加一入结束定时器的条件 5.注意此元素需要添加定位，才能使用element.style.left

节流阀

防止轮播图按钮连续点击造成播放过快。

节流阀自的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发，

核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

开始设置一个变量varflag=true

If(flag){flag=false;dosomething}关闭水龙头

利用回调函数动画执行完毕，flag=true打开水龙头

框架概述

框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。 潘件一般是为了解决某个问题而专门存在，其功能单一，并比较小 前端常用的框架有Bootstrap、Vue、Angular、React等。既能开发PC端，也能开发移动端前端常用的移动端插件有swiper、superslide、iscroll等。

框架：大而全，一整套解决方案 插件：小而专一，某个功能的解

本地存储

随看互联网的快速发展，基于网顶的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案 传智播

本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不去失数据 3、容量较大，sessionStorage约5M、localStorage约20M 4、只能存储字符串，可以将对象JSON.stringifyO编码后存储

window.sessionStorage

1、生命周期为关闭浏览器窗口 2、在同一个窗口（顶面下数据可以共享 3.以键值对的形式存储使用

存储数据：

sessionStorage.setltem(key,value) 

获取数据：

sessionStorage.getltem(key) 

删除数据：

sessionStorage.removeltem(key)

删除所有数据：

sessionStorage.clear()

window.localstorage

1、生命周期永久生效，除非手动删除否则关闭页面也会存在 2、可以多窗口（页面）共享（同一浏览器可以共享） 3、以键值对的形式存储使用

存储数据：

localstorage.setltem(key,value) 

获取数据：

localstorage.getltem(key) 

删除数据：

localStorage.removeltem(key) 

删除所有数据：

localStorage.clear()

编程基础

正则表达式

JS的正则对象（RegExp）

JS中正则对象的创建（利用正则表达式时创建的对象）

正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。

适用场景：判断用户名、密码设置是否符合规则

(1)方式一：var regObj = /^表达式$/; （直接量方式，常用）

(2)方式二： var regObj = /表达式/; （普通方式，没有边界符）

注：直接量方式存在边界，^开始，$结束。

​ reg赋值的是一个正则对象，而不是字符串，不要加””。

正则对象的方法

boolean regObj.test(string); 判断字符串是否符合正则表达式的规则。

直接量方式 vs 普通方式

(1)直接量方式：只要有不符合规则的字符存在，返回false，全部符合返回true；适用于表单校验。

(2)普通方式：只要有符合规则的字符存在，返回true，全部不符合返回false；适用于字符串的查找、替换。

字符串方法

jQuery

jQuery概述

JavaScript库

仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。

JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预定义好的数在单面，比如动画animate、hide、show，比如获取元素等

简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

常见的JavaScript库

• jQuery
• Prototype
• YUI
• Dojo
• ExtJS
• 移动端的zepto

这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的，我们主要学习的是jQuery

jQuery的概念

jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“writeLess，DoMore”，即倡导写更少的代码，做更多的事情。 j就是JavaScript；Query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

学习Query本质：就是学习调用这些函数（方法）。 jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

jQuery的优点

优点

• 轻量级。核心文件才几十kb，不会影响页面加载速度
• 跨浏览器兼容。基本兼容了现在主流的浏览器
• 链式编程、隐式迭代
• 对事件、样式、动画支持，大大简化了DOM操作
• 支持插件扩展开发。有看丰富的第三方的插件，例如： 树形菜单、日期控件、轮播图等
• 免费、开源

jQuery 的基本使用

jQuery的入口函数

$(function(){
	...//此处是页面DOM加载完成的入口
});

$(document).ready(function({
	...//此处是页面DOM加载完成的入口
});

1、等着DOM结构染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装 2、相当于原生js中的DoMContentLoaded。 3、不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

jQuery的顶级对象$

1.$是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$。

2.$是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用 jQuery的方法。

jQuery对象和DoM对象

1.用原生JS获取来的对象就是DOM对象 2.jQuery方法获取的元素就是jQuery对象。 3.jQuery对象本质是：利用s对DOM对象包装后产生的对象（伪数组形式存储）。

DoM对象与jQuery对象之间是可以相互转换的 因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把 jQuery对象转换为DoM对象才能使用。 1.DOM对象转换为jQuery对象：

$(DOM对象)

.iQuery对象转换为DOM对象（两种方式）

$('div') [index]		 index是索引号   	$('div') [0]

$('div').get(index)   	index是索引号

jQuery选择器

jQuery基础选择器

原生JS获取元素方式很多，很杂而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

$(“选择器”)//里面选择器直接写CSS选择器即可，但是要加引号

jQuery层级选择器

隐式送代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

$("div"）.css("background"，"pink")
//隐式选代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法

jQuery筛选选择器

jQuery筛选方法（重点）

样式操作

操作css方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式

1.参数只写属性名，则是返回属性值

$(this).css("color")

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("color","red");

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加号

$(this).css(t"color":"white""font-size":"20px")

设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点

1.添加类

$( "div" ).addClass("current"); 

2.移除类

$("div").removeClass("current") 

3.切换类

$("div").toggleClass("current");

类操作与className区别

原生JS中className会覆元素原先里面的类名。 jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery效果

jQuery给我们封装了很多动画效果，最为常见的如下：

显示隐藏

show() hide() toggle()

滑动

 slideDown() slideUp() slideToggle()

淡入淡出

fadeln(） fadeOut() fadeToggle() fadeTo()

自定义动画

animate()

显示隐藏效果

1.显示语法规范

show([speed,[easing],[fn]])

2.显示参数

（1）参数都可以省略，无动画直接显示。 （2）speed：三种预定速度之一的字符串（“slow”，“normal，or“fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：（Optional)用来指定切换效果，默认是“swing”，可用参数“linear。 （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

1.切换语法规范

toggle（[speed,[easing],[fn]]） 

2.切换参数

（1）参数都可以省略，无动画直接显示。 （2）speed：三种预定速度之一的字符串（“slow”，“normal”，or”fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：（Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

动画队列及其停止排队方法

1.动画或效果队列 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

2.停止排队

 stop()

(1）stop()方法用于停止动画或效果。 (2）注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画

自定义动画animate

1.语法

animate(params,[speed],[easing],[fn])

2.参数

（1）params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。 （2）speed：三种预定速度之一的字符串（“slow”，“normal”，or”fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：（Optional)用来指定切换效果，默认是“swing”，可用参数”linear” （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

$（"div").animate(
	left:500
)

jQuery属性操作

设置或获取元素固有属性值prop(

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。 1.获取属性语法

prop("属性")

2.设置属性语法

prop("属性",“属性值")

设置或获取元素自定义属性值attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index=“1”

1.获取属性语法

attr("属性") //类似原生getAttribute()

2.设置属性语法

attr("属性"，“属性值"）//类似原生setAttribute()

此方法也可以获取H5自定义属性

数据缓存data（）

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

1.附加数据语法

data("name""value"）//向被选元素附加数据 

2.获取数据语法

date("name") //向被选元素获取数据

同时，还可以读取HTML5自定义属性data-index，得到的是数字型

//这个方法获取data-indexh5自定义属性第一个不用写data-而且返回的是数字型
console.log($("div).data("index")

jQuery内容文本值

主要针对元素的内容还有表单的值操作。

1.普通元素内容htmlO（相当于原生innerHTML）

html()//获取元素的内容

html("内容")//设置元素的内容

2.普通元素文本内容text() (相当与原生innerText)

text() //获取元素的文本内容

text(文本内容"）//设置元素的文本内容

主要针对元素的内容还有表单的值操作。

3.表单的值val()（相当于原生value）

val()

jQuery元素操作

主要是遍历、创建、添加、删除元素操作。

遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1 ：

$("div").each(function(index,domEle){xxx;})

1.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个 2.里面的回调函数有2个参数：index是每个元素的索引号；demEle是每个DOM元素对象，不是jquery对象 3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象s(domEle）

$(function(){
	var arr =["red","green","blue"] 
	$（"div"）.each(function(i，domEle){
		//回调函数第一个参数一定是索引号
		//回调函数第二个参数一定是dom元素对象
		$(domEle).css("color"，arr[i]);
	})
	
})

语法2：

$.each(object , function (inde, element) ( xxx; ) 

1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

2.里面的函数有2个参数：index是每个元素的索引号；element遍历内容

创建元素

语法：

$("<li></li>");

动态的创建了一个<li>

添加元素

1、内部添加

element.append("内容")

把内容放入匹配元素内部最后面，类似原生appendChild。

element.prepend("内容")

把内容放入匹配元素内部最前面

2、外部添加

element.after("内容")  //把内容放入目标元素后面

element.before("内容"）//把内容放入目标元素前面

①内部添加元素，生成之后，它们是父子关系

②外部添加元素，生成之后，他们是兄弟关系

删除元素

element.remove() //删除匹配的元素（本身）

element.empty() //删除匹配的元素集合中所有的子节点 

element.html("")//清空匹配的元素内容

jQuery尺寸、位置操作

jQuery尺寸

• 以上参数为空，则是获取相应值，返回的是数字型
• 如果参数为数学，则是修改相应值。
• 参数可以不必写单位。

jQuery位置

位置主要有三个：offset()、position()、scrollTop()/scrollLeft(()

1.offseto设置或获取元素偏移

①offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。 ②该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。 ③可以设置元素的偏移：offset({top:10,left:30})

2.positiono获取元素偏移

①positiono方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

②只能获取偏移，不能设置元素的偏移

3.scrollTop（）/scrollLeft（）设置或获取元素被卷去的头部和左侧

①scrollTop（）方法设置或返回被选元素被卷去的头部。

带有动画的返回顶部

①核心原理：使用animate动画返回顶部 ②animate动画函数里面有个scrollTop属性，可以设置位置 ③但是是元素做动画，因此$("body,html").animate((scrollTop:0)

jQuery事件注册

单个事件注册语法：

element.事件(function(){})

s（div).click(function(){事件处理程序})

其他事件和原生基本一致。 比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数 语法：

element.on(events,[selector],fn)

1.events:一个或多个用空格分隔的事件类型，如”click”或”keydown”。 2.selector:元素的子元素选择器。 3.fn:回调函数即绑定在元素身上的侦听函数。

$("div").on({
	mouseenter:function(){
		$(this).css("background","skyblue");
	}
	click：function(){
		$(this).css("background""purple");
	}
	mouseleave:function(){
		$(this).css("background","blue");
	}
})

ono方法优势1： 可以绑定多入事件，多个处理事件处理程序

$("div").on({
mouseover：function(), 
mouseout：function (){},
click：function(){}
});

如果事件处理程序相同

$("div").on("mouseover mouseout",function(){
	$(this).toggleclass("current");
});

ono方法优势2： 可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$('ul').on('click'，'ii'，function
alert('helloworld);) ;

事件处理off()解绑事件

offo方法可以移除通过onO方法添加的事件处理程序。

 $（"p"）.off（）//解绑p元素所有事件处理程序
$（"p"）.off（"click"）//解绑p元素上面的点击事件后面的foo是侦听函数名 
$（"ul"）.off（"click"，"li"）；//解绑事件委托

自动触发事件triggero

有些事件希望自动触发比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click()//第一种简写形式

element.trigger（"type"）//第二种自动触发模式

s("p").on("click"，function()
alert("hi~"););
$（"p"）.trigger（"click"）；//此时自动触发点击事件，不需要鼠标点击

element.triggerHandler（"type"）//第三种自动触发模式

jQuery对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用s.extend（）方法语法：

$.extend([deep]，target，objectl，[objectN])

1.deep:如果设为true为深拷贝，默认为false浅拷贝 2.target:要拷贝的目标对象 3.object1:待拷贝到第一个对象的对象。 4.objectN:待拷贝到第N个对象的对象。 5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。 6.深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象。

jQuery多库共存问题概述：

jQuery使用s作为标示符，随着jQuery的流行其他js库也会用这$作为标识符，这样一起使用会引起冲突。客观需求： 需要一个解决方案，让jQuery和其他的is库不存在冲突，可以同时存在，这就叫做多库共存。 jQuery解决方案： 1.把里面的s符号统一改为jQuery。比如jQuery(“div”) 2.jQuery变量规定新的名称：$.noConflict() varxx=$.noConflicto

jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成 注意：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件

jQuery插件常用的网站： 1.jQuery插件库http://www.jq22.com/ 2.jQuery之家http://www.htmleaf.com/

jQuery插件演示： 1.瀑布流 2.图片懒加载（图片使用延迟加载在可提高网页下载速。它也能帮助减轻服务器负载）

3.全屏滚动（fullpage.js） gitHub:https://github.com/alvarotrigo/fullPage.js 中文翻译网站：http://www.dowebok.com/demo/2014/77/

bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件。

Echarts

简介 ECharts是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 zRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

form-serilize

富文本编辑器：

wangEditor