JavaScript-DOM续
一.路由的跳转
<body>
<a href="#/course">课程</a>
<a href="#/main">首页</a>
<div class="show"></div>
<script>
//window.inhashchange是一个用来检测路由是否变化的函数
window.onhashchange=function(){
//location.hash是获取路由的最后一部分
switch (location.hash) {
case '#/course' :
document.getElementsByClassName('show')[0].innerHTML='我是课程';
break;
case '#/main' :
document.getElementsByClassName('show')[0].innerHTML='我是首页';
break;
default:
break;
}
}
</script>
</body>
二.tab栏选项卡
(1)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
float: left;
}
ul{
list-style: none;
}
a{
display: inline-block;
height: 50px;
width: 100px; line-height: 50px;
text-align: center;
text-decoration: none;
}
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
p{
height: 200px;
width: 300px;
background-color: red;
line-height: 200px;
text-align: center;
display: none;
}
.active{
display: block;
}
</style>
</head>
<body>
<div>
<ul class="clearfix">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
<p >首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</ul>
<script>
oA=document.getElementsByTagName('a');
//此处的var i=0相当于在最上面的全局变量中var i,此处是i=0
for(var i=0;i<oA.length;i++){
oA[i].index = i;//把i找一个地方存储起来
oA[i].onclick=function (){
for(var j=0;j<oA.length;j++){
oP=document.getElementsByTagName('p');
oP[j].className='';
oA[j].style.backgroundColor='#a5a6b0';
}
oA[this.index].style.backgroundColor='red';
oP[this.index].className='active';
}
}
</script>
</div>
</body>
//作用域:一个{}代表一个作用域
//变量提升:见上面代码
(2)用let解决变量提升问题(用let不会产生变量提升的现象)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
float: left;
}
ul{
list-style: none;
}
a{
display: inline-block;
height: 50px;
width: 100px;
background-color: #a5a6b0;
line-height: 50px;
text-align: center;
text-decoration: none;
}
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
p{
height: 200px;
width: 300px;
background-color: red;
line-height: 200px;
text-align: center;
display: none;
}
.active{
display: block;
}
</style>
</head>
<body>
<div>
<ul class="clearfix">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
<p >首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</ul>
<script>
oA=document.getElementsByTagName('a');
for(let i=0;i<oA.length;i++){
oA[i].onclick=function (){
for(let j=0;j<oA.length;j++){
oP=document.getElementsByTagName('p');
oP[j].className='';
oA[j].style.backgroundColor='#a5a6b0';
}
oA[i].style.backgroundColor='red';
oP[i].className='active';
}
}
</script>
</div>
</body>
二.定时器
(1)一次性定时器
可以做异步
(2)循环周期定时器
可以做动画
js的垃圾回收机制不回收定时器对象
1.开一次性定时器
var timer=setTimeout(fn,1000);
清一次性定时器
clearTimeout(timer)
实例:
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="start">开启定时器</button>
<button class="end">关闭定时器</button>
<script>
var timer;
document.getElementsByClassName('start')[0].onclick=function(){
timer=setTimeout(function(){
alert('111')
},5000);
};
document.getElementsByClassName('end')[0].onclick=function(){
clearTimeout(timer);
};
</script>
</body>
2.开循环定时器
timer=setInterval(fn,1000);
清循环定时器
clearInterval(timer)
实例:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
height: 100px;
width: 100px;
background-color: orangered;
}
</style>
</head>
<body>
<button class="start">开启定时器</button>
<button class="end">关闭定时器</button>
<div class="box"></div>
<script>
var timer;
var count=0;
document.getElementsByClassName('start')[0].onclick=function(){
clearInterval(timer);
timer=setInterval(function () {
count+=10;
oBox=document.getElementsByClassName('box')[0];
oBox.style.marginLeft=count+'px';
},500)
};
document.getElementsByClassName('end')[0].onclick=function(){
clearTimeout(timer);
};
</script>
</body>
三.JavaScript中的面向对象
1.使用Object或字面量方式创建对象
(1)使用Object内置的构造函数来创建对象
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//创建student对象
var student=new Object();
//添加属性
student.name='沈珍珠';
student.age='18';
//添加方法
student.work=function(){
alert('战斗')
};
student.work();
</script>
</body>
(2)字面量方式创建
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//创建一个student对象
var student={
//添加属性
name:'广平王',
//用逗号隔开
age:'19',
//添加方法
work:function(){
alert('皇位');
}
};
</script>
</body>
2.工厂模式创建对象
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function factory(){
var student=new Object();
student.name='魏璎珞';
student.work=function(){
alert('战斗');
};
return student;
}
var s1=factory();
s1.work();
var s2=factory();
</script>
</body>
3.自定义的构造函数模式创建对象
<body>
<script>
//为了与正常的函数区分,此处的函数名首字母要大写
function Person(name,age){
//此处的this相当于面向对象中的self
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);
}
}
//实例化时需要加一个new关键字
var f1=new Fruit('apple','18');
var p1=new Person('lili','18'); //instance用来检测前者是否是后者的实例,所有对象都是Object的实例
console.log(p1 instanceof Person);
console.log(f1 instanceof Fruit);
</script>
</body>
4.原型的模式创建对象
<body>
<script>
function Person(name,age){
this.name=name;
this.age=age;
}
//Person.prototype是Person的父类
//每一个实例化对象都继承prototype
Person.prototype.showName=function(){
//谁调用prototype,这里的this就是谁
console.log(this.name);
};
var p1=new Person('mimi',18);
p1.showName();
var p2=new Person('丽丽',19);
p2.showName()
</script>
</body>
JavaScript-DOM续的更多相关文章
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
- JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
- JavaScript DOM 编程艺术（第2版）读书笔记（1）
JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
- JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
随机推荐
- git如何更新fork的repository（Fork一个别人的repository，做了一些改动，再合并别人的更新）
Fork一个别人的repository,做了一些改动,想提交pull request的时候,发现原先别人的repository已经又有了一些更新了,这个时候想使得自己fork出的repository也 ...
- H∞一般控制问题的鲁棒叙述性说明
Robust Control System:反馈控制有承受一定类不确定能力的影响,这一直保持在这种不确定的条件(制)稳定.动态特性(灵敏度)和稳态特性(逐步调整)的能力. 非结构不确定性(Unstru ...
- idea 搭建 SpringBoot 集成 mybatis
编译器:IDEA2018.2.3 环境:win10,jdk1.8,maven3.4 数据库:mysql 5.7 备注:截图较大,如果看不清,可以在图片上右键=>在新标签页中打开 查看高清大图 ...
- Clustering Devices In An Internet Of Things
Clustering devices in an Internet of Things ('IoT'), including: receiving, by a device clustering mo ...
- c语言学习笔记（10）——结构体
------------------------------------------------------------------ # include <stdio.h> struct ...
- 狄利克雷过程（Dirichlet Process）
0. 引入 现观察得到两个样本 θ1,θ2,来推测它们可能来自的分布: 假设来自于连续型概率密度函数, θ1,θ2∼H(θ) 则 θ1,θ2 相等的概率为 0,p(θ1=θ2)=0 概率为 0,不代表 ...
- HDOJ 2189 悼念512四川汶川大地震遇难者——来生一起走 【生成函数】
意甲冠军:没有解释的很清楚. 策略:如果, 这是改变一个简单的生成函数. 这道题做了好久,才明确是那有毛病.还是理解的不够深刻. AC代码: #include<stdio.h> #incl ...
- WPF元素绑定
原文:WPF元素绑定 数据绑定简介:数据绑定是一种关系,该关系告诉WPF从源对象提取一些信息,并用这些信息设置目标对象的属性.目标属性是依赖项属性.源对象可以是任何内容,从另一个WPF元素乃至ADO. ...
- WPF学习笔记：（一）数据绑定与DataContext
前一段半心半意地学习了一下WPF,是从控件入手的,发现巨容易,甚至有些无趣.昨天面试,被问到了很多WPF的特性的东西,直接就傻了.于是乎,还是要去深刻的学习一下WPF.刚刚试了一下数据绑定,几次都没有 ...
- 微信小程序入门-指南针
微信小程序提供了众多的原生API接口,利用罗盘接口,做了个简单的指南针小程序,搜索小程序[X的实验室]可看效果. 实现方案 利用罗盘接口返回的[数据],转化为指南针偏移量[度数],利用CSS3 tra ...