目录
DOM
- 获取单个元素:docement.querySelector()
- 获取多个元素:document.querySelectorAll()
- 获取文本:元素.inner.Text
- 获取文本 + 标签:inner.HTML
- 元素属性操作:
(1)元素.href = 值
(2)元素.src = 值 - 表单元素中独有属性
(1)表单内容: 元素.value
(2)表单状态: 布尔类型
元素.disabled :是否禁用
元素.checked :是否选中(用于radio与checkbox中)
元素.selected:是否选中(用于下拉菜单select>option中) - 元素自定义属性
(1)dataset语法(只能操作固定格式的自定义属性)
设置属性: <标签名 data-属性名="属性值"></标签名>
获取属性: 元素.dataset.属性名
(2)attribute语法(可以操作任意格式的自定义属性)
获取属性:元素.getAttribute('属性名')
新增属性:元素.setAttribute('属性名',属性值)
删除属性:元素:removeAttribute - 元素style操作样式(行内权重)
元素.style.样式名 = 样式值 - 元素className操作样式
元素.className = '类名' - 元素.classList
(1)新增类名: 元素.classList.add('类名')
(2)移除类名: 元素.classList.remove('类名')
(3)切换类名: 元素.classList.toggle('类名')
* 切换:有则移除,无则新增 - 事件监听
(1)点语法注册事件: 事件源.on事件类型 = 事件处理函数
(2)事件源.addEventListener('事件类型',事件处理函数)
***事件类型:
鼠标点击:click
鼠标双击:dblclick
鼠标移入:mouseenter
鼠标移出:mouseleave
鼠标移动:mousemove
鼠标按下:mousedown
鼠标松开:mouseup
成为焦点:focus
失去焦点:blur
滚动条:scroll
大小变化:resize
键盘按下:keydown
键盘松开:keyup - 事件对象(存储与事件触发相关信息)
使用:给事件处理函数添加形参(这里我用的e)
鼠标触发点:e.pageX e.pageY
按键信息:e.key - 事件捕获
唯一注册方式:元素.addEventListener('事件类型',事件处理函数,true) - 事件流三个阶段
事件对象.eventphase(获取的值是1,2,3)
1-捕获阶段,2-目标阶段,3-冒泡阶段 - 阻止事件流动
事件对象.stoppropagation - 阻止默认事件(html中有部分标签自带点击事件:form表单,a标签)
事件对象.preventDefault - 三大家族
(1)offset家族:获取元素'自身'的真实宽高 和 位置
(2)scroll家族:获取元素'内容'的真实宽高 和 位置
(3)client就在:获取元素'可视区域'的 宽高 和 位置
语法一样,例:
元素.offsetWidth/Height
元素:offsetTop/Left - 页面加载事件
(1)load :等待DOM树 + 外部资源(图片,css文件等)加载完毕
(2)DOMContentLoaded:等待DOM树加载完毕 - 节点 node:网页一切内容皆为节点
其分为:元素节点,属性节点,文本节点,注释节点 - 查询节点
(1)获取子节点:元素.childNodes
(2)获取子元素:元素.children
(3)获取兄弟元素:
获取上一个元素: 元素.previousElementSibling
获取下一个元素: 元素.nextElementSibling
(4)获取父元素: 元素.parentNode - 新增节点
(1)在内存中创建空标签: document.createElement('标签名')
(2)设置标签内容
(3)添加到页面dom :
新增到最后面: 父元素.appendChild(元素)
新增到元素前面: 父元素.insertBefore(要加的元素,哪一个元素前面) - 删除节点
(1)父元素.removechild(子元素)
(2)子元素.remove() - H5端触摸事件
(1)手指触屏开始事件: touchstart
(2)手指触屏滑动事件: touchmove
(3)手指触屏结束事件:touchend - forEach遍历数组
数组名.forEach(item,index){
形参item:数组中的每个元素
形参index:数组元素的索引号
} - 截取字符串
字符串.substring(起始索引号,结束索引号)
BOM
五大对象:
1.window:浏览器窗口
2.location:地址栏
(1)跳转页面:location.assign('网址') **可以回退,简洁写法: location.href = '网址'
(2)替换页面:location.replace('网址') **不可以回退
(3)刷新页面:location.reload()
3.history:历史记录
(1)下一页:history.forward()
(2)上一页:history.back()
(3)指定页:history.go() **正数前进,负数后退
4.navigator:用户信息
navigator.userAgent ---- 用户设备信息 + 浏览器信息
5.screen:用户电脑屏幕
定时器:
作用:一段代码 间隔一定时间 重复执行
1.永久定时器
(1)开启： let timeID = setInterval( 回调函数 , 间隔时间 )
(2)清除： clearInterval( timeID )
2.一次定时器
(1)开启： let timeID = setTimeout( 回调函数 , 间隔时间 )
(2)清除： clearITimeout( timeID )
日期对象：
1.得到当前的日期和时间
const date = new Date()
2. 得到指定的日期和时间
const date = new Date('2099-12-12 08:08:08')
2.2.格式化日期对象-转换成开发中常见的日期和时间格式
const myDate = new Date()
console.log(myDate.getFullYear()) // 得到年份 数字型的 2023
console.log(myDate.getMonth() + 1) // 得到月份 数字型的 0 需要加1
console.log(myDate.getDate()) // 得到几号 数字型的 27
console.log(myDate.getDay()) // 得到星期 数字型 5
console.log(myDate.getHours()) // 得到小时
console.log(myDate.getMinutes()) // 得到分钟
console.log(myDate.getSeconds()) // 得到秒数
console.log(`现在的日期是:${myDate.getFullYear()}年${myDate.getMonth()
3.获取时间戳
（1）new Date('指定日期').geiTime()
(2) +new Date()
(3) Date.now() **得到当前日期的时间戳
存储对象
(1) localStorage:本地存储,永久存储,数据存在硬盘中,只能存储string类型数据
存数据 ： localStorage.setItem('属性名',属性值)
取数据 ： localStorage.getItem('属性名')
删数据 : localStorage.removeItem('属性名')
清空数据 : localStorage.clear()(2) sessionStorage : 临时存储
存数据 ： sessionStorage.setItem('属性名',属性值)
取数据 ： sessionStorage.getItem('属性名')
删数据 : sessionStorage.removeItem('属性名')
清空数据 : sessionStorage.clear()(3) JSON格式
/*
1.JSON是什么: 是一种数据格式，本质字符串
* JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
2.JSON作用 : 解决数据 跨平台兼容性
* 在实际开发中,我们前端要经常与服务器(后端)进行数据交互。而前端与后端编程语言不同。
前端： js , 后端： java、c++ 、 php 、 python 、 .net 、 c# 、 go 等等
不同的编程语言数据类型不一致。无法互通的 。 为了可以让不同的编程语言之间可以进行数据交互，后来人们发明了一种所有编程语言都通用的格式 ： 叫做 JSON 。
3.JSON语法 :
json -> js : let jsObj = JSON.parse( json格式 )
js -> json : let jsonStr = JSON.stringify( js对象 )
*/ 
4889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
