1.路由的跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#/home">首页</a>
<a href="#/course">课程</a>
<div id="app"></div>
<script>
window.onhashchange = function(){
console.log(location.hash);
switch(location.hash){
case "#/home":
document.getElementById("app").innerHTML = "<h2>我是首页</h2>"
break;
case "#/course":
document.getElementById("app").innerHTML = "<h2>我是课程</h2>"
break;
default:
break;
}
}
</script>
</body>
</html>
2.选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
100%;
overflow: hidden;
}
ul li{
float: left;
160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
}
ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
<script type="text/javascript">
//变量提升
// var a;
// console.log(a);//undefined
// a = 2;
// console.log(a);//2
// var a;
// console.log(a);
// {
// a = 3;
// console.log(a);
// }
// console.log(a);
var oLis = document.getElementsByTagName("li");
var oPs = document.getElementsByTagName("p");
for(var i = 0;i < oLis.length;i++){
oLis[i].index = i;
oLis[i].onclick = function () {
for (var j = 0;j < oLis.length;j++){
oLis[j].className = "";
oPs[j].className = "";
}
this.className = "active";
oPs[this.index].className = "active";
}
}
</script>
</body>
</html>
3.用es6的let解决选项卡的问题
let olis = document.getElementsByTagName('li');
let oPs = document.getElementsByTagName('p');
for(let i = 0; i < olis.length; i++){
olis[i].onclick = function() {
for(let j = 0; j < olis.length; j++){
olis[j].className = '';
oPs[j].className = ''
}
this.className = 'active';
oPs[i].className = 'active';
}
4.DOM的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
abc{
display: block;
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<p id="child1">qing</p>
</div>
<script>
var oDiv = document.getElementById("box");
var oP = document.getElementById("child1");
// var oP1 = document.createElement("abc");
// oDiv.appendChild(oP1);
var oP2 = document.createElement("p");
oP2.innerText = "qingqing";
oDiv.insertBefore(oP2,oP);
</script>
</body>
</html>
5.定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="start">开启定时器</button>
<button id="clear">清除定时器</button>
<div id="box"></div>
<!--定时器
1.一次性定时器
可以做异步
2.循环周期定时器
可以做动画
js和python都有垃圾回收机制
但是定时器对象，回收不了
开一次性定时器：
var timer = setTimenout(fn,1000);
开循环定时器:
var timer = setInterval(fn,1000);
clearTimeout()
clearInterval()
-->
<script>
var timer = null;
document.getElementById("start").onclick = function(){
timer = setTimeout(function(){
console.log(11111);
},1000);
console.log(222222);
};
document.getElementById("clear").onclick = function () {
clearTimeout()
}
// var count = 0;
// var timer = null;
// document.getElementById("start").onclick = function(){
// var oDiv = document.getElementById("box");
// clearInterval(timer);
// timer = setInterval(function(){
// count+=10;
// oDiv.style.marginLeft = count + "px";
// },1000)
// }
</script>
</body>
</html>
6.面向对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1使用Object()内置的构造函数来创建对象
// var person = new Object();
// person.name = "qing";
// person.age = 18;
// person.fav = function () {
// console.log(this.name)
// };
// person.fav();
//字面量方式创建对象
// var person = {
// name:"qing",
// age:18,
// fav:function () {
// console.log(this.name);
// }
// };
// person.fav();
function createPerson() {
var person = new Object();
person.name = "qing";
person.age = 18;
person.fav = function(){
console.log(this.name);
};
return person;
}
function createFruit() {
var furit = new Object();
furit.name = "zhang";
furit.age = 18;
furit.fav = function () {
console.log(this.name);
};
return furit;
}
var p1 = createPerson();
var f1 = createFruit();
console.log(p1 instanceof Object);
console.log(f1 instanceof Object);
</script>
</body>
</html>
7.构造函数创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//var arr = new Array();
//console.log(arr);
//自定义构造函数,和普通函数的区别就是首字母大写
function Person(name,age){
this.name = name;
this.age = age;
this.fav = function () {
console.log(this.name)
}
}
function Furit(name,age) {
this.name = name;
this.age = age;
this.fav = function () {
console.log(this.name)
}
}
var p1 = new Person("qing",18);
var f1 = new Furit("zhang",17);
console.log(p1 instanceof Object);
console.log(f1 instanceof Object);
console.log(p1 instanceof Person);
console.log(f1 instanceof Furit);
</script>
</body>
</html>
8.原型的模式来创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function Person(name,age){
this.name = name;
this.age = age;
}
//Person.prototype 是Person的父类
Person.prototype.showName = function () {
console.log(this.name)
};
var p1 = new Person("qing",20);
p1.showName();
</script>
</body>
</html>
9.BOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="./index.html">下一页</a>
<script>
// //在5秒之后打开百度
// setTimeout(function () {
// window.open("http://www.baidu.com","_block")//_self是在本窗口打开，_block或者不写是在新窗口打开
// },5000);
// console.log(window.location);
// window.location.href = "http://www.baidu.com";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">上一页</button>
<script>
alert(1);
document.getElementById("btn").onclick = function () {
//后退
history.go(-1);
//history.go(0);
//尽量少用是全局刷新 局部刷新（ajax）
window.location.reload();
}
</script>
</body>
</html>