1.选项卡
css样式
<style>
p{
display: none;
}
.active{
color: red;
}
.show{
display: block;
}
</style>
主体内容：
<body>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<p class="show">111</p>
<p>222</p>
<p>333</p>
<script>
//
var oBtns = document.querySelectorAll('button') ;
var oPs = document.querySelectorAll('p') ;
// 按钮绑定事件
for(var i = 0 ; i < oBtns.length ; i++) {
// 给对象添加自定义属性
// oBtns[i].index = i ;
// 给标签添加自定义属性
oBtns[i].setAttribute('index' , i)
oBtns[i].onclick = function () {
// 清除所有
for(var j = 0 ; j < oBtns.length ; j++) {
oBtns[j].classList.remove('active') ;
oPs[j].classList.remove('show') ;
}
// 给当前添加
this.classList.add('active') ;
// oPs[this.index].classList.add('show') ;
oPs[this.getAttribute('index')].classList.add('show') ;
}
}
</script>
</body>2.简易轮播
css样式：
<style>
*{
padding: 0;
margin: 0;
}
.banner {
width: 600px;
height: 400px;
margin: 40px auto;
position: relative;
}
.banner p{
width: 600px;
height: 400px;
border: 1px solid #000;
text-align: center;
line-height: 400px;
display: none;
background-color: #ff0;
}
.banner .show{
display: block;
}
.banner div{
position: absolute;
bottom: 10px;
width: 100%;
display: flex;
justify-content: center;
}
.banner div button{
width: 20px;
height: 20px;
background-color: #eee;
margin: 10px;
border: 0;
}
.banner div .active{
background-color: #f00;
}
.banner span{
width: 20px;
height: 20px;
background-color: rgba(0,0,0,.5);
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
text-align: center;
line-height: 20px;
}
.next{
right: 0;
}
.prev{
left: 0;
}
</style>主要内容：
<body>
<div class="banner">
<span class="prev"><</span>
<span class="next">></span>
<div>
<button class="active"></button>
<button></button>
<button></button>
</div>
<p class="show">111</p>
<p>222</p>
<p>333</p>
</div>
<script>
//
var oBtns = document.querySelectorAll('button') ;
var oPs = document.querySelectorAll('p') ;
var oPrev = document.querySelector('.prev') ;
var oNext = document.querySelector('.next') ;
var oBanner = document.querySelector('.banner') ;
// 自动播放
var count = 0 ; // 控制播放第几张图片
var t ; // 定时器
autoPlay()
function autoPlay() {
t = setInterval(function () {
count++ ;
// 播放到最后一张的时候，回到第一张
if(count >= oPs.length) {
count = 0
}
// 清除所有
for(var i = 0 ; i < oBtns.length ; i++) {
oBtns[i].classList.remove('active');
oPs[i].classList.remove('show') ;
}
// 给count添加
oBtns[count].classList.add('active') ;
oPs[count].classList.add('show')
},1000)
}
// 上翻页
oPrev.onclick = function () {
clearInterval(t)
count-- ;
if(count < 0) {
count = oPs.length - 1 ;
}
// 清除所有
for(var i = 0 ; i < oBtns.length ; i++) {
oBtns[i].classList.remove('active');
oPs[i].classList.remove('show') ;
}
// 给count添加
oBtns[count].classList.add('active') ;
oPs[count].classList.add('show') ;
}
// 下翻页可以自己写吗？
// 点击小点切换
for(var i = 0 ; i < oBtns.length ; i++) {
// 给对象添加自定义属性
// oBtns[i].index = i ;
// 给标签添加自定义属性
oBtns[i].setAttribute('index' , i)
oBtns[i].onclick = function () {
// 让播放的张数从点击的这一张继续向下播放
count = this.getAttribute('index') ;
clearInterval(t)
// 清除所有
for(var j = 0 ; j < oBtns.length ; j++) {
oBtns[j].classList.remove('active') ;
oPs[j].classList.remove('show') ;
}
// 给当前添加
this.classList.add('active') ;
// oPs[this.index].classList.add('show') ;
oPs[this.getAttribute('index')].classList.add('show') ;
}
}
// mouseover 鼠标移入事件
oBanner.onmouseover = function () {
clearInterval(t)
}
// mouseout 鼠标移出事件
oBanner.onmouseout = function () {
autoPlay()
}
</script>
</body>3.DOM
新增：
?DOM新增
? ? ? ? ? 1 innerHTML
? ? ? ? ? 2 创建一个文本节点 ? createTextNode()
? ? ? ? ? 创建标签节点 ? createElement()
? ? ? ? ? 插入 ?
? ? ? ? ? ? ?在最后面插入 appendChild()
? ? ? ? ? ? ?在指定的元素前面插入 ?insertBefore(要插入的元素 , 指定的元素)
?? ? ? ? 两种方法的区别：
? ? ? ? oP 在创建标签的时候，是一个对象
? ? ? ? innerHTML 只能解析字符串
var oDiv = document.querySelector('.a') ;
// oDiv.innerHTML = '<p>666</p>'
// 1 创建一个标签 createElement
var oP = document.createElement('p') ;
console.log(oP);
// 2 创建一个文本节点
var oText = document.createTextNode('666');
console.log(oText);
// 3 添加子元素 把文本插入标签中
oP.appendChild(oText) ;
// 4 把p插入div中
// oDiv.appendChild(oP)
// 同一个标签只能操作一次 --- 标签是对象，对象都有唯一的地址
// oDiv.appendChild(oP)
// oDiv.innerHTML = oP ; // 无法解析？
var oSpan = document.querySelector('span') ;
oDiv.insertBefore(oP , oSpan)删除
? ? ? ? DOM删除
? ? ? ? ? remove() ?删除自己和所有的子元素
? ? ? ? ? removeChild() ?删除指定的子元素，只能删除儿子，不能删除孙子
? ? ? ? ? innerHTML = '' ?删除所有的子元素
<div class="a">
<p>11</p>
<span>22</span>
<h2>
<i>888</i>
</h2>
</div>
<script>
var oDiv = document.querySelector('.a') ;
// oDiv.remove()
var oP = document.querySelector('p') ;
oDiv.removeChild(oP)
// oDiv.innerHTML = ''
// var oI = document.querySelector('i') ;
// 报错 --- removeChild() 只能删除儿子，不能删除孙子
// oDiv.removeChild(oI)
</script>替换
? ? ? ? 替换子元素
? ? ? ? ?replaceChild(new , old)
<div class="a">
<p>11</p>
<span>22</span>
<h2></h2>
</div>
<script>
// 替换子元素
// replaceChild(new , old)
var oDiv = document.querySelector('.a') ;
var oSpan = document.querySelector('span') ;
var oStrong = document.createElement('strong') ;
oStrong.innerHTML = '888'
oDiv.replaceChild(oStrong , oSpan)
</script>找父元素
? ? ? ? ?找父元素 ? parentNode
<ul>
<li>
<p>11</p>
<button>111</button>
</li>
<li>
<p>22</p>
<button>222</button>
</li>
<li>
<p>33</p>
<button>333</button>
</li>
</ul>
<script>
// 找父元素 parentNode
var oBtns = document.querySelectorAll('button') ;
for(var i = 0 ; i < oBtns.length ; i++) {
oBtns[i].onclick = function () {
console.log(this.parentNode);
}
}
</script>
找子元素
? ? ? ? childNodes ?子节点 ?--- ?包含所有的文本，换行，标签，注释等等
? ? ? ? children ? 子元素 ?--- ?只包含标签
? ? ? ? ? firstElementChild
? ? ? ? ? lastElementChild
<div class="a">
<!-- 这里是注释 -->
<p>11</p>
<span>222</span>
<h3>333</h3>
</div>
<script>
var oDiv = document.querySelector('.a') ;
console.log(oDiv.childNodes);
console.log(oDiv.children);
// console.log(oDiv.firstElementChild);
// console.log(oDiv.lastElementChild); // 标签
// console.log(oDiv.firstChild); // 节点
console.log(oDiv.children[0]);
</script>找同级元素
? ? ? ? previousElementSibling ?前一个标签兄弟元素
? ? ? ? nextElementSibling ?后一个标签兄弟
? ? ? ? previousSibling ? 前一个兄弟节点
? ? ? ? nextSibling ? ? ? 后一个兄弟节点
<div class="a">
<h1>00</h1>
<span>11</span>
<p>22</p>
<strong>333</strong>
</div>
<script>
var oDiv = document.querySelector('.a') ;
var oP = document.querySelector('p') ;
console.log(oP.previousElementSibling); // span
console.log(oP.previousSibling); // 换行
console.log(oP.nextElementSibling); // strong
console.log(oP.nextSibling); // 换行
console.log(oP.previousElementSibling.previousElementSibling);
</script>克隆节点
? ? ? ? cloneNode() ?克隆节点 , 默认只复制标签
? ? ? ? ?cloneNode(true) ?克隆节点，包含子元素
<div class="a">
<p>222</p>
</div>
<script>
var oDiv = document.querySelector('.a') ;
var oDiv2 = oDiv.cloneNode(true) ;
console.log(oDiv2);
document.body.appendChild(oDiv2)
</script>查找父元素：
css样式：
<style>
.title{
color: red;
}
.title span {
}
</style> <div class="a">
<ul>
<li>
<div>
<h3 class="title">
<span></span>
</h3>
</div>
</li>
</ul>
</div>
<h1></h1>
<br>
<div class="b"></div>
<div class="c"></div>
<div class="a">
<p>11</p>
<span>322</span>
<h3>333</h3>
</div>
<script>
var oDiv = document.querySelector('.a');
var oDiv = document.getElementsByClassName('.a')[0] ;
// 选择器是从右向左查找的
// 后代选择器酌情使用
var oP = document.querySelector('.a p') ;
// 从指定的父元素中查找
var oP = oDiv.querySelector('p') ;
</script>4.文档碎片
? ? ? ? 重绘 ?回流
? ? ? ? 重绘：重新绘画 ? ?比如颜色的改变会引发页面重绘
? ? ? ? 回流： ? ? ? ? ? 比如插队 ?display:none / block
? ? ? ? 重绘和回流都影响页面的响应速度
? ? ? ? 回流必引发重绘，但是重绘不一定引发回流
? ? ? ? 回流的代价大于重绘
? ? ? ? 重绘和回流是无法避免的
? ? ? ? 这个问题只能优化，不能解决
? ? ? ? 任何的DOM操作都会引发回流
????????css样式：
<style>
li{
/* box-sizing: border-box; */
/* border: 1px solid transparent; */
/* display: none; 不占位置*/
/* visibility: hidden; 占位置 */
}
li:hover{
color: red;
/* border: 1px solid #000; */
/* box-shadow: 0 0 0 1px red; */
}
</style> <ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 重绘 回流
// 重绘：重新绘画 比如颜色的改变会引发页面重绘
// 回流： 比如插队 display:none / block
// 重绘和回流都影响页面的响应速度
// 回流必引发重绘，但是重绘不一定引发回流
// 回流的代价大于重绘
// 重绘和回流是无法避免的
// 这个问题只能优化，不能解决
// 任何的DOM操作都会引发回流
// for(var i = 0 ; i < 100 ; i++) {
// var oP = document.createElement('p') ;
// oP.innerHTML = i ;
// // DOM操作有100次
// document.body.appendChild(oP)
// }
// var res = '' ;
// for(var i = 0 ; i < 100 ; i++) {
// res += '<p>' + i + '</p>'
// }
// // DOM实际上只有一次
// document.body.innerHTML += res ;
// 文档碎片 fragment
var fragment = document.createDocumentFragment() ;
console.log(fragment);
for(var i = 0 ; i < 1000 ; i++) {
var oP = document.createElement('p') ;
oP.innerHTML = i ;
fragment.appendChild(oP)
}
document.body.appendChild(fragment)
</script>5.留言板
css样式：
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
background: rgb(65, 65, 63);
}
.back {
width: 700px;
height: 100%;
background: white;
margin: auto;
margin-top: 20px;
}
.header,
.pop-head {
height: 50px;
font-size: 20px;
text-align: center;
line-height: 50px;
}
.name {
width: 640px;
height: 40px;
font-size: 20px;
margin: 10px 28px;
line-height: 50px;
border-radius: 8px;
border: 2px solid rgb(139, 137, 137);
outline: none;
}
.main,
.pop-reply {
width: 640px;
height: 150px;
font-size: 22px;
margin: 10px 28px;
border: 2px solid rgb(139, 137, 137);
outline: none;
border-radius: 8px;
resize: none;
}
.btn,
.pop-btn {
float: right;
height: 30px;
margin-right: 28px;
border-radius: 6px;
outline: none;
font-size: 20px;
padding: 0 20px;
background: rgb(169, 238, 255);
}
h3 {
font-size: 20px;
color: rgb(102, 102, 102);
background: rgb(205, 221, 248);
margin-top: 50px;
line-height: 50px;
text-indent: 30px;
font-weight: 545;
}
li {
list-style: none;
width: 640px;
font-size: 22px;
margin: 15px 30px;
}
.message-head {
display: flex;
}
.message-head .photo {
width: 70px;
height: 70px;
background: rgb(6, 109, 134);
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 70px;
overflow: hidden;
}
.message-head .time {
margin-left: 12px;
}
.liuyan,
.reply p {
width: 560px;
/* height: 76px; */
line-height: 50px;
display: block;
background: rgb(205, 221, 248);
font-size: 20px;
margin-left: 80px;
border-radius: 8px;
text-indent: 15px;
}
.delete {
width: 60px;
height: 30px;
display: block;
line-height: 30px;
margin-left: 580px;
/* margin-bottom: 0px; */
border-radius: 6px;
outline: none;
font-size: 15px;
background: rgb(169, 238, 255);
}
.answer {
width: 60px;
height: 30px;
display: block;
line-height: 30px;
margin-top: -29px;
margin-left: 515px;
border-radius: 6px;
outline: none;
font-size: 15px;
background: rgb(169, 238, 255);
}
.popup {
width: 100vw;
height: 100vh;
position: fixed;
background: rgba(0, 0, 0, .3);
left: 0;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.pop-content {
width: 700px;
background: #fff;
border-radius: 10px;
overflow: hidden;
padding-bottom: 20px;
}
.reply p {
margin-top: 10px;
background: rgba(100, 100, 100, .1);
}
</style>主要内容：
<div class="back">
<div class="header">留言板</div>
<input type="text" class="name" placeholder="请输入您的昵称">
<!-- 输入的内容 -->
<textarea class="main" placeholder="请保持言论文明......"></textarea>
<button class="btn">留言</button>
<h3>大家在说</h3>
<ul class="text">
<!-- <li>
<div class="message-head">
<span class="photo">系统</span>
<p class="time">2019-9-27 0:47:38</p>
</div>
<p class="liuyan">测试留言</p>
<div class="reply">
<p>测试回复</p>
</div>
<button class="delete">Delete</button>
<button class="answer">Answer</button>
</li> -->
</ul>
</div>
</div>
<div class="popup">
<div class="pop-content">
<div class="pop-head">回复板</div>
<textarea class="pop-reply" placeholder="请保持言论文明......"></textarea>
<button class="pop-btn huifu">回复</button>
<button class="pop-btn quxiao">取消</button>
</div>
</div>
<script>
//拿到对象
var oBtn = document.querySelector('.btn') ;
var oName = document.querySelector('.name');
var oContent = document.querySelector('.main') ;
//点击留言
oBtn.onclick = function () {
// 10s的倒计时----回复
// 点击回复后剩余倒计时
oBtn.disabled = true ;
var count = 5 ;
var t ;
oBtn.innerHTML = '剩余' + count +'s';
var t = setInterval(function () {
// clearInterval(t) ;
oBtn.innerHTML = '剩余' + --count + 's' ;
if(count === 0) {
clearInterval(t);
oBtn.disabled = false ;
oBtn.innerHTML = '回复' ;
}
} , 1000)
// 获取昵称和留言的内容
var n = oName.value ;
var c = oContent.value ;
if(n == ''){
alert('输入昵称为空，请重新输入');
}
else if(c == ''){
alert('输入的内容为空');
}
var oLi = document.createElement('li');
oLi.innerHTML =
`
<div class="message-head">
<span class="photo">${n}</span>
<p class="time">${formatDate() }</p>
</div>
<p class="liuyan">${c}</p>
<div class="reply">
</div>
<button class="delete">Delete</button>
<button class="answer">Answer</button>
`
//在ul中添加
var oText = document.querySelector('.text');
oText.appendChild(oLi);
//删除一定是在留言了以后才有的
//它只能删除一个
//拿到所有的删除按钮，然后循环绑定事件
var oDels = document.querySelectorAll('.delete') ;
for(var i = 0 ; i < oDels.length ; i++) {
oDels[i].onclick = function () {
//删除这个子元素的父元素
this.parentNode.remove() ;
}
}
//回复----回复事件
var oAnswers = document.querySelectorAll('.answer') ;
for(var i = 0 ; i < oAnswers.length ; i++) {
oAnswers[i].onclick = function () {
//显示弹窗
var oPopup = document.querySelector('.popup') ;
oPopup.style.display = 'flex' ;
//取消
var oQuxiao = document.querySelector('.quxiao') ;
oQuxiao.onclick = function () {
oPopup.style.display = 'none' ;
}
//回复
var oHuifu = document.querySelector('.huifu') ;
//回复内容
oHuifu.onclick = function () {
var oPop_reply = document.querySelector('.pop-reply') ;
var hfcontent = oPop_reply.value ;
if(hfcontent) {
var oP = document.createElement('p') ;
oP.innerHTML = hfcontent ;
var oReply = document.querySelector('.reply');
oReply.appendChild(oP);
}
oPopup.style.display = 'none' ;
}
}
}
}
//日期
function formatDate() {
//年月日，时分秒获取
var res = '';
var date = new Date() ;
var y = date.getFullYear() ;
var m = date.getMonth();
var d = date.getDate();
var h = date.getHours();
var m2 = date.getMinutes();
var s = date.getSeconds();
res += y + '年' + m + '月' + d +'日' + ' ' + h + '时' + m2 + '分' + s + '秒' ;
return res ;
}
</script>