1.4 JavaScript

DOM简单学习

功能：控制html文档的内容
- 页面元素（标签）对象：Element
获取Element
- 通过元素的id获取元素对象：document.getElementById("id值")
操作Element
- 修改属性值：
  - 明确获取的对象是哪一个？
  - 查看API文档，找其中有哪些属性可以设置。
- 修改内容：属性：innerHTML
  - 获取元素对象
  - 使用innerHTML属性修改标签体内容
  - 注意innerHTML和innerText的区别

事件简单学习

功能：某些组件被执行了某些操作后，触发某些代码的执行
事件列表：https://www.w3school.com.cn/tags/html_ref_eventattributes.asp
如何绑定事件
- 直接在html标签上，指定事件的属性。
```
<img id="light_off1" src="../img/off.gif" οnclick="alert('打我呀！！');">
```
- 通过js获取元素对象，指定事件属性。

<script type="text/javascript">function f2() {alert("打我呀！！");}var light2 = document.getElementById("light_off2");light2.onclick = f2;
</script>

案例1-电灯开关

示例代码

<script type="text/javascript">var light = document.getElementById("img_light");var isLight = false;light.onclick = function () {light.src = isLight ? "../img/off.gif" : "../img/on.gif";isLight = !isLight;}
</script>

BOM_概述

概念：Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装成对象。
组成：
- Screen：显示器屏幕对象
- Navigator：浏览器对象
- Window：窗口对象
- History：历史记录对象
- Location：地址栏对象

BOM_Window_弹出方法

Window对象特点：Window对象不需要创建可以直接使用
- 方式一： window.方法名();
  - 注意是小写window
- 方式二：直接调用方法
  - 方法名();
  - window引用可以省略。
弹出框有关的方法

alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框 ,如果用户点击确定按钮，则方法返回true ，点击取消按钮则返回false
prompt()	显示可提示用户输入的对话框 ;返回值：获取用户输入的值

示例代码

<script type="text/javascript">//alter的使用var btn_alert = document.getElementById("btn_alert");btn_alert.onclick = function () {alert("hello world!");}//confirm的使用var btn_confirm = document.getElementById("btn_confirm");btn_confirm.onclick = function () {var rs = window.confirm("确定要删除吗？");document.write(rs);}//promptvar btn_prompt = document.getElementById("btn_prompt");btn_prompt.onclick = function () {var rs = window.prompt("请输入用户名...");document.write(rs);}
</script>

BOM_Window_打开关闭方法

打开一个新的浏览器窗口方法： open()
- 返回新的Window对象
关闭浏览器窗口方法：close()
- 谁调用我，我关谁的浏览器窗口
示例代码

<script type="text/javascript">//打开窗口var btn_ope = document.getElementById("btn_ope");var newWindow;btn_ope.onclick = function () {newWindow = window.open("https://www.baidu.com");}//关闭指定的窗口var btn_cls = document.getElementById("btn_cls");btn_cls.onclick = function () {newWindow.close();}
</script>

BOM_Window_定时器方法

相关方法

setTimeout()	在指定的毫秒数后调用函数或计算表达式，参数：js代码或者方法对象，毫秒值
clearTimeout()	根据id取消由 setTimeout() 方法设置定时器
setInterval()	循环定时器，按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的循环定时器

实例代码

<script type="text/javascript">function fun1() {alert("bom...")}//执行一次定时器var id1 = window.setTimeout(fun1,2000);//取消定时器window.clearTimeout(id1);//周期执行定时器var id2 = window.setInterval(fun1,2000);//取消周期定时器clearInterval(id2);
</script>

案例2-轮播图

实例代码

<script type="text/javascript">var number = 1;function fun() {number = number >= 3 ? 1 : ++number;var img_banner = document.getElementById("img_banner");img_banner.src = "../img/banner_" + number + ".jpg";}setInterval(fun, 2000);
</script>

BOM_Window_属性

获取其他BOM对象
- History
- Location
- Navigator
- Screen
- window
获取DOM对象
- document

BOM_Location

创建(获取)：
- window.location
- location
方法：
- reload() ：重新加载当前文档。刷新
属性
- href：设置或返回完整的 URL。
示例代码

<script type="text/javascript">//刷新页面var btn_load = document.getElementById("btn_load");btn_load.onclick = function () {location.reload();}//页面跳转var btn_href = document.getElementById("btn_href");btn_href.onclick = function () {location.href = "https://www.baidu.com";}
</script>

案例3-自动跳转首页

示例代码

<script type="text/javascript">var time = document.getElementById("time");var timer = 5;function showTime() {timer --;if (timer <=0) {//页面跳转location.href="http://www.baidu.com";}time.innerText = timer;}//定时器setInterval(showTime,1000);
</script>

BOM_History

创建(获取)：
- window.history
- history
方法：
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go(参数) 加载 history 列表中的某个具体页面。
  - 参数：正数：前进几个历史记录；负数：后退几个历史记录
属性：
- length 返回当前窗口历史列表中的 URL 数量。
示例代码

<script type="text/javascript">//浏览历史个数var btn_count = document.getElementById("btn_count");btn_count.onclick = function () {alert(history.length);}//后退var btn_back = document.getElementById("btn_back");btn_back.onclick = function () {history.back();}//前进var btn_forward = document.getElementById("btn_forward");btn_forward.onclick = function () {history.forward();}
</script>

1.4 JavaScript_BOM相关推荐

JavaScript_BOM浏览器对象模型
开发工具与关键技术:Adobe Dreamweaver JavaScript 作者:郭程富撰写时间:2020年4月28日知识点:什么是BOM? BOM就是浏览器对象模型也称宿主对象. BOM提供了 ...
JavaScript快速入门到高级 JS精品视频课程
原文链接:https://www.3mooc.com/front/articleinfo/241 第1章 JavaScript_简介概述和使用课时1 开始学习初识javaScript 课时2 sc ...

1.4 JavaScript_BOM

DOM简单学习

事件简单学习

案例1-电灯开关

BOM_概述

BOM_Window_弹出方法

BOM_Window_打开关闭方法

BOM_Window_定时器方法

案例2-轮播图

BOM_Window_属性

BOM_Location

案例3-自动跳转首页

BOM_History

1.4 JavaScript_BOM相关推荐

最新文章

热门文章