WebAPI
作者：互联网
一.Dom获取和属性操作
1.获取元素
1.1 根据css选择器来获取DOM元素(重点)
1.选择器匹配的第一个元素
document.querySelector('css选择器');
2.选择匹配多个元素
//返回指定的选择器的所有元素对象集合
document.querySelectorAll('css选择器')
//querSelector() 返回指定选择器的第一个元素对象
const firstBox=document.querySelector('.box');
console.log(firstBox);
console.log(typeof firstBox)//object
//querySelectorAll() 返回指定的选择器的所有元素对象集合
const liAll=document.querySelectorAll('li');
console.log(liAll);
//1.得到一个伪数组 ,有长度有索引号 ,没有pop(),push()等方法
//2.返回的是获取元素对象的集合 以伪数组的形式储存
1.2.其他方法获取DOM元素(了解)
1.id获取
//get获得element元素by通过驼峰命名法
let uname = document.getElementById('wo')
2.类名获取
//根据类名获取元素
const boxs=document.getElementsByClassName('box')
3.获取标签
let lis = document.getElementsByTagName('li')
1.3.获取body和html
//1.获取body元素
const body = document.body;
console.log(body);
//2.获取html元素
const html = document.documentElement;
console.log(html);
1.4.操作元素 innerHTML
const li=document.querySelector('li');
li.innerHTML='我是<strong>神仙</strong>无无无无无';
//能识别文本，能够解析标签
2.修改元素样式
2.1 修改img属性
<img src="./images/1.jpg" alt="" title="图片">
const img = document.querySelector('img')
img.src = './images/hot.png';
img.title = '替换文字';
img.alt='替换';
//<img src="./images/hot.png" alt="替换" title="替换文字">
2.2 通过style修改css
const div=document.querySelector('div');
div.style.backgroundColor='red';
div.style.width='200px'
2.3通过修改类名修改样式
const box=document.querySelector('.box');
box.className='change box';
2.4通过classList控制css
const div = document.querySelector('div');
//1.追加一个类
div.classList.add('current');
//2.移除一个类
div.classList.remove('current');
//3.如果没有这个类就添加，如果有这给类就删除这个类
div.classList.toggle('current');
2.5修改表单属性
<input type="password" value="文字内容">
const input =document.querySelector('input')
input.value="用户名";
input.type="text";
2.6选中复选框和禁用按钮
const input=document.querySelector('[type=checkbox]')
//选中复选框
input.checked=true
const btn=document.querySelector('button')
//禁用按钮
btn.disabled=true
3. 自定义属性
1 设置自定义属性
//设置自定义属性
div.setAttribute('index',2)
<div id="id" index='2'></div>
2 获取元素自定义属性值 getAttribute
const div=document.querySelector('div')
console.log(div.id);
console.log(div.getAttribute('index'));//2
3 设置类名
const div=document.querySelector('div')
//方法一
div.className='test';
//方法二
div.setAttribute('class','footer')
4 移除自定义属性
div.removeAttribute('index')
5 获取自定义属性
<div data-id="1" data-name="勇"></div>
const div=document.querySelector('div')
//获取自定义属性
console.log(div.dataset)
console.log(div.dataset.id)
console.log(div.dataset.name)
3.事件监听
3.1事件监听语法(重点)
const div = document.querySelector('div');
div.addEventListerner('click',function(){
alert(1);
})
//addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
3.2事件对象 function(e)
3.2.1 事件返回 e.target
const div=document.querySelector('div');
div.addEventListener('click',function(e){
//e.target 返回的是触发事件的元素
console.log(e.target);
//this返回的是绑定事件的元素
console.log(this);
})
3.2.2 链接不跳转 e.preventDefault
<a href="#">链接</a>
const a=document.querySelector('a');
//方法一
a.addEventListener('click',function(e){
e.preventDefault();
})
//方法二
a.onclick=function(e){
return false;
alert(11);
}
//方法三
<a href="javascript:;">链接不跳转</a>
3.3.3 阻止冒泡 e.stopPropagation()
const father = document.querySelector('.father');
const son = document.querySelector('.son');
son.addEventListener('click', function (e) {
alert('son');
//方法一
e.stopPropagation();//Propagation 传播
//方法二
e.cancelBubble = true;//非标准 cancel 取消 bubble 泡泡
},false)
father.addEventListener('click', function () {
alert('father');
},false)
3.3.4 鼠标在页面文档的x和y坐标 e.pageX
document.addEventListener('click',function(e){
//e.page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
})
3.3传统事件(了解)
//事件三要素 事件源 事件类型 事件处理程序
//事件源
const btn = document.getElementById('btn');
//事件类型
//事件处理程序 通过一个函数赋值
btn.onclick = function () {
alert('点秋香');
}
//onclick方式只可绑定一次，后面会覆盖前面
3.3鼠标事件
3.3.1 鼠标点击事件 click
const div = document.querySelector('div');
div.addEventListerner('click',function(){
alert(1);
})
3.3.2 鼠标经过 mouseenter
const div = document.querySelector('div');
div.addEventListerner('mouseenter',function(){
alert(1);
})
//mouseenter 不会冒泡
//方法二 mouseover 会冒泡
3.3.3 鼠标离开 mouseleave
const div = document.querySelector('div');
div.addEventListerner('mouseleave',function(){
alert(1);
})
//mouseleave 不会冒泡
//方法二 mouseout 会冒泡
3.3.4 鼠标移动 mousemove
const div = document.querySelector('div');
div.addEventListerner('mousemove',function(){
alert(1);
})
3.3.5 鼠标按下 mousedown
const div = document.querySelector('div');
div.addEventListerner('mousemove',function(){
alert(1);
})
3.3.6 鼠标弹起 mouseup
const div = document.querySelector('div');
div.addEventListerner('mousemove',function(){
alert(1);
})
3.3.7 清除事件
const div = document.querySelector('div');
div.addEventListerner('mousemove',fn)
function fn(){
alert(1);
}
div.removeEventListener('mousemove', fn)
3.4焦点事件
3.4.1 获得焦点 focus
const input = document.querySelector('input');
input.addEventListerner('focus',function(){
alert(1);
})
3.4.2 失去焦点 blur
const input = document.querySelector('input');
input.addEventListerner('blur',function(){
alert(1);
})
3.5 键盘事件 keyup keydown
//1.onkeyup 某个键盘按键被松开时触发
document.addEventListener('keyup',function(e){
console.log('up:'+e.key);
})
//2.onkeydown 某个键盘按键被按下时触发
document.addEventListener('keydown',function(e){
console.log('down:'+e.key);
})
//3.onkeypress 某个键盘按键被按下时触发
document.addEventListener('press:'+e.key);
//1.使用addEventListener不需要加on
//2.onkeypress不能识别功能键,区分字母大小写
//3.执行顺序:keydown > keypress > keyup
//4.key属性可以得到相应键的ASCII码值
//5.keydown和keydown区分大小写 可以识别功能键
3.6文本事件 input
const input = document.querySelector('input');
input.addEventListerner('input',function(){
alert(1);
})
4.节点
4.1 父节点 parentNode和子节点children
//1.父级节点 parentNode
const ul=document.querySelector('ul')
const li=document.querySelector('li');
// 得到离父元素最近的父级元素 ,如果找不到父节点为null
console.log(li.parentNode);
//2.子节点 childern
console.log(ul.childNodes);//[text, li, text, li, text, li, text, li, text, li, text]
console.log(ul.children);//[li, li, li, li, li]
4.2 创建节点createElement和在元素最后加appendChild(li)
//第一步 创建节点元素节点
const li=document.createElement('li');
//第二步 添加节点
const ul=document.querySelector('ul');
//在元素最后面加
ul.appendChild(li);
//添加节点
const lis=document.createElement('li');
//在指定元素之前添加元素
ul.insertBefore(lis ,ul.children[1]);
4.3 删除元素(节点) removeChild
const ul=document.querySelector('ul');
const btn=document.querySelector('button');
//删除元素
// ul.removeChild(ul.children[0]);
btn.onclick=function(){
if(ul.children.length==0){
//禁用按钮
this.disabled=true;
}else{
//移除ul中第一个li
ul.removeChild(ul.children[0]);
}
}
4.4 复制元素(节点) cloneNode()
const ul = document.querySelector('ul');
//node.cloneNode() 浅拷贝 只复制标签不复制内容
//node.cloneNode(true) 深拷贝 复制标签又复制内容
const li = ul.children[0].cloneNode();
const lis =ul.children[0].cloneNode(true);
ul.appendChild(li);
ul.appendChild(lis);
5.定时器
5.1 创建定时器 setInterval
setInterval(function () {
console.log('持续输出');
}, 1000)
//每隔一秒执行一次
5.2 清除定时器 clearInterval
let timer = setInterval(fn, 1000);
clearInterval(timer);
6.元素属性和位置
6.1 offset元素的宽高和位置
//1.offsetTop 元素距离网页顶部的高度 返回不带单位的数值
console.log(father.offsetTop);//100
//2.offsetLeft 元素距离网页左边的位置 返回不带单位的数值
console.log(father.offsetLeft);//490
//3.以带有定位的父亲为准 如果父亲没有定位 则以body为准
console.log(son.offsetLeft);//150
//4.得到元素的大小 宽度和高度=padding+border+width
console.log(father.offsetWidth);//300
console.log(father.offsetHeight);//300
//5.返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent);
//6.不管父亲是否有定位 返回最近一级的父亲
console.log(son.parentNode);
<!--
offset:
1.可以得到任意样式表中样式值
2.得到的数值没有单位
3.offsetWidth包含padding+border+width
4.只能获取不能赋值
style:
1.只能得到行内样式表中的样式值
2.得到带有单位的字符串
3.style.width获得width的值 不包含padding和border
4.可以获取也可以赋值
-->
6.2 client元素的宽高和位置
//1.返回元素上边框的大小
console.log(box.clientTop);//1
//2.返回元素左边框的大小
console.log(box.clientLeft);//1
//3.返回padding,内容的宽度 不包含边框,返回数值不带单位
console.log(box.clientWidth);//120
//4.返回padding,内容的高度 不包含边框,返回数值不带单位
console.log(box.clientHeight);//220
6.3 scroll 滚动条的位置
//1.返回元素被卷去的高度
console.log(div.scrollTop);//1
//2.返回元素被卷去左侧的距离
console.log(div.scrollLeft);//1
//3.返回padding,内容的宽度 不包含边框,返回数值不带单位
console.log(div.scrollWidth);//140
console.log(div.clientWidth);//140
//4.返回padding,内容的高度 不包含边框,返回数值不带单位
console.log(div.scrollHeight);//293
console.log(div.clientHeight);//140
7.网页特效案例
7.1 排他思想
const btn = document.querySelectorAll('button');
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function () {
for (let i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = ''
}
this.style.backgroundColor = 'pink'
})
}
7.2 表格全选
<table border="1" width="100" height="30" rules="all">
<tr>
<th>
<input type="checkbox" class="all">
</th>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="one">
</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="one">
</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<script>
const all = document.querySelector('.all');
const one = document.querySelectorAll('.one');
all.addEventListener('click', function () {
for (let i = 0; i < one.length; i++) {
one[i].checked = all.checked;
}
})
for (let i = 0; i < one.length; i++) {
let flag = true;
one[i].addEventListener('click', function () {
for (let i = 0; i < one.length; i++) {
if (!one[i].checked) {
flag = false;
break;
}
}
all.checked = flag;
})
}
7.3 评论区
const lis = document.querySelectorAll('li');
const boxs = document.querySelectorAll('.box');
for (let i = 0; i < lis.length; i++) {
//生成自定义属性
lis[i].setAttribute('index', i);
//得到自定义属性值
let index = lis[i].getAttribute('index');
lis[i].addEventListener('click', function () {
for (let i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'bg';
for (let i = 0; i < boxs.length; i++) {
boxs[i].className = 'none';
}
boxs[index].className = 'current box'
})
}
7.4 快递单号
const div=document.querySelector('div');
const input=document.querySelector('input');
input.addEventListener('keyup',function(){
if (this.value='') {
div.style.display='none';
} else {
div.style.display='block';
div.innerHTML=this.value;
}
})
7.5 倒计时
const div = document.querySelector('.box').querySelectorAll('div');
fn();
function fn() {
let time1 = +new Date();
let time2 = +new Date('2022-7-9 18:00');
let time = parseInt(time2 - time1) / 1000;
let h = parseInt(time / 60 / 60);
h = h < 10 ? '0' + h : h;
div[0].innerHTML = h;
let m = parseInt(time / 60 % 60);
m = m < 10 ? '0' + m : m;
div[1].innerHTML = m;
let s = parseInt(time % 60);
s = s < 10 ? '0' + s : s;
div[2].innerHTML = s;
}
setInterval(fn, 1000)
7.6 动态生成表格
const date = [{ uname: '小龙', sex: '男', age: '18' }, { uname: '小美', sex: '女', age: '18' }, { uname: '小勇', sex: '男', age: '18' }];
const tbody = document.querySelector('tbody');
const obj = {};
const input = document.querySelectorAll('input');
const btn = document.querySelector('button');
for (let i = 0; i < date.length; i++) {
table(date[i]);
}
btn.addEventListener('click', function () {
obj.uname = input[0].value;
obj.sex = input[1].value;
obj.age = input[2].value;
console.log(obj);
date.push(obj);
table(obj);
})
function table(obj) {
const tr = document.createElement('tr');
tbody.appendChild(tr);
for (const key in obj) {
let td = document.createElement('td');
td.innerHTML = obj[key];
tr.appendChild(td);
}
let td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
fn();
}
function fn() {
const a = document.querySelectorAll('a');
for (let i = 0; i < a.length; i++) {
a[i].addEventListener('click', function () {
tbody.removeChild(this.parentNode.parentNode)
})
}
}
7.7 京东放大镜
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box1 {
float: left;
width: 300px;
height: 300px;
margin-right: 20px;
text-align: center;
border: 1px solid #000;
}
.box1 img {
width: 100%;
height: 100%;
}
.box {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
opacity: 0.5;
cursor: pointer;
}
.box2 {
overflow: hidden;
position: relative;
display: none;
float: left;
width: 600px;
height: 600px;
text-align: center;
border: 1px solid #000;
}
.box2 img {
position: absolute;
left: 0;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div class="box1">
<img src="./img/1.jpg" alt="">
<div class="box"></div>
</div>
<div class="box2">
<img src="./img/1.jpg" alt="">
</div>
<script>
const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');
const box = document.querySelector('.box');
const img = box.querySelector('img');
const big = document.querySelector('.box2').querySelector('img');
//1.鼠标经过显示
box1.addEventListener('mouseenter', function () {
box.style.display = 'block';
box2.style.display = 'block';
})
//2.鼠标离开消失
box1.addEventListener('mouseleave', function () {
box.style.display = 'none';
box2.style.display = 'none';
})
//3.获取鼠标的坐标
box1.addEventListener('mousemove', function (e) {
let x = e.pageX - box.offsetWidth / 2;
let y = e.pageY - box.offsetHeight / 2;
let boxXMAX = box1.offsetWidth - box.offsetWidth;
let boxYMAX = box1.offsetHeight - box.offsetHeight;
//4.限制盒子移动范围
if (x <= 0) {
x = 0;
} else if (x >= boxXMAX) {
x = boxXMAX;
}
if (y <= 0) {
y = 0;
} else if (y >= boxYMAX) {
y = boxYMAX;
}
box.style.left = x + 'px';
box.style.top = y + 'px';
//5.大盒子跟随小盒子移动
//大盒子移动距离/大盒子最大位移=小盒子移动距离/小盒子最大位移
let bigXMAX = big.offsetWidth - box2.offsetWidth;
let bigYMAX = big.offsetHeight - box2.offsetHeight;
let X = x * bigXMAX / boxXMAX;
let Y = y * bigYMAX / boxYMAX;
big.style.left = -X + 'px';
big.style.top = -Y + 'px';
})
</script>
</body>
</body>
</html>
7.8 动画函数
function animate(obj, target) {
clearInterval(obj.time);
obj.time = setInterval(function () {
let step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.time);
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15)
}
7.9 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
overflow: hidden;
position: relative;
width: 500px;
height: 400px;
border: 1px solid #000;
margin: 100px;
}
ul {
position: absolute;
left: 0;
width: 3000px;
height: 400px;
}
ul li {
float: left;
list-style: none;
}
.box img {
width: 500px;
height: 100%;
}
.arrow {
display: none;
}
.right,
.left {
position: absolute;
top: 50%;
width: 20px;
height: 20px;
line-height: 15px;
transform: translateY(-50%);
text-align: center;
color: red;
cursor: pointer;
border: 1px solid #000;
z-index: 2;
}
.left {
left: 0;
}
.right {
right: 0;
}
ol {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
ol li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 5px;
border: 1px solid #000;
list-style: none;
}
.color {
}
</style>
<script src="./10-动画函数.js"></script>
<script src="./11-轮播图.js"></script>
</head>
<body>
<div class="box">
<div class="arrow">
<div class="left"><</div>
<div class="right">></div>
</div>
<ul>
<li><a href="#">
<img src="./img/3.jpg" alt="" class="pic">
</a></li>
<li><a href="#">
<img src="./img/2.jpg" alt="">
</a></li>
<li><a href="#">
<img src="./img/1.jpg" alt="">
</a></li>
<li><a href="#">
<img src="./img/3.jpg" alt="" >
</a></li>
<li><a href="#">
<img src="./img/2.jpg" alt="">
</a></li>
</ul>
<ol>
</ol>
</div>
</body>
</html>
window.addEventListener('load', function () {
//1.鼠标经过箭头显示
const box = document.querySelector('.box');
const arrow = document.querySelector('.arrow');
box.addEventListener('mouseenter', function () {
arrow.style.display = 'block';
//11.清除定时器
clearInterval(time);
time = null;
})
//2.鼠标离开箭头消失
box.addEventListener('mouseleave', function () {
arrow.style.display = 'none';
//12.开启定时器
time=setInterval(function () {
right.click();
},2000)
})
//3.自动生成小圆点
const pic = document.querySelector('.pic');
const ul = document.querySelector('ul');
const ol = document.querySelector('ol');
let num = 0;
let round = 0;
for (let i = 0; i < ul.children.length; i++) {
//4.创建ol中的li
const li = document.createElement('li')
//5.创建自定义属性
li.setAttribute('index', i)
ol.appendChild(li);
ol.children[i].addEventListener('click', function () {
for (let i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'color';
//6.得到自定义属性值
let index = li.getAttribute('index');
num = index;
round = index;
//7.图片跟随小圆点移动
animate(ul, -index * pic.offsetWidth);
})
}
ol.children[0].className = 'color';
//13.克隆第一张照片
const first =ul.children[0].cloneNode(true);
ul.appendChild(first);
//8.点击右箭头,让图片移动
const right = document.querySelector('.right');
right.addEventListener('click', function () {
num++;
if (num == ol.children.length) {
num = 0;
ul.style.left = 0;
}
animate(ul, -num * pic.offsetWidth);
round++;
if (round == ol.children.length) {
round = 0;
}
for (let i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[round].className = 'color';
})
//9.点击左箭头,让图片移动
const left = document.querySelector('.left');
left.addEventListener('click', function () {
num++;
if (num == ol.children.length) {
num = 0;
ul.style.left = 0;
}
animate(ul, -num * pic.offsetWidth);
round++;
if (round == ol.children.length) {
round = 0;
}
for (let i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[round].className = 'color';
})
//10.自动播放
let time = setInterval(function () {
right.click();
}, 2000)
})
标签：WebAPI,function,const,let,querySelector,div,document 来源： https://www.cnblogs.com/-hy-/p/16504319.html