第3章 BOM(3课时)

BOM：浏览器对象模型(BrowserObjectModel)

目标

使用window对象（打开新窗口、与用户交互、定时器）

使用document对象

其他对象（线上）

浏览器对象模型

image.png

window

http://www.w3school.com.cn/jsref/met_win_open.asp

打开新窗口（线上）

window.open(URL,name,features,replace)

URL:地址

name：窗口名称

features：新窗口要显示的标准浏览器的特征

replace：一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。

简单例子

<scripttype="text/javascript">function open_win() {window.open("http://www.w3school.com.cn")}</script><!DOCTYPE html><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">var w; function newWindow(){ //window.open("https://www.jianshu.com/p/c1c0755d2645"); w=window.open("https://www.baidu.com",'mywindow','width=600,height=400'); //window.open("https://www.jianshu.com/p/c1c0755d2645",'','width=600,height=400'); //w.moveTo(300,300); //w.resizeTo(800,600); //w.focus; } function closeWindow(){ w.close() }</script></head><body><ahref="javascript:newWindow()">new page</a><ahref="javascript:closeWindow()">close page</a></body></html><inputtype=buttonvalue="Open Window"onclick="open_win()"/>

打开一个窗口，打印一行文字，并获取焦点

myWindow=window.open('','','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

myWindow.focus()

打开一个窗口，显示图片，指定宽高

new page

窗口其他方法

https://www.w3school.com.cn/jsref/dom_obj_window.asp

moveTo(x,y)

方法格式：window.moveTo(x,y);

功能：将窗口移动到指定坐标(x,y)处;

resizeTo(x,y)

方法格式：window.resizeTo(x,y);

功能：将当前窗口放大或缩小到(x,y)指定大小，x、y分别为宽度和高度;

resizeBy(x,y)

方法格式：window.resizeBy(x,y);

功能：要使窗口宽度放大或缩小的像素数。可以是正、负数值。

将当前窗口改变到指定的大小(x,y),当x、y的值大于0时为扩大，小于0时为缩小。

moveBy（x,y）

功能：相对窗口的当前坐标把它移动指定的像素。

.focus .blur ## 得到或失去焦点

window.close()

function closeWin()

{

myWindow.close()

}

测试窗口失去和获取焦点

哪个窗口获取焦点，哪个就在前面，另外一个被挡住

<head><metacharset="utf-8"><title></title><scripttype="text/javascript">function newWindow() { var win=open("18-正则表单验证-day03.html","mywindow","width=300,height=300"); win.moveTo(300,0);//移动到绝对位置300,0 win.moveBy(0,200);//相对于刚才的300,0再移动0,200 (300,200) win.resizeTo(400,400); win.resizeBy(200,50); win2.focus(); var win2=open("images/pic1.jpg","mywindow","width=300,height=300"); win2.moveTo(300,0);//移动到绝对位置300,0 win2.moveBy(0,200);//相对于刚才的300,0再移动0,200 (300,200) win2.resizeTo(400,400); win2.resizeBy(200,50); //win2.focus(); }</script></head><body><inputtype="button"name="btn1"id=""value="打开"onclick="newWindow();"/></body>

与用户交互（线上）

js中的三种消息对话框分别是alert()，confirm()，prompt()

1、alert():警告窗口

有一个确认按钮。

①写在<script>标签中

②括号中的内容为字符串或者整型

③点击确认即可关闭，无返回值

window.alert(“欢迎！请按“确定”继续。”)，

2、confirm():确认对话框,返回true/false，

有确认和取消两个按钮

①写在<script>标签中

②括号中的内容为字符串和整型

③点击确认返回true，点击取消返回false

<scripttype="text/javascript">function disp_confirm() { var r=confirm("确认删除吗") if (r==true){document.write("You pressed OK!")} else{document.write("You pressed Cancel!")} }</script><inputtype="button"onclick="disp_confirm()"value="Display a confirm box"/>

3、prompt(？，？):弹出消息对话框

prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

①写在<script>标签中

②str1: 要显示在消息对话框中的文本(提示语)，不可修改

str2：默认值。文本框中的内容，可以修改

③点击确认返回输入框中的内容，取消返回null

varmyname=prompt("请输入你的姓名:");if(myname!=null){alert("你好"+myname);}else{alert("你好 my friend.");

其他例子

定时器（掌握）

setTimeout(执行的js,毫秒)

setInterval(执行的js,毫秒)

函数名加不加小括号的区别：

1、加小括号表示把函数的返回值传给他

2、不加小括号是把函数本身传给他。

两者区别setTimeout 延迟几毫秒执行一次js

setInterval 每间隔一定毫秒数执行一段js

clearInterval(名字);清除定时器

clearTimout(名字);

写法：

学生练习

把上一章做的时钟改为每秒刷新的，可以控制启动和停止

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">var time01 = null; function time() { //获取div ,在div里打印当前时间 var timeDiv = document.getElementById("timeDiv"); //获取当前时间 var date = new Date(); //星期天是0 星期1-6即是1-6 var day_arry = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] //计算当前时间是星期几 var day = date.getDay(); var day_str = day_arry[day]; //打印时间yyyy年MM月dd日 hh:mm:ss timeDiv.innerHTML = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + day_str; } //只执行一次的定时器 //第一个参数是需要执行的js,第二个参数是延迟多少毫秒 //setTimeout(time, 5000); function start() { //每间隔1秒执行一次的定时器 time01 = setInterval(time, 1000); } function stop() { clearInterval(time01); } //解决打印叠加的问题</script></head><body><divid="timeDiv"></div><inputtype="button"value="启动"onclick="start();"/><inputtype="button"value="停止"onclick="stop();"/></body></html>

document对象

https://www.w3school.com.cn/jsref/dom_obj_document.asp

获取元素的方式

通过document获取

getElementById()

通过id获取结果为对象类型可以直接用变量接收

getElementsByName()

通过name获取结果为数组

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">function getElements() { //通过name获取元素集合 //document.getElementById("id"); 适合一次获取一个 //下面这三个是一次可获取多个 //通过name //var inputs = document.getElementsByName("myInput"); //通过标签名获取 //var inputs = document.getElementsByTagName("input"); //通过标类名获取 var inputs = document.getElementsByClassName("class1"); //alert(inputs.length); for(var i=0;i<inputs.length;i++){alert(inputs[i].value+"<br>"); } }</script></head><body><inputname="myInput"type="text"size="20"class="class1"/><br/><inputname="myInput"type="text"size="20"class="class1"/><br/><inputname="myInput"type="text"size="20"class="class1"/><br/><br/><inputtype="button"onclick="getElements()"value="How many elements named 'myInput'?"/></body></html><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><script>function check() {//通过id获取元素var name = document.getElementById("username");alert("用户输入的值是：" + name.value);var hobbys = document.getElementsByName("hobby");for (var i = 0; i < hobbys.length; i++) {//如果是多选框，我需要判断是否被用户选中if (hobbys[i].checked) {alert(hobbys[i].value);}}//不常用 var inputs=document.getElementsByTagName("input"); alert(inputs); }</script></head><body><formonsubmit="return check()"><inputtype="text"id="username"/><br>爱好<inputtype="checkbox"name="hobby"value="1">真香<inputtype="checkbox"name="hobby"value="2">呵呵<inputtype="checkbox"name="hobby"value="3">打豆豆<inputtype="submit"/></form></body></html>

getElementsByTagName()

通过标签名获取结果为数组

innerHtml innerText区别

innerHtml解析并显示成html形式

innerText按文本方式显示

通过集合方法

document.images[0]

document.images["img2"]

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><script>function getImgName() {alert("aa");//通过images var images= document.images; /* for(var i=0;i

通过name属性方法

document.images.img2

document.img2

轮播图

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">function changeImg(){ //第一种保留,第2-4种了解 //第一种方式通过下标访问 //document.images[1].src="../images/04.jpg"; //第二种可以通过名字访问 //document.images["img02"].src="../images/04.jpg"; //第三种可以通过名字访问 //document.images.img02.src="../images/04.jpg"; //第四种可以不借助images,直接通过document.名字访问 //document.img02.src="../images/04.jpg"; //01 02 03 04 随机切换 //step-1 -生成1-4之间的随机数 var i=1+Math.round(Math.random()*3); //0-3之间的数+1---->1-4 document.images[0].src="../images/0"+i+".jpg"; } function start(){ setInterval(changeImg,1000); }</script></head><body><imgname="img01"src="../images/01.jpg"width="300px"height="300px"><imgname="img02"src="../images/02.jpg"><imgsrc="../images/03.jpg"><imgsrc="../images/04.jpg"><inputtype="button"name="btn1"id="btn1"value="切换图"onclick="changeImg();"/><inputtype="button"name="btn2"id="btn2"value="给我轮播"onclick="start();"/></body></html>

作业：

第14页课堂练习

web前台练习题一套

转至：↓

链接：https://www.jianshu.com/p/c1c0755d2645

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。