JS 学习\温习记录，持续更新

JS API

一、修改页面中内容

innerHtml:可以修改普通元素，无法修改表单元素;
.value：修改表单元素的;

二、增加样式属性

追加元素：classList.add(‘类名);
删除类：classList.remove(’‘);
切换类：classList.toggle(’'); // 有就删掉，没有就加上

三、自定义属性

dataset:自定义属性的集合：
1.dataset.id ;
2.dataset . 定义的属性名

四、定时器

setInterval(函数,间隔时间)：间歇函数;
关闭定时器：clearInterval(变量名);

五、事件监听

• 语法：

$\textcolor{green}{元素对象} $.addEventListener(‘事件类型’，要执行的函数)

• 三要素：

  事件源： 获取dom元素

  事件类型：用深恶么方式，比如鼠标单击click，鼠标经过mouseover等等

  事件调用的函数：要做什么事

​ 事件监听版本：

1. on 方式：事件源.on事件 = function(){};
2. addEventListnener方式：元素对象.addEventListener(‘事件类型’，要执行的函数)

btn.onclick = function(){
	alert(11)
}
btn.onclick = function(){
	alert(22)
}
btn.addEventListener('click',function(){
    alert(11)
})
btn.addEventListener('click',function(){
    alert(11)
})

上面代码，on方式会覆盖之前的方法，会弹出’22’，然而，addEventListener会依次弹出11，22，所以推荐使用addEventListener方式。

• 事件类型：
  1. 鼠标事件：鼠标触发的方式——鼠标点击click、鼠标经过 mouseenter、鼠标离开 mouseleave。
  2. 焦点事件：表单获得光标——获得焦点 focus、失去焦点 blur
  3. 键盘事件：键盘出发的方式——键盘按下触发 ketdown、键盘抬起出发 keyup。
  4. 文本事件：表单输入触发—— 用户输入事件 input

六、环境对象

• this

  指的是函数内部特殊的变量this。总结：谁调用，this就是谁。

  .addEventListener('click',function(){
  	consloe.log(this) ；// 此时this指向的就是该dom元素
  })
  

  如果单纯的是一个函数中this指向的就是window

  function fn(){
   console.log(this) //this指向的window
  }
  

七、回调函数

​ 如果把一个函数当作另外一个函数参数传递的时候，那么这个函数就是回调函数

function fn(){
	console.log('函数1')
}
setInterval(fn,1000)
// 此时fn就是回调函数

八、事件流

• 事件流指的是事件完整执行过程中的流动路径

  分为2个阶段：捕获阶段、冒泡阶段。简单来说就是：捕获阶段就是从父到子 冒泡阶段就是从子到父

  实际工作大部分就是冒泡为主。

阻止冒泡 ：事件对象.stopPropagation()

e.stopPropagation();

阻止（元素）默认行为 提交

e.preventDefault();

解绑事件：

// 1
btn.onclick = null；
// 2
btn.removeEventListener('click',function(){
	//执行代码 
})

九、事件委托

是一种 技巧，优点：减少注册次数，可以提高程序性能

// 事件对象.target.tagName
e.target.tagName === ''

十、其他事件

• 加载事件

// 等待页面所有资源加载完毕，就回去执行回调函数，此处是script写在head标签里面得处理方式
window.addEventListener('load',function(){})
// 或者
document.addEventListener('DOMContnetLoaded',function(){})

• 滚动事件

scroll

window.addEventListener('scroll',function(){})

• 获取位置

scrollLeft scrollTop

// document.documentElement 获取到得是html元素
document.documentElement.scrollTop

• 页面尺寸

resize 浏览器窗口大小发生变化的时候触发得事件

window.addEventListener('resize',function(){})

可见元素的宽高：clientwidth clientHeight

可见元素得宽高（包含padding，border）：offsetWidth offsetHeight

获取位置:获取元素距离自己定位腹肌元素得左、上距离：offsetLeft、offsetTop。注意：这2个是只读属性

十一、日期对象

• 实例化

new，这个new关键字操作就是实例化

获取当前时间

const date = new Date()

• 日期对象方法

1. getFullYear() 获得年份：获取4位年份
2. getMonth() 获得月份：取值为0~11
3. getDate() 获得月份中得每一天：不同月份取值不同
4. getDay() 获取星期：取值为0~6
5. getHours() 获取小时：取值为0~23
6. getMinutes() 获取分钟：取值为0~59
7. getSeconds() 获取秒：取值为0~59

date.toLocaleString() // 2023/3/16 09:41:21
date.toLocaleDateString() // 2023/3/16
date.toLocaleTimeString() //  09:41:21

• 时间戳

三种获取方式：

1. getTime()

   const date = new Date()
   date.getTime() // 获取得就是时间戳
   

2. +new Date()

3. Date.now()

十二、节点操作

• DOM节点

DOM树里面每一个内容都称为节点

1. 元素节点： body div，html(根节点)
2. 属性节点： href
3. 文本节点： 所有的文本
4. 其他

• 查找结点

1. 父节点

   • parentNode :可以依次嵌套 parentNode.parentNode 依次选择

2. 子节点

   • childNodes
   • children

3. 兄弟节点

   • nextElementSibiling
   • previousElementSibling

• 增加节点

比如，点击发布按钮，可以新增一条信息

// 创建节点
const div = document.createElement('div')
const li = document.createElement('li')
// 追加节点(插入到父元素的最后一个子元素)
document.body.appendChild(div)
// 追加节点(插入到父元素中某个子元素前面) 适合发布评论
document.body.insertBefore(要插入的元素，在那个元素前面)
// eg:document.body.insertBefore(div,li)

• 克隆节点

  元素.cloneNode(布尔值)
  // 布尔值为true 克隆所有的包括子内容
  // 布尔值为false 只克隆当前节点
  

• 删除节点

  必须通过父元素删除

  父元素.removeChild(要删除的元素)
  

十三、M端事件

触屏touch事件	说明
touchstart	手指触摸到一个dom元素时触发
touchmove	手指在一个dom元素上滑动时触发
touchend	手指从一个dom元素上移开时触发

十四、本地存储

• localStorage

1. 存储数据：localStroage.setItem(key,value)
2. 获取数据：localStorage.getItem(key)
3. 删除数据：localStoage.removeItem(key)

• sessionStorage

1. 存储数据：sessionStorage.setItem(key,value)
2. 获取数据：sessionStorage.getItem(key)
3. 删除数据：sessionStorage.removeItem(key)

• 存储复杂数据类型

1. 存储对象

   const obj = {
       name:'ljh',
       age:'24'
   }
   localStorage.setItem('obj',JSON.stringify(obj))
   // 取回来的时候需要转换 JSON.parse(localStorage.getItem('obj'))
   

十五、数组map 、join方法

• map 可以遍历数组处理数据，并且返回新的数组
• join 方法用于吧数组中的所有元素转换一个字符串