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版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
随机推荐
- 反编译Jar包
Jar 包(Java Archive)是对 Java 程序的打包,它可能包含源码,也可能没有. 对于有包含源码的 Jar 包,在 Eclipse 工程里设定好 source code 路径后能直接查看 ...
- Crystal Report - 利用后台代码设计或实现水晶报表工具栏相关功能
水晶报表工具栏分页按钮响应事件: 水晶报表中有自带的分页功能,在设置好每页显示的记录后会自动分页,并自动记录总页数和保存当前页,在工具栏可以通过“首页”“尾页”“下一页”“上一页”和“跳页”进行页面跳 ...
- 扩展你的javascript数组
如今做的项目用的正是jquery的框架,Jquery miniui,其功能强大.性能卓越.易于上手.不失灵活,在不断学习和研发的过程中,miniui给了非常多的启示,让我又一次认识了js的本质,意识到 ...
- matplotlib：path effects
import matplotlib.pyplot as plt, matplotlib.patheffects as path_effects 1. normal fig = plt.figure(f ...
- listview分页载入问题
方案一: 底部有查看很多其它能够使用HeaderViewListAdapter 假设须要加入数据, 就向Adapter绑定的数据里面加入. 然后调用Adapter.notifyDataSetChang ...
- window7使用MinGW在命令行编译C/C++源程序（从零开始，设置PATH，LIBRARY_PATH，C_INCLUDE_PATH）
1.要想在window命令行下面编译C/C++源程序,对于初学者来说,需要在window环境下面配置好GCC和G++编译器,我使用的是MinGW,下载地址为:http://sourceforge.ne ...
- NS2网络模拟(5)-homework01.tcl
1: #NS2_有线部分\homework01.tcl 2: 3: #创建两个结点,深圳到北京的TCP连接,图形将数据显示出来,计算吞吐率,画图分析 4: #tcp上层用ftp 5: #udp上层用c ...
- ATS项目更新(2) 命令行编译Studio解决方案
1: rem "D:\Microsoft Visual Studio 8\SDK\v2.0\Bin\sdkvars.bat" 2: D: 3: cd ..\..\..\..\..\ ...
- 微信小程序之加载更多（分页加载）实例
业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数: (1)pageindex: 1 //第几次加载 (2)callbackcount: 15 //需要返回数据的个数 其他参数: 根据接 ...
- cross-compile-openssl-windows.sh，cross-compile-curl-windows.sh，cross-compile-zlib-windows.sh，build-zlib-visual-studio-2015-cli.bat
https://gist.github.com/artynet build zlib with Visual Studio CLI toolhttps://gist.github.com/artyne ...