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和 ...
随机推荐
- scrapy 爬取视频
利用FilesPipeline 下载视频 1.setting.py # 保存log信息的文件名 LOG_LEVEL = "INFO" # LOG_STDOUT = True # L ...
- JS阻止冒泡和取消默认事件(默认行为)
本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e ...
- C++ class 内的 [] 重载示例。
#include <iostream> // overloading "operator [] " inside class ///////////////////// ...
- Java定义的数据类型
/* Java定义的数据类型 一.变量按照数据类型来; 基本数据类型; 整型:byte short int long 浮点型 float double 字符型 char 布尔型:boolean ...
- 了解css
css指层叠样式表(Cascading Style Sheets) 1.样式定义如何显示HTML元素 2.样式通常存储在样式表中 把样式添加到HTML4.0中,是为了解决内容与表现分离的问题 外部样式 ...
- maven 常见命令
mvn clean package依次执行了clean.resources.compile.testResources.testCompile.test.jar(打包)等7个阶段.mvn clean ...
- 【Java语言特性学习之二】反射
一.概念java加载class文件分两种情况:(1)类型是编译器已知的,这种文件的.class文件在编译的时候,编译器会把.class文件打开(不加载)检查,称为Run- Time Type Iden ...
- 物联网架构成长之路(46)-Rancher部署应用入门
0.前言 上一篇已经安装好Rancher了,这一篇主要是简单的操作一下Rancher,了解一些常用功能.1.集群信息 选择对应的集群,查看对应集群信息. 还可以执行kubectl命令,命令可以参考前几 ...
- 物联网架构成长之路(36)-Vue前端入门
1. 前言 物联网平台,需要有一个类似大屏看板的功能. 找了一圈,发现阿里已经有对应的DataV产品,但是那个价格有点贵啊.所以找了这个[http://datav.jiaminghi.com/demo ...
- HttpUtility.HtmlDecode ，HttpUtility.HtmlEncode 与 Server.HtmlDecode ，Server.HtmlEncode 与 HttpServerUtility.HtmlDecode ， HttpServerUtility.HtmlEncode
HtmlEncode: 将 Html 源文件中不允许出现的字符进行编码,通常是编码以下字符"<".">"."&" 等. ...