【十三】JavaScript之DOM
【1】DOM
- DOM（Document Object Model，译作文档对象模型），这部分内容主要是学习document对象提供给开发者操作html/xml文档的方法属性或子对象来完成动态特效的。
- 当然这部分代码在不同浏览器下的效果几乎一样，除了IE。
-
元素操作[元素的获取,元素的属性内容操作,元素的外观操作,元素本身操作]
-
事件操作[表单事件,鼠标事件,窗口事件,键盘事件]
【2】元素操作
（1）元素的获取
直接获取元素
- document提供了以下方法可用于在HTML/XML文档中获取一个或多个元素。
| 方法 | 描述 |
|---|---|
document.querySelector("css选择符"); |
通过css选择符来获取元素[单一元素] |
document.getElementById("ID值") |
通过元素的id属性值获取元素[单一元素] |
document.getElementsByTagName("标签名") |
通过元素的标签类型来获取元素[元素集合,也就是类数组] |
document.getElementsByClassName("类名") |
通过元素的class属性值来获取元素[元素集合] |
| document.getElementsByName("name属性值") | 通过 元素的name属性值来获取元素[元素集合] |
document.querySelectorAll("css选择符"); |
通过css选择符来获取元素[元素集合] |
| document.evaluate('xpath路径', document).iterateNext() | 通过xpath路径来获取元素或元素集合 |
| document.documentElement | 直接获取HTML元素 |
document.body |
直接获取body元素 |
| document.head | 直接获取head元素 |
| document.links | 直接获取网页中所有的超链接[元素集合] |
| ducument.images | 直接获取网页中所有的图片元素[元素集合] |
| ducument.forms | 直接获取网页中所有的表单元素[元素集合] |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">父元素
<div id="son"> 子元素 </div>
</div>
<ul>
<li><a href="">网站1</a></li>
<li><a href="">网站2</a></li>
<li><a href="">网站3</a></li>
</ul>
<p id="p1">一段长长的文本</p>
<p class="p2">第一段长长长长长长长长的文本</p>
<p class="p2 p3">第二段长长长长长长长长的文本</p>
<p class="p3 p4">第三段长长长长长长长长的文本</p>
<p class="p3 p2 p4">第四段长长长长长长长长的文本</p>
<img src="image-20220617122320261.png" alt="">
<img src="image-20220617122320261.png" alt="">
<img src="image-20220617122320261.png" alt="">
<img src="image-20220617122320261.png" alt="">
<form action="">
账号：<input type="text" name="username" value="root"><br>
密码：<input type="password" name="password" value="123"/><br>
<input type="submit" value="登录">
</form>
<script>
// DOM 元素获取,有2种写法获取元素，分别是直接获取元素与间接获取元素。这里我们先学习直接获取元素
// 所谓的直接获取元素，只要指代的就是通过document对象提供的操作方法在整个网页文档中全局查找提取元素
// 一般常用的用5种直接获取元素方式
// // 1.1 document.getElementById("ID值")
// // 通过元素的id属性值获取元素[单一元素]
// var box = document.getElementById("box");
// console.log(box.innerHTML); // 获取元素的html内容，innnerHTML是属于元素对象的内部的内容（包括子元素的内容）,如果不是元素对象,根本没有这个属性
// console.log(box.innerText); // 获取元素的文本内容[没有HTML标签]
//
// var son = document.getElementById("son");
// son.innerHTML = "子元素的新内容"; // 修改指定元素的内容
//
// var p1 = document.getElementById("p1")
// p1.innerHTML = "短短的文本";
// 1.2 document.getElementsByTagName("标签名")
// 通过元素的标签类型来获取元素[元素集合,也就是类数组]
// var p_collection = document.getElementsByTagName("p"); // 注意：s！！
// // console.log(p_collection, p_collection.length);
// // console.log(p_collection.innerHTML); // 此处无法获取HTML数据,因为p_collection是一个数组,数组根本不可能有html内容
// // console.log(p_collection[0].innerHTML); // 要获取的实际上是数组中的元素成员的内容
// // 批量修改或读取元素的内容
// for(let p of p_collection){
// console.log(p.innerHTML);
// p.innerHTML = "hello world";
// }
// // 1.3 document.getElementsByClassName("类名")
// // 通过元素的class属性值来获取元素[元素集合]
// // 根据一个class属性值获取元素集合
// var data = document.getElementsByClassName("p2");
// for(let item of data){
// console.log(item.innerHTML);
// }
// // 第一段长长长长长长长长的文本
// // 第二段长长长长长长长长的文本
// // 第四段长长长长长长长长的文本
//
// // 根据多个class属性值获取元素集合，多个class属性值之间使用空格隔开，顺序不重要。
// var data = document.getElementsByClassName("p3 p4"); // 获取同时具备.p2和.p3的元素
// for(let item of data){
// console.log(item.innerHTML);
// }
// // 第三段长长长长长长长长的文本
// // 第四段长长长长长长长长的文本
// // 1.4 document.getElementsByName("name属性值");
// var u_list = document.getElementsByName("username")
// var username = u_list[0]
// console.log(username.value)
// // 1.5 document.querySelector("css选择符");
// // 通过css选择符来获取元素[单一元素]
// var p1 = document.querySelector("#box #son"); // 根据包含选择符获取元素
// console.log(p1);
// // 1.6 document.querySelectorAll("css选择符");
// // 通过css选择符来获取元素[元素集合]
// var p_collection = document.querySelectorAll(".p3");
// for(let p of p_collection){
// p.innerHTML = "querySelectorAll ===> hello world";
// }
// // 1.7 document.evaluate('xpath路径', document).iterateNext() 基于xpath路径获取
// // 基于xpath获取指定ID元素
// var ele = document.evaluate('//*[@id="son"]', document).iterateNext() // 获取xpath提取的第一个元素
// // 基于xpath获取指定class元
// var ele = document.evaluate('//*[@class="p2"]', document).iterateNext() // 获取xpath提取的第一个元素
// console.log(ele);
// // 1.8 直接获取HTML元素
// // var ele = document.querySelector("html");
// var ele = document.documentElement;
// console.log(ele);
// // 1.9 直接获取body元素
// var ele = document.body;
// console.log(ele);
//
// // 1.10 直接获取Hhead元素
// var ele = document.head;
// console.log(ele);
// // 1.11 获取页面中所有的超链接
// console.log(document.links);
//
// // 1.12 获取页面中所有的图片
// console.log(document.images)
// 1.13 获取页面中所有的图片
console.log(document.forms)
</script>
</body>
</html>
间接获取元素
- 基于元素本身与其他元素之前的嵌套（父子）、并列（兄弟）等关系，可以间接根据元素之间的关系来获取目标元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p class="p1">
<a href="" id="first-a">a标签</a>
</p>
<ul>
<li><a href="">第1个li</a></li>
<li><a id="link" href="">第2个li</a></li>
</ul>
<script>
/**
* 假设，我们已经得到了p.p1下面的a标签。
* 我们可以通过间接的关系，来获取到"第一个li"对应的a标签
*/
// var a = document.querySelector("#first-a")
// console.log(a)
// // 获取当前元素的父级元素
// var p1 = a.parentElement
// console.log(p1)
//
// // 获取当前元素的父级元素的兄弟，也就是p1的兄弟元素ul
// var ul = p1.nextElementSibling
// console.log( ul )
// // 同理，也可以通过ul获取它的上一个兄弟元素
// console.log(ul.previousElementSibling)
// // 获取ul所有的子元素
// var lilist = ul.children
// console.log(lilist)
// var li_1 = lilist[0]
// console.log( li_1)
// // 获取第一个子元素
// var first_ele = ul.firstElementChild
// console.log(first_ele)
//
// // 获取最后一个子元素
// var last_ele = ul.lastElementChild
// console.log(last_ele)
// // 获取li里面的a标签
// console.log(last_ele.children) // 数组，元素集合
// console.log(last_ele.children[0]) // 元素对象
/**
* 假设，我们现在已经得到了第2个li标签里面的a标签内容了，要获取.p1下面的a标签
*/
// var a = document.querySelector("#link")
// var ul = a.parentElement.parentElement // a的父级元素的父级元素
// console.log(ul)
// // 获取当前元素的上一个兄弟元素
// var p1 = ul.previousElementSibling
// console.log(p1)
// var alink = p1.children[0]
// console.log(alink)
</script>
</body>
</html>
（2）元素的属性内容操作
innerHTML 获取或修改元素的html内容
innerText 获取元素的纯文本内容
value 获取表单元素的值
标签的属性可以直接通过元素.属性名来获取属性值
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<p class="p1">
<a href=""><img src="image-20220617122320261.png" alt=""><span>a1标签</span></a>
<a href="">a2标签</a>
</p>
账号：<input type="text" name="username"><br><br>
密码：<input type="password" name="password"><br><br>
城市：<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="tianjin">天津</option>
</select><br><br>
<button onclick="get_data()">按钮</button>
<script>
// 获取一个元素
var a = document.querySelector(".p1 a")
// // 获取元素的内容
// console.log(a.innerHTML) // 获取元素内部的HTML内容
// console.log(a.outerHTML) // 获取包含当前元素的标签名在内的HTML内容
// console.log(a.innerText) // 获取元素内部的纯文本内容，剔除HTML标签代码
// // 修改元素的内容
// a.innerHTML = "<span style='background-color: red'>helloworld</span>" // 把内容作为HTML内容展示
// // a.innerText = "<span style='background-color: red'>helloworld</span>" // 把内存作为纯文本内容展示
// // 清空元素的内容，直接赋值为空字符串
// a.innerHTML = ""
// a.innerText = ""
// 注意: html中并非所有的元素都是使用内容来展示数据的，例如：表单元素就是通过value(值)来操作和控制数据的
// 获取表单值
var username = document.querySelector("input[name=username]");
var password = document.querySelector("input[name=password]");
var city = document.querySelector("select[name=city]");
function get_data(){
console.log(`username=${username.value}, password=${password.value}, city=${city.value}`)
// 下拉框的相关属性操作
console.log(city.options.selectedIndex) // 勾选内容的下标
console.log(city.options[city.options.selectedIndex].innerHTML) // 显示select被勾选的内容
}
// 获取图片的属性
console.dir(document.images[0]);
console.log(document.images[0].src); // HTML源码中的图片路径
console.log(document.images[0].currentSrc); // HTML源码中的图片路径
console.log(document.images[0].naturalHeight); // 图片原始高度[没有经过缩放前的]
console.log(document.images[0].naturalWidth); // 图片原始宽度[没有经过缩放前的]
// 修改图片的属性
document.images[0].src = "vim.png";
// // 元素的通用位置、尺寸属性
// console.log(document.images[0].offsetHeight); // 图片显示高度[没有经过缩放前的]
// console.log(document.images[0].offsetWidth); // 图片显示宽度[没有经过缩放前的]
// console.log(document.images[0].offsetLeft); // 图片左上角距离页面左边的距离
// console.log(document.images[0].offsetTop); // 图片左上角距离页面顶边的距离
</script>
</body>
</html>
练习要求，实现图片切换效果：
// 假如我们有一个图片列表,// img_list = ["1.png","2.png","3.png","4.png"] // 每隔2秒修改一次img标签的src属性,属性值为上面img_list的成员.图片自己想办法
手动切换图片效果，代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="change">切换</button>
<br>
<img class="box" src="" alt="">
<script>
// 最基本的图片切换
var images_list = ["assets/images/banner-1.jpg", "assets/images/banner-2.jpg", "assets/images/banner-3.jpg"]
var box = document.querySelector(".box")
var change = document.querySelector(".change")
var currentIndex = 0;
box.src=images_list[currentIndex];
function start(){
currentIndex++;
if(currentIndex>=images_list.length){
currentIndex = 0;
}
box.src=images_list[currentIndex];
}
change.onclick = start;
</script>
</body>
</html>
自动切换图片效果，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="start_change">开始切换</button>
<button class="stop_change">停止切换</button>
<br>
<img class="box" src="" alt="">
<script>
// 最基本的图片切换
var images_list = ["assets/images/banner-1.jpg", "assets/images/banner-2.jpg", "assets/images/banner-3.jpg"]
var box = document.querySelector(".box")
var start_change = document.querySelector(".start_change")
var stop_change = document.querySelector(".stop_change")
var timer = null; // 定时器的序列号
var currentIndex = 0;
// 默认显示第一张
box.src = images_list[currentIndex]
start_change.onclick = function(){
// 开始切换图片
clearInterval(timer);
timer = setInterval(()=>{
currentIndex++
if(currentIndex>=images_list.length){
currentIndex = 0;
}
box.src=images_list[currentIndex]
}, 1000);
}
stop_change.onclick = function(){
clearInterval(timer);
}
</script>
</body>
</html>
京东轮播图按钮效果实现
基本样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.banner{
width: 632px;
height: 340px;
position: relative;
}
.img-list{
width: 100%;
height: 100%;
/*overflow: hidden;*/
}
.img-list .img:nth-child(n+2){ /* 除了第一个默认显示以外，后面的全部隐藏 */
display: none;
}
.btn-list .btn-left{
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
width: 41px;
height: 69px;
background: url("assets/images/icon-slides.png") -84px 0;
cursor: pointer;
}
.btn-list .btn-left:hover{
background: url("assets/images/icon-slides.png") 0 0;
}
.btn-list .btn-right{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 41px;
height: 69px;
background: url("assets/images/icon-slides.png") -124px 0;
cursor: pointer;
}
.btn-list .btn-right:hover{
background: url("assets/images/icon-slides.png") -41px 0;
}
.btn-number{
position: absolute;
bottom: 5px;
right: 5px;
}
.btn-number.num span{
cursor: pointer;
border: 1px solid cornflowerblue;
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 50px;
margin: 4px;
}
.btn-number.num span:hover{
background-color: cornflowerblue;
color: #fff;
}
.btn-number span{
cursor: pointer;
border: 2px solid #999;
background-color: #999;
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
text-indent: 2rem;
overflow: hidden;
text-align: center;
border-radius: 50px;
margin: 4px;
}
.btn-number span:hover{
background-color: #ddd;
}
</style>
</head>
<body>
<div class="banner">
<div class="img-list">
<div class="img">
<a href=""><img src="assets/images/banner-1.jpg" alt=""></a>
</div>
<div class="img">
<a href=""><img src="assets/images/banner-2.jpg" alt=""></a>
</div>
<div class="img">
<a href=""><img src="assets/images/banner-3.jpg" alt=""></a>
</div>
<div class="img">
<a href=""><img src="assets/images/banner-1.jpg" alt=""></a>
</div>
</div>
<div class="btn-list">
<div class="btn-left"></div>
<div class="btn-right"></div>
<div class="btn-number"></div>
</div>
</div>
<script>
// 轮播图切换图片效果
var list = document.querySelector('.img-list')
var bumBtn = document.querySelector('.btn-number')
console.log(list.children.length)
var HTML = ""
for (let i = 0; i<list.children.length;i++){
HTML+= `<span>${i+1}</span>`
}
bumBtn.innerHTML = HTML;
</script>
</body>
</html>
效果实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.banner{
width: 632px;
height: 340px;
position: relative;
}
.img-list{
width: 100%;
height: 100%;
/*overflow: hidden;*/
}
.img-list .img:nth-child(n+2){ /* 除了第一个默认显示以外，后面的全部隐藏 */
display: none;
}
.btn-list .btn-left{
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
width: 41px;
height: 69px;
background: url("assets/images/icon-slides.png") -84px 0;
cursor: pointer;
}
.btn-list .btn-left:hover{
background: url("assets/images/icon-slides.png") 0 0;
}
.btn-list .btn-right{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 41px;
height: 69px;
background: url("assets/images/icon-slides.png") -124px 0;
cursor: pointer;
}
.btn-list .btn-right:hover{
background: url("assets/images/icon-slides.png") -41px 0;
}
.btn-number{
position: absolute;
bottom: 5px;
right: 5px;
}
.btn-number.num span{
cursor: pointer;
border: 1px solid cornflowerblue;
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 50px;
margin: 4px;
}
.btn-number.num span:hover{
background-color: cornflowerblue;
color: #fff;
}
.btn-number span{
cursor: pointer;
border: 2px solid #999;
background-color: #999;
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
text-indent: 2rem;
overflow: hidden;
text-align: center;
border-radius: 50px;
margin: 4px;
}
.btn-number span:hover, .btn-number .current{
background-color: #ddd;
}
</style>
</head>
<body>
<div class="banner">
<div class="img-list">
<div class="img">
<a href=""><img src="assets/images/banner-1.jpg" alt=""></a>
</div>
<div class="img">
<a href=""><img src="assets/images/banner-2.jpg" alt=""></a>
</div>
<div class="img">
<a href=""><img src="assets/images/banner-3.jpg" alt=""></a>
</div>
<div class="img">
<a href=""><img src="assets/images/banner-1.jpg" alt=""></a>
</div>
</div>
<div class="btn-list">
<div class="btn-left"></div>
<div class="btn-right"></div>
<div class="btn-number"></div>
</div>
</div>
<script>
// 轮播图切换图片效果
var list = document.querySelector('.img-list')
var bumBtn = document.querySelector('.btn-number');
var HTML = ""
for (let i = 0; i<list.children.length;i++){
if(i === 0){
HTML+= `<span class="current">${i+1}</span>`
}else{
HTML+= `<span>${i+1}</span>`
}
}
bumBtn.innerHTML = HTML;
/**
* 点击左右按钮切换图片
*/
var btnLeft = document.querySelector('.btn-left')
var btnRight = document.querySelector('.btn-right')
var imgList = list.children;
var currentIndex = 0; // 当前显示图片的下标
var timer = null;
function change(){
for(let index=0; index<imgList.length;index++){
imgList[index].style.display = "none";
bumBtn.children[index].className = "";
if(index===currentIndex){
imgList[currentIndex].style.display = "block";
bumBtn.children[currentIndex].className = "current";
imgList[currentIndex].style.opacity = 0;
}
}
clearInterval(timer);
let curImg = imgList[currentIndex];
timer = setInterval(()=>{
curImg.style.opacity = parseFloat(curImg.style.opacity) + 0.1;
if(curImg.style.opacity>=1){
clearInterval(timer);
}
},1000/60)
}
// 右边按钮
btnRight.onclick = function(){
currentIndex++;
if(currentIndex>=imgList.length){
currentIndex=0;
}
change()
}
// 左边按钮
btnLeft.onclick = function(){
currentIndex--;
if(currentIndex<0){
currentIndex=imgList.length-1;
}
change()
}
// 数字按钮添加点击切换图片效果
for (let i = 0;i<bumBtn.children.length; i++){
let currentBtn = bumBtn.children[i];
currentBtn.onclick = ()=>{
currentIndex = i;
change()
}
}
</script>
</body>
</html>
【3】元素的外观操作
本质就是js操作元素的css样式
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 101px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: red;
}
.box1{
background-color: aqua;
border: 1px solid #ccc;
}
.box2{
color: #fff;
text-decoration: underline;
}
.animation{
width: 101px;
height: 240px;
}
</style>
</head>
<body>
<div style="border-radius: 100%; font-size: 14px;">div元素</div>
<div class="box1">div元素</div>
<hr>
<div class="animation" style="background: url('1.gif') 0 0;"></div>
<script>
/**
js中一共提供了三种方式给我们读取和操作样式
1. 通过元素的style属性来读取和操作样式
2. 通过元素的class属性来切换标签选择符的方式来达到操作样式的目的[元素的class属性本质上对应的css的内部或外部样式]
3. 通过window.getComputedStyle属性来读取元素的样式[这里只是读取样式值，不能修改]
**/
// 操作元素的外观，需要先获取元素对象.
// // 1. 通过style属性读取行间样式[读取样式时，通过style是无法读取元素的内部或外部样式]
// var box = document.querySelector("div")
// console.log(box.style.borderRadius) // 获取元素的行间样式
// console.log(box.style.fontSize) // 获取元素的行间样式
// console.log(box.style.width) // 行内样式没有设置的属性，在js中读取则值为空
// // 2. 通过style来设置行间样式
// var box = document.querySelector("div")
// box.style.backgroundColor = "rgb(0,0,255)"
// box.style.color = "#f00"
// box.style.border = "5px solid red"
// 动画的原理[利用人的眼睛性能差，当图片快速切换时产生视觉残留现象，这就是动画，1秒内切换60张图，表示60帧，动画一般在25-60帧]
// var box = document.querySelector(".animation")
// var timer = null;
// var x = 0;
// setInterval(()=>{
// x = parseInt(box.style.backgroundPosition)
// x+=100;
// if(x>=503){
// x = 0;
// }
// box.style.backgroundPosition = `${x}px 0px`;
// },1000/5); // 60帧 影片胶卷
// // 2. 通过class属性给元素设置批量的内部样式或外部样式
// // 因为在js中，class是一个关键字，所以修改元素的class属性时就改成className
// var box = document.querySelector("div")
// box.className += " box" // 因为元素本身可以有多个class属性值，所以我们一般添加class属性的值，要通过字符串拼接来完成，并且左边要有空格
// box.className += " box2" // 因为元素本身可以有多个class属性值，所以我们一般添加class属性的值，要通过字符串拼接来完成，并且左边要有空格
//
// // 通过className删除指定类名，达到去除样式的目的
// var box = document.querySelector("div")
// console.log(box.className)
// let name = box.className
// // 把修改完成的class值要重新赋值给 元素对象.className
// box.className = name.replaceAll("box2","").trim(" ")
// 3. 通过window.getComputedStyle对象来获取元素的外部或内部样式
var box = document.querySelector("div")
console.log( getComputedStyle(box)["border-radius"] ) // 获取指定元素的外观样式，不仅可以获取行间样式，还可以获取内外部样式
console.log( getComputedStyle(box).borderRadius ) // 获取指定元素的外观样式，不仅可以获取行间样式，还可以获取内外部样式
console.log( getComputedStyle(box)["width"] ) // 获取指定元素的外观样式，不仅可以获取行间样式，还可以获取内外部样式
console.log( getComputedStyle(box)["background-color"] ) // 获取颜色，背景属性时，只能获取到可以用于计算的rgb表达方式
</script>
</body>
</html>
另一种轮播图的效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.banner{
width: 632px;
height: 340px;
position: relative;
overflow: hidden;
}
.img-list{
width: 9999px;
height: 100%;
position: absolute;
left: 0;
}
.img-list .img{ /* 除了第一个默认显示以外，后面的全部隐藏 */
float: left;
}
.btn-list .btn-left{
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
width: 41px;
height: 69px;
background: url("assets/images/icon-slides.png") -84px 0;
cursor: pointer;
}
.btn-list .btn-left:hover{
background: url("assets/images/icon-slides.png") 0 0;
}
.btn-list .btn-right{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 41px;
height: 69px;
background: url("assets/images/icon-slides.png") -124px 0;
cursor: pointer;
}
.btn-list .btn-right:hover{
background: url("assets/images/icon-slides.png") -41px 0;
}
.btn-number{
position: absolute;
bottom: 5px;
right: 5px;
}
.btn-number.num span{
cursor: pointer;
border: 1px solid cornflowerblue;
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 50px;
margin: 4px;
}
.btn-number.num span:hover{
background-color: cornflowerblue;
color: #fff;
}
.btn-number span{
cursor: pointer;
border: 2px solid #999;
background-color: #999;
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
text-indent: 2rem;
overflow: hidden;
text-align: center;
border-radius: 50px;
margin: 4px;
}
.btn-number span:hover, .btn-number .current{
background-color: #ddd;
}
</style>
</head>
<body>
<div class="banner">
<div class="img-list">
<div class="img">
<a href=""><img src="assets/images/banner-1.jpg" alt=""></a>
</div>
<div class="img">
<a href=""><img src="assets/images/banner-2.jpg" alt=""></a>
</div>
<div class="img">
<a href=""><img src="assets/images/banner-3.jpg" alt=""></a>
</div>
<div class="img">
<a href=""><img src="assets/images/banner-1.jpg" alt=""></a>
</div>
</div>
<div class="btn-list">
<div class="btn-left"></div>
<div class="btn-right"></div>
<div class="btn-number">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
</div>
<script>
var imgList = document.querySelector('.img-list')
var width = imgList.parentElement.offsetWidth
var leftBtn = document.querySelector('.btn-left')
var rightBtn = document.querySelector('.btn-right')
var numberBtn = document.querySelector('.btn-number')
var left = 0;
var index = 0;
var timer = null;
var end = left;
rightBtn.onclick = function(){
index++;
end = left-width;
if(index>=imgList.children.length){
index = 0;
end = 0;
left = 0;
}
clearInterval(timer);
step = 1;
timer = setInterval(()=>{
if(left>end){
// 开始移动
step*=1.01;
left-=step;
if(left<end){
left = end;
}
imgList.style.left = `${left}px`;
}
if(left<=end){
clearInterval(timer);
}
})
for(let i = 0; i<numberBtn.children.length;i++){
numberBtn.children[i].className = "";
if(i === index){
numberBtn.children[i].className = "current";
}
}
}
// 左边按钮
// 当显示的是第一张图片时，怎么让.img-list切换到最后一张再开始移动。
</script>
</body>
</html>
怎么实现点击左边按钮进行图片轮播的位置切换？
【4】元素的添加和删除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p class="p1">测试标签</p>
<script>
// 元素的添加
var a = document.createElement("a")
// 新建的元素，可以指定任意内容或属性操作
// a.setAttribute("href", "http://www.baidu.com")
a.href = "http://www.baidu.com"
a.innerHTML = "百度"
console.log(a);
/**
* 把元素添加到指定元素的内部指定位置
* appendChild() # 作为子元素追加到指定父元素的末尾
* insertBefore() # 作为子元素添加到父元素中指定的兄弟元素之前
*/
// 新建的元素，默认是不会被展示页面中[此时属于文档碎片]，所以我们需要指定新建的元素的位置
// document.body.appendChild(a) // 以追加方式，在指定元素的内部新增子元素
// document.body.insertBefore(a, document.querySelector("script"))
/**
* 把元素添加到指定元素的外部之前或之后
* before() # 把元素作为兄弟元素添加到指定元素之前
* after() # 把元素作为兄弟元素添加到指定元素之后
*/
// var p1 = document.querySelector(".p1")
// // p1.before(a)
// p1.after(a)
/**
* 删除元素
* 1. 父元素删除子元素 父元素对象.removeChild(子元素对象)
* removeChild 的 返回值就是被删除的当前子元素对象
* 2. 元素删除自己 子元素.remove()
**/
// 父元素删除子元素
// var p1 = document.querySelector(".p1")
// ret = document.body.removeChild(p1)
// console.log(ret);
// // 元素自身进行删除
// var p1 = document.querySelector(".p1")
// p1.remove()
</script>
</body>
</html>
【5】实现穿梭框特效
基本外观效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.shuttle{
position: relative;
margin: 50px;
}
.shuttle:after{
display: block;
content: "";
clear: both;
}
.shuttle .left-option-list, .shuttle .btn-group, .shuttle .right-option-list{
float: left;
height: 224px;
width: 200px;
}
.shuttle .btn-group{
width: 160px;
}
.shuttle .title{
background-color: #eee;
font-size: 14px;
height: 24px;
line-height: 24px;
color: #666;
text-align: center;
}
.shuttle .operator{
border: 1px solid #aaa;
padding: 4px 0;
}
.shuttle .operator button{
width: 50px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 12px;
border: none;
outline: none;
cursor: pointer;
}
.shuttle .option-list{
border: 1px solid #aaa;
border-top: none;
padding: 15px 0;
min-height: 170px;
}
.shuttle .option-list li{
height: 24px;
padding-left: 10px;
}
.shuttle .option-list li input{
margin-right: 5px;
}
.shuttle .btn-group{
text-align: center;
line-height: 224px;
}
.shuttle .btn-group .left, .shuttle .btn-group .right{
width: 60px;
height: 40px;
margin: 5px;
background: #0099ff;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
color: #fff;
transition: all .3s linear;
}
.shuttle .btn-group .left:hover, .shuttle .btn-group .right:hover{
background: #55ccff;
}
</style>
</head>
<body>
<div class="shuttle">
<div class="left-option-list">
<p class="title">所有选项列表</p>
<div class="operator">
<button class="all_select">全选</button>
<button class="reverse_select">反选</button>
</div>
<ul class="option-list">
<li data-id="1"><label><input type="checkbox" name="all_option">选项1</label></li>
<li data-id="2"><label><input type="checkbox" name="all_option">选项2</label></li>
<li data-id="3"><label><input type="checkbox" name="all_option">选项3</label></li>
<li data-id="4"><label><input type="checkbox" name="all_option">选项4</label></li>
<li data-id="5"><label><input type="checkbox" name="all_option">选项5</label></li>
</ul>
</div>
<div class="btn-group">
<button class="left"><<</button>
<button class="right">>></button>
</div>
<div class="right-option-list">
<p class="title">选中选项列表</p>
<div class="operator">
<button class="all_select">全选</button>
<button class="reverse_select">反选</button>
</div>
<ul class="option-list">
<li data-id="6"><label><input type="checkbox" name="sel_option">选项6</label></li>
<li data-id="7"><label><input type="checkbox" name="sel_option">选项7</label></li>
<li data-id="8"><label><input type="checkbox" name="sel_option">选项8</label></li>
<li data-id="9"><label><input type="checkbox" name="sel_option">选项9</label></li>
<li data-id="10"><label><input type="checkbox" name="sel_option">选项10</label></li>
</ul>
</div>
</div>
</body>
</html>
基本功能实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.shuttle{
position: relative;
margin: 50px;
}
.shuttle:after{
display: block;
content: "";
clear: both;
}
.shuttle .left-option-list, .shuttle .btn-group, .shuttle .right-option-list{
float: left;
height: 224px;
width: 200px;
}
.shuttle .btn-group{
width: 160px;
}
.shuttle .title{
background-color: #eee;
font-size: 14px;
height: 24px;
line-height: 24px;
color: #666;
text-align: center;
}
.shuttle .operator{
border: 1px solid #aaa;
padding: 4px 0;
}
.shuttle .operator button{
width: 50px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 12px;
border: none;
outline: none;
cursor: pointer;
}
.shuttle .option-list{
border: 1px solid #aaa;
border-top: none;
padding: 15px 0;
min-height: 170px;
}
.shuttle .option-list li{
height: 24px;
padding-left: 10px;
}
.shuttle .option-list li input{
margin-right: 5px;
}
.shuttle .btn-group{
text-align: center;
line-height: 224px;
}
.shuttle .btn-group .left, .shuttle .btn-group .right{
width: 60px;
height: 40px;
margin: 5px;
background: #0099ff;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
color: #fff;
transition: all .3s linear;
}
.shuttle .btn-group .left:hover, .shuttle .btn-group .right:hover{
background: #55ccff;
}
</style>
</head>
<body>
<div class="shuttle">
<div class="left-option-list">
<p class="title">所有选项列表</p>
<div class="operator">
<button class="all_select">全选</button>
<button class="reverse_select">反选</button>
</div>
<ul class="option-list">
<li data-id="1"><label><input type="checkbox" name="all_option">选项1</label></li>
<li data-id="2"><label><input type="checkbox" name="all_option">选项2</label></li>
<li data-id="3"><label><input type="checkbox" name="all_option">选项3</label></li>
<li data-id="4"><label><input type="checkbox" name="all_option">选项4</label></li>
<li data-id="5"><label><input type="checkbox" name="all_option">选项5</label></li>
</ul>
</div>
<div class="btn-group">
<button class="left"><<</button>
<button class="right">>></button>
</div>
<div class="right-option-list">
<p class="title">选中选项列表</p>
<div class="operator">
<button class="all_select">全选</button>
<button class="reverse_select">反选</button>
</div>
<ul class="option-list">
<li data-id="6"><label><input type="checkbox" name="sel_option">选项6</label></li>
<li data-id="7"><label><input type="checkbox" name="sel_option">选项7</label></li>
<li data-id="8"><label><input type="checkbox" name="sel_option">选项8</label></li>
<li data-id="9"><label><input type="checkbox" name="sel_option">选项9</label></li>
<li data-id="10"><label><input type="checkbox" name="sel_option">选项10</label></li>
</ul>
</div>
</div>
<script>
var leftBtn = document.querySelector('.btn-group .left')
var rightBtn = document.querySelector('.btn-group .right')
var leftOptList = document.querySelector('.left-option-list .option-list')
var rightOptList = document.querySelector('.right-option-list .option-list')
var selectOption = null;
rightBtn.onclick = function(){
// 把左边被选中的选项移动到右边
selectOption = []
for (let i = leftOptList.children.length-1; i>=0; i--){
if(leftOptList.children[i].querySelector("input").checked){
selectOption.push( leftOptList.removeChild(leftOptList.children[i]) )
}
}
for (let i = selectOption.length-1; i>=0; i--){
selectOption[i].querySelector("input").checked = false;
rightOptList.appendChild(selectOption[i]);
}
}
leftBtn.onclick = function(){
// 把右边被选中的选项移动到左边
selectOption = []
for (let i = rightOptList.children.length-1; i>=0; i--){
if(rightOptList.children[i].querySelector("input").checked){
selectOption.push( rightOptList.removeChild(rightOptList.children[i]) )
}
}
for (let i = selectOption.length-1; i>=0; i--){
selectOption[i].querySelector("input").checked = false;
leftOptList.appendChild(selectOption[i]);
}
}
</script>
</body>
</html>
全选反选实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.shuttle{
position: relative;
margin: 50px;
}
.shuttle:after{
display: block;
content: "";
clear: both;
}
.shuttle .left-option-list, .shuttle .btn-group, .shuttle .right-option-list{
float: left;
height: 224px;
width: 200px;
}
.shuttle .btn-group{
width: 160px;
}
.shuttle .title{
background-color: #eee;
font-size: 14px;
height: 24px;
line-height: 24px;
color: #666;
text-align: center;
}
.shuttle .operator{
border: 1px solid #aaa;
padding: 4px 0;
}
.shuttle .operator button{
width: 50px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 12px;
border: none;
outline: none;
cursor: pointer;
}
.shuttle .option-list{
border: 1px solid #aaa;
border-top: none;
padding: 15px 0;
min-height: 170px;
}
.shuttle .option-list li{
height: 24px;
padding-left: 10px;
}
.shuttle .option-list li input{
margin-right: 5px;
}
.shuttle .btn-group{
text-align: center;
line-height: 224px;
}
.shuttle .btn-group .left, .shuttle .btn-group .right{
width: 60px;
height: 40px;
margin: 5px;
background: #0099ff;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
color: #fff;
transition: all .3s linear;
}
.shuttle .btn-group .left:hover, .shuttle .btn-group .right:hover{
background: #55ccff;
}
</style>
</head>
<body>
<div class="shuttle">
<div class="left-option-list">
<p class="title">所有选项列表</p>
<div class="operator">
<button class="all_select">全选</button>
<button class="reverse_select">反选</button>
</div>
<ul class="option-list">
<li data-id="1"><label><input type="checkbox" name="all_option">选项1</label></li>
<li data-id="2"><label><input type="checkbox" name="all_option">选项2</label></li>
<li data-id="3"><label><input type="checkbox" name="all_option">选项3</label></li>
<li data-id="4"><label><input type="checkbox" name="all_option">选项4</label></li>
<li data-id="5"><label><input type="checkbox" name="all_option">选项5</label></li>
</ul>
</div>
<div class="btn-group">
<button class="left"><<</button>
<button class="right">>></button>
</div>
<div class="right-option-list">
<p class="title">选中选项列表</p>
<div class="operator">
<button class="all_select">全选</button>
<button class="reverse_select">反选</button>
</div>
<ul class="option-list">
<li data-id="6"><label><input type="checkbox" name="sel_option">选项6</label></li>
<li data-id="7"><label><input type="checkbox" name="sel_option">选项7</label></li>
<li data-id="8"><label><input type="checkbox" name="sel_option">选项8</label></li>
<li data-id="9"><label><input type="checkbox" name="sel_option">选项9</label></li>
<li data-id="10"><label><input type="checkbox" name="sel_option">选项10</label></li>
</ul>
</div>
</div>
<script>
var leftBtn = document.querySelector('.btn-group .left')
var rightBtn = document.querySelector('.btn-group .right')
var leftOptList = document.querySelector('.left-option-list .option-list')
var rightOptList = document.querySelector('.right-option-list .option-list')
var selectOption = null;
rightBtn.onclick = function(){
// 把左边被选中的选项移动到右边
selectOption = []
for (let i = leftOptList.children.length-1; i>=0; i--){
if(leftOptList.children[i].querySelector("input").checked){
selectOption.push( leftOptList.removeChild(leftOptList.children[i]) )
}
}
for (let i = selectOption.length-1; i>=0; i--){
selectOption[i].querySelector("input").checked = false;
rightOptList.appendChild(selectOption[i]);
}
}
leftBtn.onclick = function(){
// 把右边被选中的选项移动到左边
selectOption = []
for (let i = rightOptList.children.length-1; i>=0; i--){
if(rightOptList.children[i].querySelector("input").checked){
selectOption.push( rightOptList.removeChild(rightOptList.children[i]) )
}
}
for (let i = selectOption.length-1; i>=0; i--){
selectOption[i].querySelector("input").checked = false;
leftOptList.appendChild(selectOption[i]);
}
}
// 批量给元素绑定事件操作
// 全选
var all = document.querySelectorAll('.all_select');
var OptList = null;
for (let i = 0 ;i<all.length; i++){
all[i].onclick = function(){
OptList = all[i].parentElement.nextElementSibling;
for(let x =0; x<OptList.children.length; x++){
OptList.children[x].querySelector("input").checked = true;
}
}
}
// 反选
var rev = document.querySelectorAll('.reverse_select');
var OptList = null;
for (let i = 0; i<rev.length; i++){
rev[i].onclick = function(){
OptList = rev[i].parentElement.nextElementSibling;
for(let x =0; x<OptList.children.length; x++){
OptList.children[x].querySelector("input").checked = !OptList.children[x].querySelector("input").checked;
}
}
}
</script>
</body>
</html>