js基础知识3
Posted 被嫌弃的胖子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js基础知识3相关的知识，希望对你有一定的参考价值。
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的主要内容，如果未能解决你的问题，请参考以下文章
Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段