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>