DOM简单学习:为了满足案例要求
功能:控制html文档的内容
代码:获取页面标签(元素)对象Element
document.getElementById("id值"):通过元素的id获取元素对象
操作Element对象:
1.修改属性值:
1.明确获取的对象是哪一个?
2.查看API文档,找其中有哪些属性可以设置
2.修改标签体内容
属性:inner HTML
1.获取元素对象
2.使用inner HTML属性修改标签体内容
事件简单学习
功能:某些组件被执行了某些操作后,触发某些代码的执行。
如何绑定事件
1.直接在html标签上,指定事件的属性(操作),属性值就是js代码
1.事件:onclick-- 单击事件
2.通过js获取元素对象,指定事件属性,设置一个函数
灯泡案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯泡</title>
</head>
<body>
<img id="light" src="img/暗.jpg">
<script>
var light = document.getElementById("light");
var flag = false;
light.onclick = function () {
if (flag){
light.src = "img/暗.jpg";
flag = false;
}else {
light.src = "img/亮.png";
flag = true;
}
}
</script>
</body>
</html>
BOM:
1.概念:Browser Object Model 浏览器对象模型
将浏览器的各个部分封装为对象。
2.组成
window:窗口对象
Navigator:浏览器对象
Screen:显示器对象
History:历史记录对象
Location:地址栏对象
window:窗口对象
1.创建
2.方法
1.与弹出框有关的方法
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
如果用户点击确定按钮,则返回true。
如果用户点击取消按钮,则方法返回false。
prompt() 显示可提示用户输入的对话框。
返回值:获取用户输入的值
2.与打开关闭有关的方法:
close() 关闭浏览器窗口
谁调用我,我关谁
open() 打开一个浏览器窗口
返回新的window对象
3.与定时器有关的方法:
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
参数:
1.js代码或者方法对象
2.毫秒值
clearTimeout() 取消setTimeout() 方法设置的timeout
setInterval() 按照指定的周期(以毫秒计) 来调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout
3.属性
1.获取其他BOM对象
history
location
Navigator
Screen
2.获取DOM对象
document
4.特点
Window对象不需要创建可以直接使用。 window.方法名();
window引用可以省略。 方法名();
案例轮播图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="img" src="img/test1.jpg"; width="100%" >
<script>
var number = 1;
function fun() {
number++;
if (number>2){
number = 1;
}
var img = document.getElementById("img");
img.src = "img/test"+ number +".jpg";
}
setInterval(fun,3000);
</script>
</body>
</html>
Location:地址栏对象
1.创建(获取)
1.window.location
2.location
2.方法
reload() 重新加载当前文档。刷新
3.属性
href 设置或返回完整的 URL。
自动跳转案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p><span id="time">5</span>秒后自动跳转。。。</p>
<script>
var second = 5;
function fun() {
second--;
var time = document.getElementById("time");
time.innerHTML = second+"" ;
if (second<1){
location.href = "https://www.baidu.com";
}
}
setInterval(fun,1000);
</script>
</body>
</html>
History:历史记录对象
1.创建(获取)
1.window.history
2.history
2.方法
back() 加载 history 列表中的前一个 URL
forward() 加载history 列表中的下一个 URL
go() 加载history 列表中的某个具体页面
3.属性
length 返回当前窗口历史列表中的 URL 数量