1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <script type="text/javascript">
6 /*
7 BOM: Browser Object Model 浏览器对象模型
8 提供了访问和操作浏览器各组件的方式
9
10 window: 浏览器窗口 JS中最大的对象, 其它对象都是它的子对象
11 location: 地址栏
12 histroy: 浏览记录
13 screen: 显示器屏幕 获取屏幕的相关信息
14 navigator: 浏览器软件 判断客户用的什么浏览器软件
15 document: 网页
16
17 DOM: Document Object Model 文档对象模型
18 提供了访问和操作HTML标记的方式
19 图片标记, 表格标记, 表单标记
20 */
21
22 // window对象是最顶层对象, 可以省略
23 window.document.write("OK<br>");
24 document.write("OK<br>");
25 // window.alert("OK");
26 // alert("OK");
27
28 // forin循环遍历window对象的属性和方法
29 /*
30 遍历数组, 每次循环取下标值
31 (数组中值为undefined, 不会返回值, 只返回有效的值)
32 遍历对象, 每次循环取属性
33 (没有方法一说, 所有的都是属性, 只不过将函数赋值给属性的话, 该属性称之为方法)
34 */
35 // var i = 1;
36 // for (var name in window) {
37 // document.write(i + " " + name + "<br>");
38 // i++;
39 // }
40
41 // -------------------- 属性 ---------------------
42 // 1. name: 浏览器窗口的名字
43 window.name = "lisi";
44 document.write(window.name);
45 document.write("<hr>");
46
47 // 2. top: 最顶层窗口
48
49 // 3. parent: 父级窗口
50
51 // 4. self: 当前窗口
52
53 // 5. innerWidth: 内宽 (不含菜单栏, 工具栏, 地址栏, 状态栏)
54 // IE下 document.documentElement.clientWidth代替
55 var width = window.innerWidth;
56 document.write(width);
57 document.write("<hr>");
58
59 // 6. innerHeight: 内高 (不含菜单栏, 工具栏, 地址栏, 状态栏)
60 // IE下 document.documentElement.clientHeight代替
61 // document.documentElement <html>标记对象
62 // document.body <body>标记对象
63 var height = window.innerHeight;
64 document.write(height);
65 document.write("<hr>");
66
67 // ---------------------- 方法 ------------------------
68 // 1. alert() 弹出一个警告对话框
69 window.alert("这是一个警告对话框!");
70 // alert("这是一个警告对话框!");
71
72 // 2. prompt() 弹出一个输入对话框
73 window.prompt("这是一个输入对话框!");
74 // prompt("这是一个输入对话框!");
75
76 // 3. confirm() 弹出一个确认对话框
77 function confirmDel() {
78 if (window.confirm("确认删除吗?")) {
79 alert("已经删除!");
80 // location.href = "delete.php";
81 }
82 }
83
84 // 4. close() 关闭窗口
85 function closeWin() {
86 window.close();
87 }
88
89 // 5. print() 打印窗口 不常用
90
91 /*
92 6. open() 打开一个新的浏览器窗口
93 open(url, name, options)
94 url: 显示的文件路径, 可以为空
95 name: 新窗口的名字, 给<a>标记使用
96 options: 新窗口的规格
97 width: 新窗口的宽度
98 height: 新窗口的高度
99 left: 新窗口距离左边的距离
100 top: 新窗口距离右边的距离
101 menubar: 是否显示菜单栏
102 toolbar: 是否显示工具栏
103 status: 是否显示状态栏
104 onload事件: 当网页加载完成, 当body标记中的所有内容都加载完成, 才触发该事件
105 */
106 function init() {
107
108 // <1> url
109 var newWinUrl = "";
110
111 // <2>name
112 var newWinName = "win2";
113
114 // <3>options
115 // (1) 新窗口的宽度
116 var newWinWidht = 400;
117
118 // (2) 新窗口的高度
119 var newWinHeight = 300;
120
121 // (3) 显示屏幕的宽度
122 var screenWidth = screen.availWidth;
123 // document.write(screenWidth);
124
125 // (4) 显示屏幕的高度
126 var screenHeight = screen.availHeight;
127 // document.write(screenHeight);
128
129 // (5) 新窗口距离屏幕左边的宽度
130 var x = (screenWidth - newWinWidht) / 2;
131
132 // (6) 新窗口距离屏幕右边的宽度
133 var y = (screenHeight - newWinHeight) / 2;
134 var newWinOptions = "width = " + newWinWidht + ", height = " + newWinHeight + ", left = " + x + ", top = " + y + ", menubar = no, toolbar = no, location = no"
135
136 // 打开一个新的窗口
137 var winObj = window.open(newWinUrl, newWinName, newWinOptions);
138
139 // 往新窗口输入字符串
140 winObj.document.write("Hello, world!");
141
142 // 10秒自动关闭
143 winObj.setTimeout("window.close()", 2000);
144 }
145 </script>
146 </head>
147
148 <body onload="init()">
149
150 <!-- 1. 浏览器窗口的名字 -->
151 <a href="http://www.baidu.com" target="lisi">百度</a><br />
152
153 <!-- 4. 关闭当前窗口 -->
154 <input type="button" value="关闭当前窗口" onclick="closeWin()">
155
156 <!-- 3. 弹出一个确认对话框 -->
157 <table width="600" border="1" align="center" rules="all">
158 <tr>
159 <th>id</th>
160 <th>新闻标题</th>
161 <th>发布日期</th>
162 <th>操作选项</th>
163 </tr>
164 <tr>
165 <td>100</td>
166 <td>已经超神了!</td>
167 <td>2017-2-6</td>
168 <td><a href="#" onclick="">修改</a> <a href="#" onclick="confirmDel()">删除</a></td>
169 </tr>
170 <tr>
171 <td>100</td>
172 <td>已经超神了!</td>
173 <td>2017-2-6</td>
174 <td><a href="#" onclick="">修改</a> <a href="#" onclick="confirmDel()">删除</a></td>
175 </tr>
176 <tr>
177 <td>100</td>
178 <td>已经超神了!</td>
179 <td>2017-2-6</td>
180 <td><a href="#" onclick="">修改</a> <a href="#" onclick="confirmDel()">删除</a></td>
181 </tr>
182
183 </table>
184 </body>
185 </html>
