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{ ???????????????width: 480px; ???????????????margin: 20px auto; ???????????????border: 1px solid red; ???????????} ???????????ul{ ???????????????width: 100%; ???????????????overflow: hidden; ???????????} ???????????ul li{ ???????????????float: left; ???????????????width: 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; ???????????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>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>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>js基础知识3
原文地址：https://www.cnblogs.com/qq849784670/p/9714262.html