您的位置：首页 > Web前端 > JavaScript

webBasic_javaScript_day03_定时器_BOM_DOM基础知识

2018-03-17 15:57 776 查看

BOM Browser Object Model 浏览器对象模型

通过使用BOM,可以移动窗口,更改状态栏文本等操作

执行不与页面内容发生直接联系的操作(不能操作标签)

没有相关的标准,但被广泛支持

DOM Document object Model 文档对象模型

定义了访问和操作HTML文档的标准方法(API)

Dom让我们做两件事:

1.找到要操作的标签对象

2.对这些标签对象的属性和内容,进行增删改查操作!

js外部对象

window对象

window表示浏览器窗口

所有的js的全局对象,函数,变量都是自动成为

window对象的成员(都可以使用window点出来)

同时,window可以省略

window对象常用的函数,方法

1.弹出窗

<body>
<input type="button"
value="btn1" onclick="fn1();">
<input type="button"
value="btn2" onclick="fn2();">
<input type="button"
value="btn3" onclick="fn3();">
</body>

<script type="text/javascript">
function fn1(){
//普通弹出框
window.alert("你好");
}
function fn2(){
//确认框
var flag=confirm("你吃了吗?");
console.log(flag);
}
function fn3(){
//输入框
var text=prompt("你吃的是什么");
console.log(text);
}
</script>


总结:所有弹出窗方法都可以使用window对象调用

定时器

1.周期性定时器

以一定的间隔执行代码,循环往复

window.setInterval(exp,time);

exp:要反复执行的代码,一般为匿名函数

time:间隔时间,毫秒

返回值:这个启动的定时器对象(id)

clearInterval(id);//id为要关闭的定时器对象

<input type="button"
value="启动定时器" onclick="fn4();">

function fn4(){
var n=5;
var id=setInterval(function(){
console.log(n--);
if(n<0){
clearInterval(id);
}
},1000);
console.log("今天星期三");
}
</script>


总结:启动定时器,相当于启动了一个支线程

fn4是主线程,定时器内的匿名函数在支线程

两条线程同时并发执行,相互不等待

课堂练习–简易时钟

此处会有bug,要处理

<body>
<p>
<input type="button"
value="开始" onclick="star();">
<input type="button"
value="停止" onclick="stop();">
</p>
<p id="clock"></p>
</body>

<script type="text/javascript">
var id;
function star(){
var oP=document.getElementById("clock");
if(id){
//如果id中有定时器对象了,
//就不要再开启定时器了
//进入if块,执行return即可
return;
}
id=setInterval(function(){
//1.获取当前时间转换成本地格式
var d=new Date();
var now=d.toLocaleTimeString();
//2.写入p中
oP.innerHTML=now;
}, 1000);
}
function stop(){
if(id){
//id中有定时器对象
//才进if块关闭定时器
clearInterval(id);
//并且在关闭之后
//id要清空
//不然开始按钮会不再开启新定时器
id=null;
}

}
</script>


一次性定时器(延迟定时器)

在一个设定的时间之后,执行代码.只执行一次.

window.setTimeout(exp,time);

exp:延迟执行的代码.一般为匿名函数

time:延迟执行的时间,毫秒

返回值是一次性定时器对象

<body>
<p>
<input type="button" value="发送"
onclick="send();">
<input type="button" value="撤销"
onclick="cancel();">
</p>
<p id="msg"></p>
</body>

<script type="text/javascript">
var id;//全局,存储定时器对象
function send(){
if(id){
return;
}
var oP=document.getElementById("msg");
oP.innerHTML="正在发送...";
//延迟3秒再发送
id=setTimeout(function(){
oP.innerHTML="发送成功"
}, 3000);
}
function cancel(){
if(id){
var oP=document.getElementById("msg");
oP.innerHTML="已撤销";
window.clearTimeout(id);
}
id=null;

}
</script>


window常用对象

1.location对象

包含当前URL的信息

用于获取和改变当前浏览的网址

href属性 location.href

reload()方法,重新加载当前网址,等同按下刷新按钮

2.screen

包含了有关客户端显示屏幕的信息

width/height

availWidth/availHeight 可用宽度/可用高度

减去界面特性，比如窗口任务栏,就是可用高度

3.history

包含用户在浏览器窗口中访问过的URL

length属性 浏览器历史列表中的url的数量

方法:后退back();前进forward();

history.back();//后退history.go(-1)
history.forward();//前进history.go(1);
history.go(num);


4.navigator

包含浏览器的相关信息

DOM对象

DOM提供了如下操作

1.查找节点

<p id="p1">1.<b>读写</b>节点</p>
<p id="p2">2.<b>查询</b>节点</p>
<p id="p3">3.<b>增删</b>节点</p>
<script type="text/javascript">
window.onload=function(){
var oP=document.getElementById("p1");
//节点类型
console.log(oP.nodeType);
//节点名称
console.log(oP.nodeName);
}
</script>


nodeType:节点类型

1.元素节点,返回值1

2.属性节点,返回值2

3.文本节点,返回值3

8.注释节点,返回值8

9.文档节点,返回值9

读写元素节点的内容

双标签中间的文本叫内容,任何双标签都有内容

1.innerHTML(结果含子标签)

2.innerText(结果忽略子标签)

1.读写节点

需求:1.p标签显示---今天天气有雾霾
oP.innerText="今天天气有<u>雾霾</u>";
需求:2.p标签显示---今天天气有雾霾,雾霾使用<u></u>包裹
oP.innerHTML="今天天气有<u>雾霾</u>";


总结:如果需求是在父节点对象中动态添加若干子节点

使用innerHTML<
a2c0
/h3>

读取节点的值–value

表单中节点对象的数据都叫值(单标签)

input select textarea

2.读取节点信息

读写节点的属性

1.通过方法读写属性

<body>
<p><img id="img1" src="../img/06.png"></p>
</body>

<script type="text/javascript">
window.onload=function(){
//通过方法读取节点对象的属性
var oImg=document.getElementById("img1");
console.log(oImg.getAttribute("src"));
//通过方法设置节点对象的属性
oImg.setAttribute("src", "../img/19.png");
//oImg.removeAttribute("src");
}
</script>


2.通过标准的属性名读写属性

id style className

<p id="p1" class="blue" style="color:red;width:100px">

//通过标准属性名读取改变属性值
var oP=document.getElementById("p1");
console.log(oP.style.color);
//oP.style.color="blue";
oP.className="change";


总结:项目和工作中不许使用style属性更改样式

所有对样式的操作,除了display可以写在内联样式中

其它所有样式的改变,都必须写在class选择器中

标签中有没有写class属性,js中写className都生效

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  定时器_BOM_DOM基础
相关文章推荐
新的分享
章节导航