js-api
DOM
获取DOM元素
1.选择匹配的第一个元素
语法:
document.querySelector('css选择器');参数:
包含一个或多个有效的的css选择器 字符串
返回值:
css选择器匹配的第一个元素,一个HTMlElement对象,如果没有匹配到,则返回null
2.选择匹配多个元素
语法:
document.querySelectorAll('ul li');参数:
包含一个或多个有效的css选择器 字符串
返回值:
css选择器匹配的NodeList 对象集合
得到的是一个伪数组:
有长度索引的数组
但是没有pop(),posh() 等数组方法
想要得到里面的每一个对象,则需要遍历 (for) 的方式获得
3.其他方法获取DOM元素
// 根据id获取一个元素
document.getElementById('nav')
// 根据 标签获取一类元素 获取页面 所有div
document.getElementsByTagName('div')
// 根据 类名获取元素 获取页面 所有类名为w的
document.getElementsByClassName('w')操作元素内容
DOM对象是根据标签生成的,所以操作标签,本质上就是操作DOM对象
就是操作对象使用的点语法
innerText
将文本内容添加/更新到任意标签位置
显示纯文本,不解析标签
const box = document.querySelector('.box')
console.log(box.innerText) //获取文字内容
box.innerText = '我是一个盒子' //修改文字内容innerHTML
将文本内通添加/更新到任意标签位置
会解析标签,多标签建议使用模版字符
const box = document.querySelector('.box')
box.innerHtml ='<strong>我要更换</strong>' 通过style 属性操作CSS
语法:
//对象.style.样式属性 = 值
const box = document.querySelector('.box') //通过类名查找
//修改元素样式
box.style.width = ‘200px’;
box.style.backgroundColor = 'pink';通过类名(className)操作css
如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式
语法
//active 是一个css类名
元素.className = ‘active’注意:
由于class是关键字,所以使用className去代替
className是由于新值换旧值,如果需要添加一个类,需要保留之前的类名
通过classList 操作类控制css
为了解决className 容易覆盖以前的类名 ,我们可以通过classList方式最加和删除类名
语法:
//追加一个类
元素.classList.add('类名');
//删除一个类
元素.classList.remove('类名');
//切换一个类
元素.classList.toggle('类名');操作表单元素 属性
表单很多情况 也需要修改属性, 比如点击眼睛 ,可以看到密码
正常的有属性有取值的 跟其他的标签属性没有任何区别
表单.value ='用户名'
表单.type ='password'表单属性中添加就有很多效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如: disabled ,checked, selected
Button 比较特殊为双标签 要用innerHTML获取
<input type='checkbox' name ='' id='' >
//js
const ipt =document.querySelector('input')
console.log(ipt.checked);//flase
ipt.checked = true; //此时复选框会勾选上自定义属性
标准属性: 标签天生自带的属性 比如class Id title 等,可以直接使用点语法操作比如: disabled checked selected
自定义属性:
在html5中推出了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<body>
<div class='box' data-id='10'>
盒子
</div>
<script>
const box =document.querySelector('.box')
console.log(box.dataset.id)//获取id
</script>
</body>自定义属性通过 dataset.xx 获取属性
定时器
开启定时器
setInterval(函数,时间间隔)作用:每隔一段时间调用这个函数
间隔时间单位是毫秒
关闭定时器
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)事件监听
语法
元素对象.addEventListener(‘时间类型’,要执行的函数)事件监听三要素
事件源:获取dom元素
事件类型:比如鼠标单击 click 鼠标经过mouseover
事件调用函数
<button> 按钮 </button>
<script>
const btn = document.querySelector('.btn')
btn.addEvenlistener('click',function(){
alter('点击了')
})
</script>事件监听版本
DOM L0
事件源.on事件 = function(){}
DOM l2
事件源.addEventLIstener(事件,事件处理函数)
区别:
on方式会被覆盖 , addEventListerner方式可绑定多次, 拥有事件更多特性, 推荐使用
const btn = document.querSelector('botton');
btn.onclick = function(){
alter(11);
}
btn.onclick = function(){
alter(22);
}事件:
鼠标触发
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开
表单获得光标
focus 获得焦点
blur 失去焦点
键盘触发
Keydown 键盘按下触发
Keyup 键盘抬起触发
表单输入事件
input 用户输入事件
获取事件对象
语法:如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event, ev, e
元素.addEventListener('click',function(e){
console.log(e); //会输出事件对象
})部分常用属性
type
获取当前的事件类型
clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置
key
用户按下的键盘键的值
不提倡使用keyCode
<script>
const textarea = document.querySelector("#tx");
const total = document.querySelector(".total");
const item = document.querySelector(".item");
const text = document.querySelector(".text");
textarea.addEventListener("focus", function () {
total.style.opacity = 1;
});
textarea.addEventListener("input", function () {
total.innerHTML = `${textarea.value.trim().length}/200字`;
});
textarea.addEventListener("keyup", function (e) {
text.innerHTML = textarea.value;
if (e.key === "Enter" && textarea.value.trim() !== "") {
item.style.display = "block";
total.innerHTML = "0/200字";
textarea.innerHTML = textarea.value;
textarea.value = "";
}
});
</script>!!! Trim() 可以去除str中的前后空格 但不会去除文字中的空格
环境对象
指的是函数内部特殊的 变量this ,它代表当前函数运行时所处的环境
作用: 弄清楚 this的指向, 可以让我们代码更简洁
函数的调用方式不同, this 指代的对象也不同
直接调用this ,其实相当于是window函数,所以 this 指代 window
const btn =document.querySelector('button')
btn.addEventlistener('click',function () {
console.log(this) // this指向的就是环境对象-button
})回调函数
如果将函数A作为参数传递给B时 我们称A为回调函数
简单理解: 当一个函数当作参数来传递给另外一个函数的时候,这个函数就是回调函数
常见的使用场景
function fn(){
console.log('123');
}
//fn传递给了setInterval,fn就是回调函数
setInterval(fn.1000);事件流
事件流指的是事件完整执行过程中的流动路径
说明: 假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段 , 冒泡阶段
简单来说: 捕获阶段是 从父到子 冒泡阶段是从子到父
事件捕获
从DOM的根元素开始去执行对应的事件(从外到里)
代码
DOM.addEventList(事件类型, 事件处理函数, 是否使用捕获机制)说明
addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)
若传入false代表冒泡阶段触发,默认就是false
若是用L0事件监听,则只有冒泡阶段 没有捕获
事件冒泡
当一个元素的事件被触发时,同样的事件会在该元素的所有祖先元素中依次触发. 这一过程被称为事件冒泡
当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
L2事件监听第三个参数是fals,或者默认都是冒泡
阻止冒泡
语法
事件对象.stopPropagation()注意: 此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
解绑事件
on事件方式,直接使用 null覆盖就可以实现事件的解绑
语法:
btn.onclick = function(){
alter('点击了')
}
btn.onclick=null;addEventListener方式,必需使用:
removeEventListener(事件类型,事件处理函数 [获取捕获或者冒泡阶段])
例如
function fn(){
alter('点击了')
}
//绑定事件
btn.addEventListener('click',fn)
//解绑事件
btn.removeEventListener('click',fn)!!!注意:匿名函数无法被绑定
鼠标经过事件的区别
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)
事件委托
优点: 减少注册次数 ,可以提高程序性性能
原理:事件委托其实利用事件冒泡的特点
给父元素注册事件,当我们触发子元素的内容,会冒泡到父元素身上,从而触发父元素的事件
事例:
冒泡效果: 从子元素找到父元素
<body>
<ul>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
<p>111</p>
</ul>
<script>
const ul = document.querySelector("ul");
ul.addEventListener("click", function (e) {
if (e.target.tagName === "LI") //区别点击名字
{
e.target.style.color = "red";
}
});
</script>
</body>可以通过.target来获得真正触发事件的元素
可以通过.target.tagName来获取触发元素的名字
阻止默认行为
我们某些情况下需要阻止默认行为的发生 , 比如 阻止 链接的跳转, 表单域跳转
语法:
e.preventDefault()页面加载事件
事件名: load
监听页面所有资源加载完毕
给window 添加load事件
//页面加载事件
window.addEventListener('load',function(){
//执行操作
})当初始的HTML文档被完全加载和解析完成之后, DOMContentL.oaded事件被触发,而无序等待样式表,图像等完全加载
事件名:DOMContentLoaded
监听页面DOM加载完毕:
给document添加DOMContentLoaded事件
//页面加载事件
document.addEventListener('DOMContentLoad',function(){
//执行操作
})页面滚动事件
事件名: scroll
监听整个页面滚动
// 页面滚动
window.addEventListener('scroll',function(){
//执行操作
})scrollLeft 和scrollTop(属性)
获取被滚动的大小
获取元素内容向左 向上滚出去的距离
这两个值都是可读写的
调用
//获取HTML元素的写法
let scrollTop =document.documentElement.scrollTop页面尺寸事件
会在窗口尺寸改变的时候触发事件:
resize
window.addEventListener('resize',function(){
//执行代码
})检测屏幕宽度
window.addEventListener('resize',function(){
let w =document.documentElement.clientwidth;
console.log(w)
})获取元素宽高
获取宽高:
获取元素的可见部分宽高(不包含边框,margin,滚动条等)
clientWidth和clientHeight
获取元素尺寸
获取宽度
获取元素的自身设置的宽高 padding border
offsetWidth 和 offsetHeight
获取出来的是数值,方便计算
注意:获取的是可视宽高,如果盒子是隐藏的,获取出来结果是0
获取位置:
获取元素距离自己定位父元素的左 ,上 距离
offsetLeft和offsetTop 注意是只读属性
检测盒子位置 最近一级带有定位的祖先元素
第二种获取方法:
element.getBounfingClientRect()
返回元素的大小及其相对于视口的位置
日期对象
实例化
在代码中用new关键字 ,一般这个操作称为实例化
创建一个时间对象并获取时间
获取当前时间
const date = new Date()获得指定时间
const date = new Date('2xxx-x-xx')
console.log(date)日期对象方法
时间戳
使用getTime()方法
const date =new Date()
console.log(date.getTime)
//必需实例化简写 +new Date()
无需实例化
console.log(+new Date())使用Date.now()
无序实例化
但是只能得到当前的时间戳,而前面两种可以返回特定的时间戳
DOM节点
DOM节点
DOM树里每一个内容都称之为节点
节点类型
元素节点
所有的标签 比如body div
html是根节点
属性节点
所有的属性 比如 herf
文本节点
所有的文本
查找节点
节点关系 : 针对的找亲戚返回的都是对象
父节点
子节点
兄弟节点
父节点查找:
parentNode 属性
返回最近一级的父节点 找不到返回为null
子元素.parentNode子节点查找
childNodes
获得所有子节点,包括文本节点(空格 换行) 注释等
children属性
仅获得所有元素节点
返回的还是一个伪数组
父元素.children兄弟关系查找
下一个兄弟节点
nextElementSibling 属性
上一个兄弟节点
previousElementSibling 属性
增加节点
创建节点
即创造出一个新的网页元素,在添加到网页内中,一般是先创建节点,然后插入节点
创建元素节点方法:
//创造一个新的元素节点
document.createElement('标签名')追加节点
要想在界面看到,还得插入到某个父元素中
插入到父元素的最后一个子元素:
//插入到这个父元素的最后
父元素.appendChild(要插入的元素)插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)增加节点
特殊情况下,我们需要新增节点
复制一个原有的节点
把复制的检点放入指定的元素内部
克隆节点
//克隆一个已有的元素节点
元素.cloneNode(布尔值)cloneNode会克隆一个跟原标签一样的元素,括号内传入布尔值
若为true,则代表克隆时会包含后代节点一起克隆
若为false 则代表克隆时不包含后代节点
默认为false
删除节点
在js原生DOM操作中,要删除元素必需通过父元素删除
语法:
父元素.removeChild(要删除的元素)注:
如不存在父子关系则删除不成功
删除节点和隐藏节点(display: none)有区别,删除 则是从html中删除节点
M端事件
触屏事件 touch (也称触摸事件) , android 和ios
touch对象代表一个触摸点 触摸点可能是一根手指 也可能是一根触摸笔
常见的触摸事件
window 对象
BOM
BOM是浏览器模型
window对象是一个全局对象
像documet alert() console.log()这些都是window属性 基本BOM属性和方法都是window的
所有通过var定义在全局作用域中的变量,函数都会变成window对象属性和方法
window对象下的属性和方法调用的时候可以省略window
定时器-延时函数
setTimeout
语法
setTimeout(回调函数,等待的毫秒数)setTimeout仅仅只执行一次,所以可以理解就是把一段代码延迟运行
清除延时函数
let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)js执行机制
同步
同步任务都在主线程上执行 形成一个执行线
异步
js的异步是通过回调函数实现的
异步任务相关添加到任务队列中(任务队列也称为消息队列)
执行机制
先执行栈中的同步任务
异步任务放入任务队列中
一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取队列任务中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
location对象
loaction的数据类型是对象 ,它拆分并保存了URL地址的哥哥分组部分
常用属性和方法:
herf属性获取完整的URL地址,对其赋值时用于地址的跳转
search属性获取地址中携带的参数,符号 ? 后面部分
loaction.search()hash 属性获取地址中的哈希值 符号#后面部分
reload 方法用于刷新当前的页面,传入参数true 时表示强制刷新
let btn =document.querySelector('button') btn.addEvenListener('click',function(){ loaction.reload(true) //强制刷新 })
navigator对象
navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息
通过userAgent检测浏览器的版本及平台
const userAgent = navigator.userAgenthistory对象
history的数据类型是对象,主要管理历史记录,该对象于浏览器的操作相对应,如前进,后退,历史记录等
常用属性和方法
本地存储
数据存储在用户浏览器中
设置,刷新都不会消失
localStorage
使用localStorage把数据存储中
本地存储只能存储字符串类型
存储数据语法:
localStorage.setItem(key,value) //键 值获取数据:
localStorage.getItem(key)删除本地数据
localStorage.removeItem(key)
存储负载数据类型
语法: JSON.stringify(复杂数据类型)
LocalStorage.setItem('obj',JSON.stringify({
uname: 'pink老师',
age : 18,
gender: '男'
}))JSON.parse() 将字符串转换为 对象
const obj = JSON.parse(localStorage.getItem('goods'))
console.log(obj)数组map和join方法
map方法
使用场景:
map可以遍历数组处理数据,并且返回新的数组
const arr = ['red','blue','green']
const newArr = arr.map(function (ele,index){
console.log(ele) //数组元素
console.log(index) //数组索引号
return ele + '颜色'
})
console.log(newArr) //['red颜色','blue颜色','green颜色']map也称为映射. 指的是两个元素的集之间的元素相互“对应”的关系
map重点在于有返回值,forEach没有返回值
join方法
作用:
join()方法用于把数组中的所有元素转换一个字符串
语法:
const arr = ['red颜色','blue颜色','green颜色'] console.log(arr.join(''))//red颜色blue颜色...
正则表达式
语法
定义正则表达式语法
const 变量名 =/表达式/判断是否有符合规则的字符串:
regObj.test(被检测的字符串)如果正则表达式与指定的字符串匹配,返回true 否则false
检测(查找)符合规则的字符串
regObj.exec(被检测字符串)若匹配成功, exec()方法返回一个数组 ,否则返回null
元字符
具有一些特殊含义的字符,可以极大提高了灵活性和强大的匹配功能
26个英文字母 换成元字符写法: [a-z]
边界符(表示开头和结尾 )
量词(表示重复次数)
字符类(比如\d 表示0-9)
[abc]字符匹配集合
后面的字符串只要包含abc中任意一个字符 都返回true
[]里面加上-连字符 表示一个返回
[a-z]表示a到z
[a-zA-Z]表示大小写都可以
[0-9]表示0-9都行
^[1-9][0-9]{4,}$ 表示数字从10000开始
预定义: 指的是 某些常见模式的简写方法
修饰符
替换 replace 替换
语法:
字符串.replace(/正则表达式/, '替换的文本')
//要全局替换需要在在后面加/g
//多个字符采用'a|b'a或b