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版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
随机推荐
- 【37.50%】【codeforces 732D】Exams
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- FrameLayout帧布局
一.FrameLayout(帧布局)重点: FrameLayout(帧布局)可以说是五大布局中最为简单的一个布局,这个布局会默认把控件放在屏幕上的左上角的区域,后续添加的控件会覆盖前一个,如果控件的大 ...
- DapperPoco
DapperPoco -- 基于Dapper的.轻量级的.高性能的.简单的.灵活的ORM框架 为什么要重复造轮子 因为现有的轮子都在某些方面不太令我满意,下面我来一一点评一下,欢迎拍砖. Entity ...
- Spring实战5-基于Spring构建Web应用
主要内容 将web请求映射到Spring控制器 绑定form参数 验证表单提交的参数 写在前面:关于Java Web,首先推荐一篇文章——写给java web一年左右工作经验的人,这篇文章的作者用精练 ...
- 常见数据结构与算法的 Python 实现
1. 排序 快速排序(quick sort) 形式一:借助 partition 辅助函数 def partition(seq): pivot, seq = seq[0], seq[1:] low = ...
- oc面试攻略
原文出自:http://mobile.51cto.com/iphone-402619.htm 1.Object-C有多继承吗?没有的话用什么代替?cocoa 中所有的类都是NSObject 的子类 多 ...
- Qt常用函数 记录（update erase repaint 的区别）
一界面重载函数使用方法:1在头文件里定义函数protected: void paintEvent(QPaintEvent *event); 2 在CPP内直接重载void ----------::pa ...
- Coremicro Reconfigurable Embedded Smart Sensor Node
A Coremicro Reconfigurable Embedded Smart Sensor Node has the capability of hosting intelligent algo ...
- 在服务器中无法自宿主启动一个webapi项目，引出查看系统端口是否被占用
在windows server下启动一个webapi的.net core项目报错 如下图: 让我以为服务器还需要别的配置.后来发现原来是线程被占用了. 在windows下查看某线程是否被占用的命令如下 ...
- C#选择多个文件并读取多个文件数据
原文:C#选择多个文件并读取多个文件数据 版权声明:本文为博主原创文章,转载请附上链接地址. https://blog.csdn.net/ld15102891672/article/details/8 ...