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 新窗口的宽度 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>