js基礎知識3
阿新 • • 發佈：2018-09-27
eat add reat chang 垃圾回收 var 周期 += 定時器 
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
View Code
2.選項卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding:
View Code
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‘; }View Code
4.DOM的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
abc{
display: block;
width: 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>
View Code
5.定時器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 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>
View Code
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>
View Code
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>
View Code
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>
View Code
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>
View Code
js基礎知識3