上节课复习:
1、BOM操作
window.history
window.location.href="url地址"
window.location.reload()
var t1=setTimout(函数,毫秒数)
var t2=setInterval(函数,毫秒数)
clearTimeout(t2)
clearInterval(t2)
alert("弹窗")
console.log("终端打印")
2、DOM操作
2.1 查找:
直接找
window.document.getElementById()
window.document.getElementsByClassName()[索引值]
window.document.getElementsByTagName()[索引值]
window.document.getElementsByName()[索引值]
间接找
window.document.getElementById().childNodes()
window.document.getElementById().firstChild()
window.document.getElementById().lastChild()
window.document.getElementById().parentNode()
window.document.getElementById().nextSibling()
window.document.getElementById().previousSibling()
window.document.getElementById().children()
window.document.getElementById().parentNode()
2.2 新增标签
var p=document.createElement("p")
var somenode=document.getElementById("#xxx")
var mmm=document.getElementById("#yyy")
somenode.appendChild(p)
somenode.insertBefore(p,mmm)
somenode.removeChild(要删除的子节点);
somenode.replaceChild(新的子节点, 某个子节点);
2.3 修改元素的属性
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
imgEle.src
imgEle.src="..."
元素.value
2.4 class操作
标签.classList.add()
标签.classList.remove()
标签.classList.contains()
标签.classList.toggle()
2.5 css操作
标签.style.fontSize="10px"
2.6 事件
绑定事件
标签.onclick=function() {
this // 代表的就是标签本身
}
今日内容:
1、js练习题
2、jquery
01.模态框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #f6c2d2;
}
.box2 {
width: 500px;
height: 500px;
background-color: white;
position: absolute;
top: 100px;
left: 50%;
margin-left: -250px;
text-align: center;
line-height: 500px;
color: red;
}
.box3 {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
background-color: red;
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<script>
var btn=document.getElementById("btn")
btn.onclick=function () {
var box1=document.createElement("div")
var box2=document.createElement("div")
var box3=document.createElement("div")
box2.innerText="弹出的模态框"
box3.innerText="X"
box1.classList.add("box1")
box2.classList.add("box2")
box3.classList.add("box3")
box1.appendChild(box2)
box2.appendChild(box3)
var body=document.getElementsByTagName('body')[0]
body.appendChild(box1)
box3.onclick=function () {
body.removeChild(box1)
}
}
</script>
</body>
</html>
02.模态框扩展
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #f6c2d2;
display: none;
}
.box2 {
width: 500px;
height: 500px;
background-color: white;
position: absolute;
top: 100px;
left: 50%;
margin-left: -250px;
color: red;
}
.box3 {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
background-color: red;
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<div class="box1">
<div class="box2">
<form action="">
<p>
用户名:<input type="text" name="username">
</p>
<p>
密码:<input type="text" name="password">
</p>
<p>
<input type="button" value="提交">
</p>
</form>
<div class="box3">X</div>
</div>
</div>
<script>
var btn=document.getElementById("btn")
var box1=document.getElementsByClassName('box1')[0]
btn.onclick=function () {
box1.style.display="block"
}
var box3=document.getElementsByClassName('box3')[0]
box3.onclick=function () {
box1.style.display="none"
document.getElementsByName("username")[0].value=""
document.getElementsByName("password")[0].value=""
}
</script>
</body>
</html>
03.点击有惊喜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
margin: auto;
text-align: center;
line-height: 200px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<div class="box">
点击有惊喜!
</div>
<script>
var box=document.getElementsByClassName("box")[0]
var count=0
box.onclick=function () {
count++
if (count % 4 == 1){
this.style.backgroundColor="green"
this.innerText="继续点击!"
}else if(count % 4 == 2){
this.style.backgroundColor="yellow"
this.innerText="精彩即将揭晓"
}else if(count % 4 == 3){
this.style.backgroundColor="pink"
this.innerText="骗你的傻逼"
}else {
this.style.backgroundColor="red"
this.innerText="点击有惊喜!"
}
}
</script>
</body>
</html>
04.简易评论框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
background-color: #f6c2d2;
width: 600px;
}
ul>li {
list-style: none;
background-color: #f5deb3;
border: 1px dotted black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box1">
<p>评论区:</p>
<ul></ul>
</div>
<div class="box2">
<p>留言内容</p>
<textarea name="" id="content" cols="30" rows="10"></textarea>
<p>
<input type="button" value="提交" id="btn">
<input type="button" value="统计" id="cal">
</p>
</div>
<script>
var btn=document.getElementById("btn")
var count=0
btn.onclick = function () {
var content=document.getElementById("content")
var val=content.value
if (val.length != 0){
var ul=document.getElementsByTagName("ul")[0]
var li=document.createElement("li")
var p1=document.createElement("p")
var p2=document.createElement("p")
count=document.getElementsByTagName("li").length+1
var d=new Date()
p1.innerHTML="#"+ count + "楼" + " " +d.toLocaleString() + " " +"<span class='del'>删除</span>"
p2.innerText=val
li.appendChild(p1)
li.appendChild(p2)
ul.appendChild(li)
content.value=""
var delButtons=document.getElementsByClassName("del")
var currentButton=delButtons[delButtons.length-1]
currentButton.onclick=function () {
ul.removeChild(this.parentNode.parentNode)
}
}
}
</script>
</body>
</html>
05.简易评论框改进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
background-color: #f6c2d2;
width: 600px;
}
ul>li {
list-style: none;
background-color: #f5deb3;
border: 1px dotted black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box1">
<p>评论区:</p>
<ul></ul>
</div>
<div class="box2">
<p>留言内容</p>
<textarea name="" id="content" cols="30" rows="10"></textarea>
<p>
<input type="button" value="提交" id="btn">
<input type="button" value="统计" id="cal">
</p>
</div>
<script>
var btn=document.getElementById("btn")
var count=0
btn.onclick = function () {
var content=document.getElementById("content")
var val=content.value
if (val.length != 0){
var ul=document.getElementsByTagName("ul")[0]
var li=document.createElement("li")
var p1=document.createElement("p")
var p2=document.createElement("p")
count=document.getElementsByTagName("li").length+1
var d=new Date()
p1.innerHTML="#"+ "<span class='num'>"+count +"</span>"+ "楼" + " " +d.toLocaleString() + " " +"<span class='del'>删除</span>"
p2.innerText=val
li.appendChild(p1)
li.appendChild(p2)
ul.appendChild(li)
content.value=""
var delButtons=document.getElementsByClassName("del")
var currentButton=delButtons[delButtons.length-1]
currentButton.onclick=function () {
var allNum=document.getElementsByClassName("num")
var currntNum=this.previousElementSibling
for (var i=0;i<allNum.length;i++) {
if (currntNum == allNum[i]) {
for (var j=i+1;j<allNum.length;j++) {
allNum[j].innerText=parseInt(allNum[j].innerText) - 1
}
break
}
}
ul.removeChild(this.parentNode.parentNode)
count--
}
}
}
</script>
</body>
</html>
06.选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 400px;
border: 1px solid red;
margin: auto;
}
ul>li {
list-style: none;
width: 200px;
height: 80px;
background-color: gray;
text-align: center;
line-height: 80px;
float: left;
}
ul:after {
display: table;
content: "";
clear: both;
}
.content {
background-color: #f6c2d2;
width: 600px;
height: 320px;
display: none;
}
li.active {
background-color: #55bbbb;
}
div.active {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">首页</li>
<li>新闻</li>
<li>图片</li>
</ul>
<div class="content active">
首页内容
</div>
<div class="content ">
新闻内容
</div>
<div class="content">
图片内容
</div>
</div>
<script>
var arr=document.getElementsByTagName('li')
for (var i=0;i<arr.length;i++) {
arr[i].n=i
arr[i].onclick=function () {
for (j=0;j<arr.length;j++) {
arr[j].classList.remove("active")
document.getElementsByClassName("content")[j].classList.remove("active")
}
this.classList.add('active')
document.getElementsByClassName("content")[this.n].classList.add("active")
}
}
</script>
</body>
</html>
p1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>11111</p>
<input type="text">
<a href="p2.html">点击进入下一页</a>
</body>
</html>
p2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>222222</p>
<a href="p3.html">点击进入下一页</a>
</body>
</html>
p3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>3333</p>
<input type="button" value="回退" id="btn">
<script>
document.getElementById("btn").onclick=function () {
window.history.back()
}
</script>
</body>
</html>
test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 480px;
height: 200px;
border: 1px solid red;
margin: 0 auto;
}
ul li {
list-style: none;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #b0b0b0;
float: left;
}
li.active {
background-color: #55BBBB;
}
p {
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: white;
}
p.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<ul>
<li class="active">首页</li>
<li>新闻</li>
<li>图片</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
<script>
var aLi=document.getElementsByTagName('li');
var aP=document.getElementsByTagName('p');
for (var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function () {
for (var j=0;j<aLi.length;j++){
aLi[j].className='';
aP[j].className='';
}
this.className='active';
aP[this.index].className='active';
}
}
</script>
</body>
</html>