2022.4.1

· JS的组成：q5MTAA.png

· API（应用程序编程接口）：简单理解就是，给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

· Web API：是浏览器提供的一套操作浏览器功能和页面元素的API。

? MDN:https://developer.mozilla.org/zh-CN/docs/Web/API

· 获取元素：1.根据ID获取：

var element=document.getElementById(id);//没有s，element

q5MHht.png

2.根据标签名获取：返回对象的集合，所以想要操作里面的元素就需要遍历；得到元素对象是动态的；父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。

var element=document.getElemensByTagName('标签名');

q5MOc8.png

3.通过HTML5新增的方法获取：

var element=document.getElemensByClassName('类名');//根据类名返回元素对象集合
var element=document.querySelector('选择器');//根据指定选择器返回第一个元素对象
var element=document.querySelectorAll('选择器');//根据指定选择器返回所有元素对象集合

q5Mq9P.png

4.特殊元素获取（body，html）：

var element=doucument.body;//返回body元素对象
var element=document.documentElement;//返回html元素对象

q5MI7d.png

· 事件三要素：（事件：触发—响应机制）

? （1）事件源：事件被触发的对象，谁 按钮

? （2）事件类型：如何触发，什么事件，比如鼠标点击（onckick），还是鼠标经过，还是键盘按下

? （3）事件处理程序：通过一个函数赋值的方式，完成

· 执行事件过程：（1）获取事件源，（2）绑定事件，注册事件，（3）添加事件处理程序q5ML1f.png

· 操作元素：（1）修改元素内容：

element.innerText=名;//从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉，不识别html，非标准
element.innerHTML=名;//起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行，W3C标准

q5MXjS.png

（2）修改元素属性：src、href、id、alt、titleq5Mvng.png

（3）修改表单属性：type、value、checked、selected、disabledq5MxBQ.png

（4）修改样式属性： 1.js里面的样式采取驼峰命名法；js修改style央视操作，产生的行内样式，css权重比较高

element,style=;//行内样式
element.className=;//类名样式

q5Mz7j.png

q5Q9Nn.png

· 显示隐藏文本框内容：获得焦点onfocus、失去焦点onblur

q5QpAs.png

2022.4.2

· 排他思想：如果有同一组元素，我们要某一个元素实现某种样式，需要用到循环的排他思想算法：（1）所有元素全部清除样式（干掉其他人）（2）给当前元素设置样式（留下我自己）（3）注意顺序不能颠倒！qHp7HP.png

· 表格隔行变色：鼠标经过事件onmouseover 鼠标离开事件onmouseoutqHpTBt.png

· 表单全选和取消全选：qHp5jA.png

2022.4.3

· 获得元素（自定义）的属性值：（1）element.属性名；获取内置属性值（元素本身自带的属性）（2）element.getAttribute(‘属性’)；主要获得自定义的属性（标准）我们程序员自定义的属性qq03WR.png

· 设置自定义属性值：（1）element.属性=’值’;设置内置属性值（2）element.setAttribute(‘属性’,’值’);主要设置自定义是属性（标准）qq01Y9.png· 移除自定义属性值：removeAttribute(‘属性’)

·tab栏切换布局分析qq0lFJ.png

· H5自定义属性：data-开头作为属性名并且赋值（1）兼容性获取：element.getAttribute(‘data-index’);

(2)H5新增：element.dataset.index或者element.dataset[‘index’] ie11才开始支持qq0JQx.png

qq0GS1.png

2022.4.4

· 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），在DOM中，节点使用node来表示

? -》 优点：利用节点层级关系获取元素，逻辑关系更强，操作更简便，但兼容性稍差

? -》基本类型：nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）；qOXXLR.png

· 节点操作：（1）父节点操作：node.parentNode;parentNode属性可返回某节点的父节点，注意是最近的一个父节点；如果指定的节点没有父节点则返回nullqOXxdx.png

（2）子节点操作：parentNode.childNodes（标准）;返回包含指定节点的子节点的集合，该集合为即时更新的集合；qOXve1.png

parentNode.children(非标准)；是一个只读属性，返回所有的子元素节点;它只返回子元素节点，其余节点不返回（重点);虽然是非标准，但兼容性好，可放心使用

2022.4.5

（3）第一个子节点：parentNode.firstChild

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

parentNode.firstElementChild

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

（4）最后一个子节点：parentNode.lastChild

返回最后一个子节点，找不到则返回null，也是包括所有的节点（ie9以上才支持）

parentNode.lastElementChild

返回最后一个子元素节点，找不到则返回null（ie9以上才支持）qXAnk4.png

· 兄弟节点：

（1）node.nextSibling

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

（2）node.previousSibling

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

（3）node.nextElementSibling

返回当前元素的下一个兄弟节点，找不到则返回null，ie9以上支持

（4）node.previousElementSibling

返回当前元素的下一个兄弟节点，找不到则返回null,ie9以上支持

· 创建节点：document.createElement(‘tagName’)

由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，称为动态创建元素节点

· 添加节点：（1）node.appendChild(child)

方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里的after伪元素

（2）node.insertBefore(child,指定元素)

方法将一个节点添加到父节点的指定子节点前面，类似css里的before伪元素qXAe7F.png

· 删除节点：node.removeChild(child)

方法从DOM中删除一个子节点，返回删除的节点。

qXAZ0U.png

2022.4.6

· 复制节点（克隆节点）：**node.cloneNode()**方法返回调用该方法的节点的一个副本qvTwWQ.png

· 了解：qvTdJg.png

· DOM（文档对象模型）：是W3C组织推荐的处理可扩展标记语言的编程接口。（总结之前创建，增删改查，属性操作，事件操作）

· 注册事件（绑定事件）：给元素添加事件。俩种方式：传统方式、方法监听注册方式。qvTNo8.pngqvTaFS.pngqvT0zj.png

· attachEvent事件监听方式：qvTDQs.png

qvTryn.png

2022.4.7

· 删除事件（解绑事件）：1.传统方式：eventTarget.onclick=null;

2.方法监听注册方法：①eventTarget.removeEventListener(type,listerner[,useCapture]);

②eventTarget.datachEvent(eventNameWithOn,callback);LpXd4s.png

· DOM事件流：其描述的是从页面中接收事件的顺序；事件发生时会在元素节点之间按照特定的顺序传播。LpXaNj.png

-》三个阶段：1.捕获阶段；2.当前目标阶段；3.冒泡阶段LpXUEQ.png

· 事件对象：event对象代表事件的状态，如键盘按键的状态，鼠标垫位置，鼠标按钮的状态。即事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象eventLpXB3q.png

· 事件对象的常见属性和方法：LpXDg0.png

· target和this的区别：LpXyuT.png

· 默认阻止行为：LpXRUJ.png

· 阻止事件冒泡：①标准写法：利用事件对象里面的stopPropagation() e.stopPropagation()

②非标准写法：IE678 利用事件对象cancelBubble属性LpX6DU.png

· 事件委托（事件代理）：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。（面试会问）作用是只操作一次DOM，提高了程序的性能。LpX2E4.png

· 常用鼠标事件：LpXcbF.pngLpX5gx.png

· 禁止选中文字和禁止鼠标右键菜单：LpXW59.png

· 获得鼠标在页面的坐标：LpX0Cn.jpg

· 常用键盘事件：LpXhCR.png

· keyCode判断用户按下了哪个键：LpX481.pngLpXIv6.png

· BOM（浏览器对象模型）：它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。window对象是浏览器的顶级对象，它具有双重角色（接口、全局对象）。LpXTKK.png

2022.4.8

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

window.onload=function(){};

window.addEventListener("load",function(){});

L9xiW9.png

document.addEventListener('DOMContentLoaded',function(){})

L9xFzR.png

· 调整窗口大小事件：

window.onresize=function(){}

window.addEventListener("resize",function(){});

L9xPJJ.png

· 定时器：

window.setTimeout(调用函数,延时时间的毫秒数);
window.setInterval();同上

L9xCi4.pngL9xEsx.png[L9xVL6.pngL9xAQ1.png](https://imgtu.com/i/L9xVL6)

· **setTimeout()**回调函数：

· 停止setTimeout()定时器： 

window.clearTimeout(timeoutID)//win可省略，括号里是定时器标识符

· 清除setIterval()定时器：

window.clearInterval(intervalID);//win可省，括号里是定时器标识符

L9xmdO.png

· this指向问题：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this指向谁，一般this的最终指向的是那个调用它的对象

? 1.全局作用域或者普通函数中this指向全局对象window（注意定时器里的this指向window）

? 2.方法调用中谁调用this，就指向那个调用它的对象

? 3.构造函数中this指向构造函数的实例

· JS执行机制 ：（单线程：同一时间只能做一件事）现在可多线程的L9xeeK.pngL9xMJH.png

-》同步：前一个任务结束后在执行后一个任务，程序的执行顺序与任务的排序顺序是一致的、同步的。

-》异步：在做这件事的同时，还可以处理其他事情。L9xnoD.png

· location对象：window对象给我们提供一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，这个属性返回的一个对象就是location对象。

属性和方法：L9xKFe.pngL9x3QI.png

·URL:统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL。L9xQWd.png

· navigator对象：其包含有关浏览器的信息，可判断用户要用哪个终端打开页面，实现跳转

· history对象：与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL。L9x1SA.png

· 元素偏移量offset：可以动态获得该元素的位置（偏移），大小等。L9x8yt.png

L9xGOP.png

· offset与style区别：LPWr1e.png

· 元素可视区client（客户端）系列：用相关属性来获取元素可视区的相关信息，还可以动态获得该元素的边框大小、元素大小等。LPW0fO.png

· 立即执行函数：不需要调用，立马能够自己执行的函数

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

LPWs6H.png

· 元素scroll（滚动的）系列属性：可以动态得到该元素的大小、滚动距离等LPWwtK.pngLPWDpD.png

· 三大系列总结：LPW27t.png

LPWcnA.png

· mouseenter和mouseover的区别：LPWg0I.png

· 动画实现原理：核心原理：通过定时器setInterval()不断移动盒子位置

? 1.获取盒子当前位置

? 2.让盒子在当前位置加上1个移动距离

? 3.利用定时器不断重复这个操作

? 4.加一个结束定时器的条件

? 5.注意此元素需要添加定位，才能使用element.style.leftLPWftf.png

· 简单动画函数封装：需要传递2个参数，动画对象和移动到的距离LPWWAP.png

· 动画函数-给不同对象添加不同定时器：当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器；解决:r让我们元素只有一个定时器执行，先清除以前的定时器，只保留当前的一个定时器执行

· 缓慢（让元素运动速度有所变化）动画原理：

? 1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

? 2.核心算法（目标值-现在的位置）/10，作每次移动的距离步长

? 3.停止的条件：让当前位置等于目标位置就停止定时器

? 4.注意步长值需要取整LPW59S.png

· 动画函数添加回调函数：（回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程叫回调）

· 动画函数封装到单独JS文件里：

1.单独新建一个JS文件；2.引用JS文件；3.写相关属性

· 节流阀：防止轮播图按钮连续点击造成播放过快。LPWhh8.pngLPWocQ.png

· 移动端touch（触屏）事件：touch对象代表一个触摸点LPWI1g.png

· 触摸事件对象（TouchEvent）：LPWTXj.pngLPWOA0.png

· 移动端拖动元素：LPWbBn.pngLPWHns.png

· click延时解决方案：LPWXNV.png

· fastclick插件：（JS插件就是JS文件）可解决300ms延迟。GIthub官网：https://github.com/ftlabs/fastclick

· Swiper轮播图插件：https://www/swiper.com.cn/

? 1.引用相关文件；2.按照语法规范使用LPWq7q.png

· 其他移动端常见插件：

? superslide：http://www.superslide2.com/

? iscroll： https://github.com/cubiq/iscroll

· 本地存储：LPfSc4.png

（1）window.sessionStorageLPfpjJ.png

（2）window.localStorage

LPfCu9.png