- BOM，Browser Object Model,浏览器对象模型。
-
- BOM主要提供了访问和操作浏览器各组件的方式。
- 浏览器组件：
-
- window（浏览器窗口）
- location（地址栏）
- history（浏览历史）
- screen（显示器屏幕）
- navigator（浏览器软件）
- document（网页）
- DOM，Document Object Model，文档对象模型。
-
- DOM主要提供了访问和操作HTML标记的方式。
- HTML标记：
-
- 图片标记
- 表格标记
- 表单标记
- body、html标记
- .......
- BOM和DOM不是JS的内容。它们是W3C制定的规范。但是，BOM和DOM在浏览器中以对象的形式得以实现。
- 换句话说：BOM和DOM都是由一组对象构成。
-
- W3C是制作互联网标准的一个国际化的组织，如：XHTML、CSS、Javascript、AJAX等。
- BOM对象结构图
-
- 各对象之间是有层级关系的，各对象之间如何访问？
-
- window.document.write("ok")
- window.document.body.bgColor="#FF0000";
- window对象是所有其他对象的最顶层对象，因此，可以省略。
-
- document.write("OK");
- document.body.bgColor = "#ff0000";
- window.alert("OK"); ——> alert("OK");
- window.prompt("请输入一个分数"); ——> prompt("请输入一个分数");
- window对象的属性
//循环遍历window对象的所有属性 /* for(name|index in obj|arr){ } 描述：智能循环数组的下标，或对象的属性。 说明：如果循环数组的话，每次循环将取下标值； 对于数组中值为undefined的，不会循环； 循环数组，只返回有效的值。 如果循环对象的话，每次循环取对象属性。 严格的来说，对象中没有方法一说，所有的都是属性 将一个函数给一个属性后，这个属性就变成方法了。 */ var i = 1; for(var name in document) { document.write(i+"、"+name+"<br/>"); i++; } <span style="font-size: 21px;"><strong><span style="font-size: 21px;"></span></strong></span>
-
- name：指浏览器窗口的名字或框架的名字。这个名字是给<a>标记的target属性来使用的。
-
- 设置窗口的名字：window.name = "newWin";
- 获取窗口的名字：document.write(name);
- top：代表最顶层窗口。如：window.top
- parent：代表父级窗口，主要用户框架。
- self：代表当前窗口，主要用于框架内。
- innerWidth：指浏览器窗口的内宽（不含菜单栏、工具栏、地址栏、状态栏），该属性Firefox支持。
-
- 在IE下，使用document.documentElement.clientWidth来代替window.innerWidth
- innerHeight：指浏览器窗口的内高（不含菜单栏、工具栏、地址栏、状态栏），该属性Firefox支持。
-
- 在IE下，使用document.documentElement.clientHeight来代替window.innerHeight
- document.documentElement.clientHeight 就是<html>标记对象。
- document.body 就是<body>标记对象
// 实例，测试当前网页的宽度和高度 var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth; var height = window.innerHeight ? window.innerHeight : document.documentElement.clienHeigth; // 输出结果 document.write("宽度"+width+"：高度"+height)
- window对象方法
-
- alert()：弹出一个警告对话框。
- prompt()：弹出一个输入对话框。
- close()：关闭窗口。
- confirm()：弹出一个确认对话框。如果单击“确定按钮”返回true，单击“取消”，返回false。
<script type="text/javascript"> function confirmDel() { if(window.confirm("你确认要删除么？")) { // 跳转到PHP的删除页面delete.php执行删除操作 location.href="delete.php"; } } </script> </head> <body> <table width="800" border="1" align="center" rules="all" cellpadding="3"> <tr> <th>新闻ID</th> <th>新闻标题</th> <th>发布日期</th> <th>操作选项</th> </tr> <tr> <td>10010</td> <td>增日强：商业银行法修正草案删除75%存贷比规定</td> <td>2015-03-12</td> <td><a href="#">修改</a> <a href="#" οnclick="confirmDel()">删除</a></td> </tr> <tr> <td>10020</td> <td>增日强：商业银行法修正草案删除75%存贷比规定</td> <td>2015-03-14</td> <td><a href="#">修改</a> <a href="#" οnclick="confirmDel()">删除</a></td> </tr> <tr> <td>10030</td> <td>增日强：商业银行法修正草案删除75%存贷比规定</td> <td>2015-03-15</td> <td><a href="#">修改</a> <a href="#" οnclick="confirmDel()">删除</a></td> </tr> </body>
-
- print()：打印窗口
- open()：方法
-
- 功能：打开一个新的浏览器窗口。
- 语法：var winObj = window.open([url],[name],[options]);
- 说明：参数可有可无。如果没有指定参数，则打开一个选项卡式的窗口（大小是最大大化）。
- 参数：
-
- url：准备在新窗口中显示哪个文件。url可以为空字符串，表示显示一个空的页面。
- name：新窗口的名字，改名字给<a>标记的target属性来用。
- options：新窗口的规格。
-
- width：新窗口的宽度。
- height：新窗口的高度。
- left：新窗口距离屏幕左边的距离。
- top：新窗口距离屏幕上边的距离。
- menubar：是否显示菜单栏，取值：yes、no
- toolbar：是否显示工具栏，取值同上。
- status：是否显示状态栏。
- 返回值：返回一个window对象的变量，可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。
- onload事件：当网页加载完成，指<body>标记的所有内容全部加载完成，才触发该事件（条件）。通过该onload事件属性去调用JS的函数。
- onclick事件：当单击时，去调用JS代码。所有html标记都具有该事件属性。
实例：
function init()
{
// 变量初始化
var screenWidth = screen.availWidth; //屏幕的有效宽度
var screenHeight = screen.availHeight; //屏幕的有效高度
var width = 600; //新窗口的宽度
var height = 400; //新窗口的高度
var x = (screenWidth-width)/2;
var y = (screenHeight-height)/2;
var url2 = "";
var name2 = "win2";
var options2 = "width="+width+",height="+height+",left="+x+",top="+y+",menubar=no,toolbar=no";
// 打开一个新窗口
var winObj = window.open(url2,name2,options2);
// 往新窗口中，输入一个字符串。
winObj.document.write("这是新窗口中的内容");
// 10秒钟后，自动关闭
winObj.setTimeout("window.close()",10000);
} window.onload = init; //是将函数的地址传给了事件，而不是将函数的执行结果传给事件。
//有名函数或普通函数，作为地址引用，不能带括号。
function init(){
// 更改网页背景色
window.document.body.bgColor = "#098943";
//变量初始化 <script type="text/javascript">
function init(){
window.document.body.bgColor = "#098943";
var url2 = "";
var name2 = "win2";
var options2 = "width=400,height=300,left=300,top=200,scrollbars=yes"
var winObj = window.open("url2","name2","options2");
// 往新窗口中输入内容
var str = "<h2>张三的基本信息</h2>";
str += "姓名：张三";
str += "<br>性别：男";
str += "<br>年龄：30岁"
winObj.document.write(str);
// 5秒后，新窗口自动关闭
winObj.setTimeout("window.close()",2000)
}
</script>
</head>
<body οnlοad="init()">
<a href="10.6.1二维数组.html" target="win2">公司新闻</a>
</body>- 延时器————setTimeout()
-
- setTimeout()
-
- 功能：设置一个延时器。换句话说：时间一到，就执行JS代码一次。
- 语法：var timer = window.setTimeout(code,millisec)
- 参数：
-
- code：是i任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
-
- 举例：window.setTimeout("close()".2000);
- 举例：window.setTimeout(init,2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。
- millisec：毫秒值。1秒=1000毫秒
- 返回值：返回一个延时器的id变量，这个id变量给clearTimeout()用来清除。
- clearTimeout()
-
- 功能：清除延时器id变量
- 语法：window.clearTimeout(timer)
- 参数：timer就是由setTimeout()设置的延时器变量
- 计数器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单计数器</title> <script type="text/javascript"> // 实例：简单计数器 var i = 0; var timer; function start2() { // 获取网页中id=result的<input>元素 var inputObj = document.getElementById("result"); // <input>标记有什么属性，那么，对应的元素对象就有什么属性。 inputObj.value = "改程序已经运行了"+i+"秒！"; i++; // 延时器 // 延时器要想实现重复执行，必须在函数中不断调用自己。 // 这么实现以后，延时器就可以模拟定时器的效果。 timer = window.setTimeout("start2()",1000); } function stop2() { window.clearTimeout(timer); } </script> </head> <body> <input id="result" type="button" value="改程序已经运行了0秒！" /><br /> <input type="button" value="开始" οnclick="start2()" /> <input type="button" value="结束" οnclick="stop2()" /> </body> </html><strong><span style="font-size: 19px;"></span></strong>
- 定时器方法
-
- setInterval()
-
- 功能：设置一个定时器。定时器，重复不断的执行JS代码（周期性）
- 语法：var timer = window.setInterval(code,millisec)
- 参数：
-
- code:是任何合法的JS代码，一般情况下是JS函数。该函数主要放在引号中。
-
- 举例：window.setInterval("close()".2000);
- 举例：window.setInerval(init,2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。
- millisec:毫秒值。1秒=1000毫秒
- 返回值：返回一个定时器的id变量，这个id变量给clearInterval()来清除。
- clearInterval()
-
- 功能：清除延时器id变量
- 语法：window.clearInterval(timer)
- 参数：timer就是由setInterval()设置的延时器变量。
- 实例：自动切换图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片自动切换</title> <script type="text/javascript"> // 网页加载完成，去调用JS函数 window.onload = init; //函数传地址，不能带括号 // 定义函数 function init() { // 定时器：每隔1秒，调start2()函数一次 // 定时器总是调用其它函数，而延时器总是调用自己所在的函数 window.setInterval("start2()",2000); } var i = 1; function start2() { // 获取网页中id=img01的图片元素对象 var imgObj = document.getElementById("img01"); // 图片对象有src属性，那么imgObj对象也有src属性 imgObj.src = "images/dd_scroll_"+i+".jpg"; i++; // 如果超过6，则i=1 if(i > 6) { i = 1; } } </script> </head> <body> <img id="img01"src="images/dd_scroll_1.jpg" /> </body> </html>
- screen屏幕对象
-
- width：屏幕宽度，只读属性。
- height：屏幕高度，只读属性。
- availWidth：屏幕有效宽度，不含任务栏。只读属性。
- availHeight：屏幕有效高度，不含任务栏。只读属性。
<script type="text/javascript"> // 实例：获取自己屏幕的分辨率 var str = "<h2>屏幕的尺寸</h2>"; str += "宽度："+screen.width+",高度："+screen.height; str += "<br>有效宽度："+screen.availWidth+",有效高度："+screen.availHeight; document.write(str); </script>
- navigator对象
-
- appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。
-
- 如果是IE浏览器，返回值为：Microsoft Internet Explorer
- 如果是火狐浏览器，返回值为：Netscape
- appVersion：浏览器软件的核心版本号。
- systemLanguage：系统语言
- userLanguage：用户语言
- platform：平台
<script type="text/javascript"> // 实例：测试不同浏览器 var str = "<h2>浏览器的相关信息</h2>"; str += "软件名称："+navigator.appName; str += "<br>核心版本："+navigator.appVersion; str += "<br>系统语言："+navigator.systemLanguage; str += "<br>用户语言："+navigator.userLanguage; str += "<br>用户平台："+navigator.platform; document.write(str+"<hr>"); var width; var height; if(navigator.appName=="Natscape") { width = window.innerWidth; height = window.innerHeight; }else { width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; } document.write("浏览器内宽："+width+",浏览器内高："+height) </script>
- location地址栏对象
-
- href：获取地址栏中完整的地址，可以实现JS的网页跳转。
-
- location.href="http://www.sina.com.cn";
- host：获取地址栏中的主机名
- hosrname：主机名
- pathname：文件路径及文件名
- search：查询字符串。
-
- protocol：协议，如：http://、ftp://
- hash：锚点名称。如：#top
- reload([true])：刷新网页。true参数表示强制刷新。
- 注意：所有的属性，重新赋值后，网页将自动刷新。
- history对象
-
- length：历史记录的个数。
- go(n)：同时可以实现“前进”和“后退”。
- forward()：相当于浏览器的“前进”按钮
- back()：相当于浏览器的“后退”按钮
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
