1.Window對象
名稱
history：有關客戶訪問過的URL的信息
location：有關當前URL的信息
screen：有關客戶端的屏幕和顯示性能的信息
常用方法
prompt()：彈出輸入框
alert()：彈出警告框
confirm()：彈出確認對話框
close()：關閉瀏覽器窗口
open()：
window.open("彈出窗口的url","窗口名稱","窗口特征",)
setTimeout()：計時
setInterval()：計時
setTimeout和setInterval兩者區別：setTimeout是定時程序，在什么時間做什么事情，setInterval是表示間隔一定時間反復執行某操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function open_adv() {
window.open("adv.html");
}
function open_fix_adv() {
window.open("adv.html", "", "height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resize=0");
}
function fullscreen() {
window.open("adv.html", "", "fullscreen=yes");
}
function close_plan() {
window.close();
}
</script>
</head>
<body>
<input type="button" value="彈出窗口" onclick="open_adv();" /><br />
<input type="button" value="彈出固定大小的窗口，並且沒有菜單欄等" onclick="open_fix_adv();" /><br />
<input type="button" value="全屏顯示" onclick="fullscreen();" /><br />
<input type="button" value="關閉窗口" onclick="close_plan();" />
</body>
</html>
運行結果
點擊“彈出窗口"后
點擊“彈出固定大小的窗口，並沒有菜單欄等”后
點擊“全屏顯示”后
點擊“關閉窗口”后，就可以關閉這個窗口了
2.history對象的常用方法
back()：返回上一頁
forward()：前進一頁
go()：跳到指定頁
history.back();后退一頁
history.go(-1);后退1頁，相當於“后退”按鈕，等價於back()方法
3.location對象的常用屬性和常用方法
常用屬性
href：設置或返回url
如果沒有登錄，則跳轉到登錄頁面
location.href="login.html";
常用方法
reload()：重新加載
replace()：用新的文檔替換當前文檔
4.Document對象的常用方法
referrer：返回載入當前文檔的文檔的URL
URL：返回當前文檔的URL
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>領獎頁面</title> </head> <body> <img src="img/d1.jpg" alt="中獎" /> <h1><a href="taobao.html">淘寶領獎了</a></h1> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>獎品顯示頁面</title> <script type="text/javascript"> document.write("鏈接來源：" + document.referrer + "<br/>"); document.write("當前網頁文檔的URL：" + document.URL); </script> </head> <body> <h2> 淘寶網的商品購買頁面：筆記本！數碼相機！</h2> </body> </html>
function changeLink(){
document.getElementById("node").innerHTML="搜狐";
}
function showAllInput(){
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
}
function showOneInput(){
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
}
運行結果：
第一個HTML代碼顯示的頁面
點擊“淘寶領獎了”之后，鏈接來源現實的是用document.referrer返回載入當前文檔的文檔的URL
當前網頁文檔的URL是使用document.URL返回當前文檔的URL
第二個HTML顯示的結果
如果沒有前一個文檔，鏈接來源不會返回載入當前文檔的文檔的URL，會顯示空白
只會返回當前文檔的URL
getElementById()：返回對擁有指定id的第一個對象的引入
getElementById()：返回帶有指定名稱的對象的集合
getElementById()：返回帶有指定標簽名的對象的集合
write()：向文檔寫入HTML表達式或JavaScript代碼
5.制作復選框全選/全不選效果
分析：設置同名的復選框組，“全選”復選框設置唯一ID
利用getElementsByName()訪問同名復選框組
使用getElementById()訪問“全選”復選框
根據“全選”復選框的狀態，設置同名復選框勾選狀態（checked屬性）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>全選/全不選效果</title> <style type="text/css"> .bg { background-image: url(img/list_bg.gif); background-repeat: no-repeat; width: 730px; } td { text-align: center; font-size: 13px; line-height: 25px; } body { margin: 0 } </style> <script type="text/JavaScript"> function check() { var oInput=document.getElementsByName("product"); for (var i=0;i<oInput.length;i++) { if (document.getElementById( "all").checked==true) { oInput[i].checked=true; } else { oInput[i].checked=false; } } } </script> </head> <body> <table border="0" cellspacing="0" cellpadding="0" class="bg"> <form action="" method="post"> <tr> <td style="height:40px;"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr style="font-weight:bold;"> <td><input id="all" type="checkbox" value="全選" onclick="check();" />全選</td> <td>商品圖片</td> <td>商品名稱/出售者/聯系方式</td> <td>價格</td> </tr> <tr> <td colspan="4"> <hr style="border:1px #CCCCCC dashed" /> </td> </tr> <tr> <td><input name="product" type="checkbox" value="1" /></td> <td><img src="img/list0.jpg" alt="alt" /></td> <td>杜比環繞，家庭影院必備，超真實享受<br /> 出售者：ling112233 <br /> <img src="img/online_pic.gif" alt="alt" /> <img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口價<br /> 2833.0 </td> </tr> <tr> <td colspan="4"> <hr style="border:1px #CCCCCC dashed" /> </td> </tr> <tr> <td><input name="product" type="checkbox" value="2" /></td> <td><img src="img/list1.jpg" alt="alt" /></td> <td>NVDIA 9999GT 512MB 256bit極品顯卡，不容錯過<br /> 出售者：aipiaopiao110 <br /> <img src="img/online_pic.gif" alt="alt" /> <img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口價<br /> 6464.0 </td> </tr> <tr> <td colspan="4"> <hr style="border:1px #CCCCCC dashed" /> </td> </tr> <tr> <td><input name="product" type="checkbox" value="3" /></td> <td><img src="img/list2.jpg" alt="alt" /></td> <td>精品熱賣：高清晰，30寸等離子電視<br /> 出售者：陽光的掙扎 <br /> <img src="img/online_pic.gif" alt="alt" /> <img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口價<br /> 18888.0 </td> </tr> <tr> <td colspan="4"> <hr style="border:1px #CCCCCC dashed" /> </td> </tr> <tr> <td><input name="product" type="checkbox" value="4" /></td> <td><img src="img/list3.jpg" alt="alt" /></td> <td>Sony索尼家用最新款筆記本 <br /> 出售者：瘋狂的鏡無 <br /> <img src="img/online_pic.gif" alt="alt" /> <img src="img/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口價<br /> 5889.0 </td> </tr> <tr> <td colspan="4"> <hr style="border:1px #CCCCCC dashed" /> </td> </tr> </form> </table> </body> </html>
運行結果
全選
全不選
6.創建Date對象
var 日期實例=new Date(參數);
var tdate=new Date();
返回當前日期及時間
document.write(today);
7.Date對象的常用方法
getFullYear()：獲取年份
getMonth()：獲取月份（0-11）
getDate()：獲取號數（1-31）
getHours()：獲取小時數（0-23）
getMinutes()：獲取分鍾數（0-59）
getSeconds()：獲取秒數（0-59）
getDay()：獲取星期幾（0-6）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>星期</title> <script type="text/javascript" src="js/xingqi.js"></script> </head> <body> </body> </html>
JavaScript代碼
var today=new Date();
var weekday=today.getDate();
document.write("今天星期"+weekday);
switch(weekday) {
case 5:
document.write(" finally Day!");
break;
case 6:
document.write(" super Day!");
break;
case 0:
document.write(" sleepy Day!");
break;
default:
document.write(" I'm looking forward to this weeked.");
}
運行結果
8.今天遇到的問題
今天遇到一個問題用css怎么改變下拉列表select框的默認樣式，我百度了一下，解決了這個問題
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#parent{
background:#CCCCCC no-repeat;
width: 100px;
height: 30px;
overflow: hidden;
}
#parent select{
background: transparent;//背景設置為透明
border: none;
padding-left: 10px;
width: 120px;
height: 100%;
}
</style>
</head>
<body>
<div id="parent">
<select>
<option>今天星期一</option>
<option>今天星期二</option>
<option>今天星期三</option>
</select>
</div>
</body>
</html>
我們需要為其添加一個父容器，容器是用來覆蓋小箭頭的，然后為select添加一個向右的小偏移或者寬度大於父級元素。設置父級的css屬性超出部分不可見，即可覆蓋小箭頭，然后再為父級添加背景圖片即可。