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版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
随机推荐
- 关于java项目与web项目中lib包的那点事
一.在java项目中如何引入外部jar包:1.在我们的java项目下新建一个lib文件夹:2.将我们需要引入的jat包复制到lib文件夹下:3.选中我们lib包下的jar,右键选择Build Path ...
- 共享Session
概述 现在的大型网站中,会面临实现多台服务器中的session数据共享问题.当使用多台服务器架设成集群之后,我们通过负载均衡的方式,同一个用户(或者ip)访问时被分配到不同的服务器上,假设在A服务器登 ...
- C# 从零开始写 SharpDx 应用 控制台创建 Sharpdx 窗口
原文:C# 从零开始写 SharpDx 应用 控制台创建 Sharpdx 窗口 版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 http ...
- spring-boot-quartz, 依赖spring-boot-parent good
/** * state的值代表该任务触发器的状态: STATE_BLOCKED 4 // 运行 STATE_COMPLETE 2 //完成那一刻,不过一般不用这个判断Job状态 STATE_ERROR ...
- wpf控件设计时支持(1)
原文:wpf控件设计时支持(1) 这部分内容几乎是大家忽略的内容,我想还是来介绍一下. 本篇源码下载 1.属性元数据 在vs IDE中,在asp.net,winfrom等开发环境下,右侧的Proper ...
- UWP 中的各种文件路径（用户、缓存、漫游、安装……）
原文 UWP 中的各种文件路径(用户.缓存.漫游.安装……) UWP 提供了多种不同文件路径访问方式,对应到不同的文件路径中.可能我们只是简单用 ApplicationData.Current 获取一 ...
- Qt控件焦点切换
们日常切换控件,例如QQ登陆的账号和密码输入框就可以通过Tab键切换焦点. 图1 qq切换焦点 Qt中QWidget提供了一个静态方式实现该效果 其中也包含介绍使用 [static] void QW ...
- Java -Android 得知（第四天）
添加一个新的Activity 我们已经了解到一个Activity就相当于是一个界面(当然了.这样说并不严格,但易于理解). 当我们创建一个安卓应用程序之后.就默认创建了: ①.一个继承Activ ...
- 如何构造请求处理对象链（Pipeline）
在开发中,我们经常会遇到这样一个场景:传入一个对象,经过不同的节点对这个对象做不同的操作,比如ASP.NET Core 中的pipeline,IIS中的HTTPpipeline等.在这类问题中,往往我 ...
- React学习（1）——constructor
constructor(props) { super(props); this.state = { orderNo: "001", wid: 6 }; } constructor: ...