js 落幕
1.关于路由的跳转
核心是 a 再取出后缀作为参数判断 最后 innerHTML 上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这里返回的都是一个放在路由的后缀-->
<a href="#/love">爱</a>
<a href="#/myself">我自己</a>
<div id="app"></div> <script>
<!--这里是通过location.hash来取出后缀做判断-->
window.onhashchange = function () {
console.log(location.hash);
switch (location.hash) {
case '#/love':
document.getElementById("app").innerHTML = "<h2>我爱你</h2>";
break;
case "#/myself":
document.getElementById("app").innerHTML = "<h1>你是谁</h1>";
break;
default:
break
} }
</script> </body>
</html>
路由跳转
2.变量提升 js 的特殊情况
在js 中 会把 变量提到最前面显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script> console.log(a);
var a = 3;
//由于变量提升 会使其变成 var a console.log(a)
// a=3 console.log(a)
//结果为 undefinded 3
console.log(a); console.log(b);
{
var b = 5;
console.log(b);
}
console.log(b)
// 同理 结果为 undefinded 5 5
</script> </body>
</html>
变量提升 示例
3.tab栏选项卡
这里主要是通过联动 的 方式使页面和tab栏实现同步
但是会产生变量提升 所以以后会用let 代替 var 取消 变量提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#app{
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: yellow;
}
ul li a{
text-decoration : none;
color: darkviolet;
}
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="app">
<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 olis = document.getElementsByTagName('li');
var ops = document.getElementsByTagName("p");
for ( var i=0;i<olis.length;i++) {
//这里用olis[i].index = 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';
} }
/*
* (2)
// * 这里可以使用let 代替 var 不会发生变量提升
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';
} }*/ </script> </body>
</html>
tab栏
4.insertBefore 兄弟之间的包含
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
abc{
width: 100px;
height: 100px;
background-color: red;
display: block;
}
</style>
</head>
<body>
<div id="box">
<p id="child1">alex</p>
</div>
<script> var oDiv = document.getElementById('box');
var op1 = document.getElementById('child1'); // var oP = document.createElement('abc');
//appendChild 是父子之间的包含
// oDiv.appendChild(oP); var op2 = document.createElement('p');
op2.innerText = 'wusir'; //insertBefore 是兄弟之间的包含
oDiv.insertBefore(op2, op1); </script> </body>
</html>
insertBefore
5.时间
<1> 一次性定时器
可以做异步
开启一次性定时器:
var time = setTimeout(fn,1000);定时器函数
清除:
clearTimeout()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 50px;
background-color: red;
}
</style> </head>
<body>
<button id="start">开启</button>
<button id="clear">清楚</button>
<div id="box"></div>
<script>
var time =null;
document.getElementById("start").onclick = function () {
//建立时间的函数 一次性时间 异步
time = setTimeout(function () {
console.log(111);
},2000);
console.log(555)
};
document.getElementById("clear").onclick = function () {
//这里是清除时间 clearTimeout()后面加参数
//一定要在时间显示前清楚 要不就没用了
clearTimeout(time) }
</script> </body>
</html>
一次性定时器
<2>循环周期定时器
可以做动画
js 跟 python 一样 都有垃圾回收机制
but 定时器对象 垃圾回收收不回
开启循环定时器
time = setInterval(fn,1000);
清除:
clearInterval()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 50px;
background-color: red;
}
</style> </head>
<body>
<button id="start">开启</button>
<button id="clear">清楚</button>
<div id="box"></div>
<script>
// var time =null;
// document.getElementById("start").onclick = function () {
// //建立时间的函数 一次性时间 异步
// time = setTimeout(function () {
// console.log(111);
// },2000);
// console.log(555)
// };
// document.getElementById("clear").onclick = function () {
// //这里是清除时间 clearTimeout()后面加参数
// //一定要在时间显示前清楚 要不就没用了
// clearTimeout(time)
//
// }
var time = null;
var count = 0;
document.getElementById("start").onclick = function () {
var oDiv = document.getElementById("box");
// clearInterval(time);
//这里是开启循环
time = setInterval(function () {
count+=10;
oDiv.style.marginLeft = count+"px";
},50);
document.getElementById("clear").onclick = function () {
clearInterval(time);
}
}
</script> </body>
</html>
循环定时器
6js 面向对象
3.js面向对象
//使用Object()内置的构造函数来创建对象 // new Array()
// [] /*
var person = new Object(); person.name = 'alex'; person.age = 18; person.fav = function() { alert(this.name);
}
person.fav();
*/
/*
// 1.字面量方式创建对象
var person = {
name:'玖妖',
age:18,
fav:function() {
alert(this.name)
}
}; person.fav();
*/ //2.工厂模式创建
function createPerson(){
var person = new Object();
person.name = 'alex'; person.age = 18; person.fav = function() { alert(this.name);
}
return person;
} function createFruit(){
var fruit = new Object();
fruit.name = 'alex'; fruit.age = 18; fruit.fav = function() { alert(this.name);
}
return fruit;
}
var p1 = createPerson();
var f1 = createFruit(); console.log(p1 instanceof Object);
console.log(f1 instanceof Object); //3.自定义构造函数
function Person(name,age) { this.name = name;
this.age = age;
this.fav = function() {
alert(this.name);
}
} function Fruit(name,age) { this.name = name;
this.age = age;
this.fav = function() {
alert(this.name);
}
}
var p1 = new Person('alex',17);
var f1 = new Fruit('wusir',19);
console.log(p1 instanceof Object);
console.log(f1 instanceof Object);
console.log(p1 instanceof Person);
console.log(f1 instanceof Fruit); //4.原型对象创建对象
function Person(name,age) {
this.name = name;
this.age = age;
}
// Person.prototype 它是person的父类 // 原型 prototype
Person.prototype.showName = function() {
// this指的是person
console.log(this.name)
}
var p1 = new Person('alex',18);
console.log(p1);
p1.showName();
js面向对象
js 落幕的更多相关文章
- 百度百科Tooltip的实现--原生js的应用
我们在浏览百度百科时,不难发现提示框的存在,如下图: 实现如下: 1.HTML代码部分 <!DOCTYPE html><html lang="en">< ...
- JavaScript--我发现，原来你是这样的JS（再说引用类型，基本包装类型与个体内置对象）
一.介绍 本篇是续上一篇的,引用类型的后篇,本篇主要是说基本包装类型和个体内置对象.如果你能收获一些知识,那我很高兴,很满足,哈哈哈,希望大家能愉快看完.如果你想学好一门技术,要不忘初心,方得始终. ...
- JS--我发现，原来你是这样的JS（引用类型不简单[下篇]，基本包装类型与个体内置对象）
一.介绍 本篇是续上一篇的,引用类型的下篇,本篇主要是说基本包装类型和个体内置对象.如果你能收获一些知识,那我很高兴,很满足,哈哈哈,希望大家能愉快看完.如果你想学好一门技术,要不忘初心,方得始终. ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
随机推荐
- url中的20%、22%、26%、28%、29%怎么解析还原成真实的字符
- 洛谷P3702 [SDOI2017]序列计数
题目大意: Alice想要得到一个长度为\(n\)的序列,序列中的数都是不超过\(m\)的正整数,而且这\(n\)个数的和是\(p\)的倍数. Alice还希望,这\(n\)个数中,至少有一个数是质数 ...
- 三大相关系数: pearson, spearman, kendall（python示例实现）
三大相关系数:pearson, spearman, kendall 统计学中的三大相关性系数:pearson, spearman, kendall,他们反应的都是两个变量之间变化趋势的方向以及程度,其 ...
- CSP-J&S2019第二轮游记认证
Day 0 我毕竟不是竞赛省,在黑龙江这个弱省任何初中都没有竞赛生的----在初中,文化课第一----永远如此. 因而,我并不能翘掉周五的文化课来复习或是提前前往省城参加下午2:00~6:00的试机. ...
- OpenGL ES 入门
写在前面 记录一下 OpenGL ES Android 开发的入门教程.逻辑性可能不那么强,想到哪写到哪.也可能自己的一些理解有误. 参考资料: LearnOpenGL CN Android官方文档 ...
- java基础 Unsafe
参考文章: https://tech.meituan.com/2019/02/14/talk-about-java-magic-class-unsafe.html
- Win10修改hosts文件并配置DNS
1.打开C:\Windows\System32\drivers\etc目录 2.去掉hosts文件的只读属性 3.添加dns解析配置 127.0.0.1 www.example.c ...
- 集成Azure DevOps Server(TFS) 与微软Teams
1.概述 Microsoft Teams是Office 365中团队协作的中心.将团队的所有聊天.会议.文件和应用程序放在一个位置.软件开发团队可以在一个专门的协作中心中即时访问他们所需的所有内容,T ...
- Azure EA (2) 使用Postman访问国内Azure Billing API
<Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China 请读者先看一下之前的文档内容:Azure EA (1) 查看国内Az ...
- conda基本知识
卸载anaconda: rm -rf anaconda3 (anaconda文件夹名称) conda删除虚拟环境 在终端执行:conda remove -n your_env_name(虚拟环境名称) ...