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版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
随机推荐
- C# 控制台使用 UAC 权限
原文:C# 控制台使用 UAC 权限 本文告诉大家如何在 C# 控制台项目使用 UAC 权限.这个方法在 WPF 和 控制台都是可以使用. 右击项目,点击添加文件,找到程序清单 在 WPF 使用 UA ...
- .net remoting 抛出异常
原文:.net remoting 抛出异常 本文告诉大家如何在使用 .net remoting 的时候,抛出异常. 所有在远程软件运行的类,如果需要传输到本地,都需要继承 MarshalByRefOb ...
- QEMU使用virtio磁盘
环境 宿主环境:windows 10 pro QEMU版本:3.1 客户机:windows2003 virtio是一种半虚拟化技术,window2003安装盘不带驱动程序,所以首先采用IDE方式安装w ...
- element-ui 自定义表单验证 , 但是不出现小红心了
基本上按照文档上提供的方式做就没啥大问题 , 我遇到的问题是 , 自定义以后不显示小红星了 <el-form :model="ruleForm2" status-icon : ...
- wpf mvvm模式下CommandParameter传递多参
原文:wpf mvvm模式下CommandParameter传递多参 CommandParameter一般只允许设置一次,所以如果要传递多参数,就要稍微处理一下.我暂时还没找到更好的方案,下面介绍的这 ...
- gdal1.10编译经验
作者:朱金灿 来源:http://blog.csdn.net/clever101 集成了一些扩展库,使用makefile编译,出现了一个链接错误: libcmt.lib(crt0.obj): erro ...
- WPF封装控件时 检测是否在设计模式中
原文:WPF封装控件时 检测是否在设计模式中 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Vblegend_2013/article/detail ...
- BeagleBone Black第八课板：建立Eclipse编程环境
BBB第八课板:建立Eclipse编程环境 最近建立了一个新的编程环境.感觉很方便,给大家分享.除了先前BBB董事会远程桌面直接写shell脚本或C外部程序,经Debain 7.5根据该制度还试图用编 ...
- Wireshark非标准分析port无流量
Wireshark非标准分析port无流量 2.2.2 非标准分析port无流量Wireshark非标准分析port流量 应用程序执行使用非标准port号总是网络分析专家最关注的.关注该应用程序是否 ...
- 在React开发中遇到的问题——数组引用赋值
在React开发中遇到了一个问题: 需求是在一个选择组件中选择数据mydata数组,确定后将mydata数组返回到父组件,再次打开该选择组件时,从父组件获取之前选择的数据mydata并显示为已选择. ...