1.按钮属性
let btn=document.getElementById('btn1');
①禁用：值为布尔值，true为禁用，false为可用
btn.disabled=true;
②选中：值为布尔值，true为被选中，false为非选中
btn.checked=false;
2.函数整理
①申明函数，具名函数：
function fun(){ };
fun();
函数自己不会执行，必须调用才可以执行，调用函数的方式，就在函数后面加（）
②匿名函数（表达式函数）
注意：函数其实也是数据，也是值（表达式函数,函数的表达式形式）
let fn=function( a,b) { }
定义函数的参数是形参，调用函数的参数是实参
返回值是把这个值返回到调用函数的位置，如果return后面不写值，就会返回undefined,如果函数不写return，那么函数在执行完所有代码之后会把undefined返回
③自调用函数,当函数执行的时候，会开辟新的作用域空间，这个函数里面的变量是局部变量，不可以拿到外面使用
;（ function() {} ）()
3.高阶函数与回调函数
将别的函数当参数的函数是高阶函数
被别的函数当参数的函数是回调函数
使用场景：给定时器当参数
setInterval（ function( ) { } , 1000 ）
4.环境变量this
每个函数中都有this,函数中的this指向调用者
5.事件监听-----addEventListener
①要给谁监听事件就要先获取谁
②监听事件：事件源，事件类型，事件处理函数
（ 事件类型是用户做的动作：click、dbclick、mouseover、mouseout......，
事件源.addEventListener(' 事件类型 '，function（）{ }) ）
6.事件处理函数里面的this
this指向当前事件源
验证
7.获取元素的方法
选择器：获取元素
获取单个：document.querySelector('选择器');
获取多个：document.querySelectorAll('选择器');
8.样式案例
①只让当前元素有背景颜色，其他的不准有背景颜色
②排他思想：在给当前元素设置样式之前，先把所有的元素的背景清除，最后再给当前这个元素加背景
案例----排他思想
9.行内事件
在模板中直接添加事件
<input type="button" value="点击" onclick="fn(123)">
10.DOM0和DOM2事件
①DOM0：同类型的事件只能有一个，后面的会覆盖前面的执行函数，元素.onclick = function () {}
btn.onclick = function () {
console.log('很多代码');
}
移除事件
btn.onclick = null;
②DOM2：同类型的事件可以绑定多个，每个执行函数都会被执行，元素.addEventListener('click', function () {});，写法如下
btn.addEventListener('click', function () {});
移除事件：如果事件监听移除事件，那么事件函数必须有名字，没有名字无法移除这个事件
① let f1 = function () {
console.log('a');
}； // 函数命名
② btn.addEventListener('click', f1);// 监听点击事件
③ btn.removeEventListener('click', f1);//移除点击事件
11.事件对象
如何使用事件对象？只需要在回调函数写一个形参，通常由e,ev,event来表示。
事件类型：e.type
获取鼠标位置：
e.clientX/clientY------鼠标相对于可视窗口的位置
e.pageX/pageY------鼠标相对于文档的位置
e.offsetX/offsetY------鼠标相对于当前元素的位置
12.函数的递归
递归是函数的高级用法，本质上是函数自已调用自已，它的行为非常类似循环，如果一个函数内部调用自已本身，并且通过条件控制避免陷入死循环，那么我们称这个函数为递归函数。
它的三个特性：重复执行，调用自身，必须要有条件控制，避免死循环
练习
1.求任意一个数的阶乘？（6的阶乘等于 6*5*4*3*2*1；）
function jc( n ) {
if( n=1 ) {return 1}
return n* jc(n-1);}
2.求兔子数列：1、1、2、3、5、8、13、21、34,第n个月有多少对兔子?(递归点：每个月的兔子数都是前两个月的兔子数相加。出口点：第一个月和第二个月的兔子数都是1）
案例执行代码
13.节点操作
插入节点
先创建一个想要插入的节点，通过creatElement
let newLi=document.creatElement('li');
插入这个创建的li节点到ul中,有两种方式
①父元素.appendChild(新的元素)------appendChild：往父元素的内部的 ul.appendChild(newLi);
②insertBefore：父元素.inserBefore(新, 旧);往父元素的内部的某个元素前面插入元素
ul.insertBefore(newLi, li2);
删除节点------removeChild
替换节点------replaceChild
14.输入事件
输入时候触发的事件：input
打印this.value值为每次输入时输入框的内容
15.节点关系
获取节点
父节点：子节点.parentNode;
img.parentNode.parentNode.parentNode
所有子节点：父节点.childNodes
box.childNodes[0]
元素子节点：父节点.children
box.children
第一个子节点：box.firstChild
第一个元素子节点： box.firstElementChild
最后一个子节点： box.lastChild
最后一个元素子节点： box.lastElementChild
下/上一个元素兄弟： nextElementSibling/previousElementSibling
img.nextElementSibling / previousElementSibling
下/上一个兄弟：nextSibling/previousSibling
img.nextSibling / previousSibling
16.事件流
事件流指的是事件完整执行过程中的流动路径，假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段（默认存在的），捕获阶段是 从父到子 冒泡阶段是从子到父
①事件冒泡是默认存在的， 它指的是：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件，事件捕获需要写对应代码才能看到效果
②addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）， 若传入false代表冒泡阶段触发，默认就是false，若是用 L0 事件监听，则只有冒泡阶段，没有捕获
元素.addEventListener( '事件类型'，回调函数，true ) ；//捕获阶段
③阻止事件流动
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
若想把事件就限制在当前元素内，就需要阻止事件流动
阻止事件流动需要拿到事件对象
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
事件对象.stopPropagation( )
( ➢ mouseover 和 mouseout 会有冒泡效果
➢ mouseenter 和 mouseleave 没有冒泡效果(推荐) )
17.事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
➢ 事件委托其实是利用事件冒泡的特点，给父级元素加事件
➢ 事件对象.target 可以获得真正触发事件的元素
动态创建的元素要事件委托，e.target能找到目标元素
18.事件
scroll：滚动条发生滚动的时候触发的事件，如果整个窗口都带有滚动条，那么就把这个事件借给window
resize：窗口尺寸发生改变时触发的事件
load：资源加载完成之后触发的事件
window.addEventListener('load', function () {
console.log('页面加载完成');
});
①滚动事件：window.onscroll = function () {}
②尺寸改变事件：window.onresize = function () {}
③加载事件：window.onload = function () {}
19.节点大小（设置要加单位）
元素.clientWidth、元素.clientHeight------用于获取元素大小：包含的是width+padding（获取的是数字类型的结果，注意，不可以设置，只能用来获取）
元素.offsetWidth、元素.offsetHeiht------用来获取元素大小：包含的是width+padding+border
元素.scrollWidth、元素.scrollHeight------ 用来获取元素大小：包含：width+padding+溢出
20.元素的位置（设置时要加单位）
offsetLeft、offsetTop：参照定位父
offsetParent：返回第一个定位的祖先元素
元素.scrollTop、元素.scrollLeft：节点卷起位置，动态获取元素滚动的位置， 允许被赋值动态改变元素的滚动位置，这个属性可以设置
getBoundingClientRect ：获取相对于浏览器窗口左上角的位置及元素的大小
clientLeft / clientTop: 指的是边框的宽度
设置
div.style.left = left + 'px';
应用：拖拽练习
①获取移动的元素
let div = document.querySelector('div');
②鼠标按下时记录鼠标相对于元素的位置
记录 鼠标相对于元素的位置
③鼠标松开，移除mousemove事件
移除mousemove事件
④设置元素的left和top实现元素的移动
元素的left是由鼠标相对于浏览器可视窗口的clientWidth与鼠标相对于元素的offsetWidth的差得来，top值同理，这里做了当元素的left与浏览器之间宽度小于30px,元素自动吸边功能，如果
实现逻辑
网友评论