js操作BOM對象
阿新 • • 發佈：2017-11-02
i++ 清空 math對象 多少 chang pad 賦值 bold 關閉瀏覽器 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>window對象</title>
<!--
BOM:(瀏覽器對象模型 Browser Object Model)
瀏覽器頁面的 前進 後退 刷新 頁面跳轉 都是Bom！
對整個瀏覽器窗口進行交互的對象模型！
包含的內容（對象）：
1.window對象
01.history 屬性
window對象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>history對象</title>
<!--
history對象常用的三個方法：
01.back（） ：後退
02.forward（）：前進
03.go() ：跳轉至指定的url
-->
</head>
<body>
<a href="02history對象.html">當前頁面</a>
<a href="03history對象2.html">下一個頁面</a>
<a href="javascript:history.forward()">history.forward()下一個頁面</a>
<a href="javascript:history.go(2)">history.go(2)下一個頁面</a>
<script type="text/javascript">
</script>
</body>
</html>
history對象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>history對象2</title>
</head>
<body>
history對象2 第二個頁面
<a href="javascript:history.back()">history.back()後退一個頁面</a>
<a href="javascript:history.go(-1)">history.go(-1)後退一個頁面</a>
</body>
</html>
history對象2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>location對象</title>
<!--
location對象
常用方法：
reload（）:刷新頁面
replace():使用新的頁面替換當前頁面
常用屬性：
host：主機名+端口號
hostname:主機名
href：完整的url
hash:返回#之後的所有字符串
search:返回?之後的所有字符串
-->
</head>
<body>
<a href="javascript:doubleC();">百度</a>
<script type="text/javascript">
document.write("host值為："+location.host+"<br/>");
document.write("hostname值為："+location.hostname+"<br/>");
document.write("href值為："+location.href+"<br/>");
document.write("hash值為："+location.hash+"<br/>");
document.write("search值為："+location.search+"<br/>");
var flag= confirm("確定跳轉頁面嗎？");
if(flag){
location.href="http://www.baidu.com";
}
//當用戶點擊百度 超鏈接時觸發的事件
function doubleC(){
location.href="http://www.jd.com";
}
</script>
</body>
</html>
location對象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>document對象</title>
<!--
document對象
常用的方法：
write（）:在頁面中書寫內容
getElementById(): 獲取頁面中指定id的對象！ 一個對象
getElementsByName("sex"): 獲取頁面中所有name屬性值為sex的對象 ！ 數組
getElementsByTagName("div"): 獲取頁面中所有標簽為div的對象 ！ 數組
常用的屬性：
referrer:
當瀏覽器向web服務器發送請求的時候，一般會帶上referrer，
告訴服務器我是從哪個頁面鏈接過來的，服務器基此可以獲得一些信息用於處理。
url： 返回當前頁面的url
-->
</head>
<body>
<script type="text/javascript">
document.write("document.referrer的值是："+document.referrer);
</script>
</body>
</html>
document對象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>referrer屬性</title>
</head>
<body>
<a href="05document對象.html">推廣地址</a>
</body>
</html>
referrer屬性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{font-size:14px;
line-height:30px;
}
input{margin:1px;
width:90px;
font-size:12px;
padding:0;
}
#node{
width:100px;
font-size:24px;
font-weight:bold;
float: left;
}
</style>
<script type="text/javascript">
/*改變層內容*/
function changeLink(){
//獲取頁面中id屬性值是node的節點
var node= document.getElementById("node");
// node.innerText="<h1 style=‘color:red‘>haha</h1>"; innerText：會把整個內容當成文本來輸出！
node.innerHTML="<h3 style=‘color:red‘>haha</h3>";//innerHTML:會編譯內容中的html標簽以及樣式
}
/*獲取所有input標簽中所有的value值*/
function all_input(){
var allInputs= document.getElementsByTagName("input"); // 是一個數組
var result="";
for(var i=0;i<allInputs.length;i++){
result+= allInputs[i].value+"<br/>";
}
//把所有的結果 給 id=s的元素
document.getElementById("s").innerHTML=result;
}
/*獲取所有name屬性值是season的value*/
function s_input(){
var allSeasons= document.getElementsByName("season"); // 是一個數組
var result="";
for(var i=0;i<allSeasons.length;i++){
result+= allSeasons[i].value+"<br/>";
}
//把所有的結果 給 id=s的元素
document.getElementById("s").innerHTML=result;
}
</script>
</head>
<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改變層內容" onclick="changeLink();" /><br />
<br /><input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="顯示input內容" onclick="all_input()" />
<input name="b3" type="button" value="顯示season內容" onclick="s_input()" />
<p id="s"></p>
</body>
</html>
getElement系列
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Date對象</title>
<!--
Date對象:
getDate()：獲取是一個月中的哪一天？ 1-31
getDay（）：獲取是一周中的哪一天？ 0-6
getHours（）：獲取是一天中的小時 0-23
getMinutes（）：獲取是分鐘 0-59
getSeconds（）：獲取是秒數 0-59
getMonth（）：獲取是一年中的第幾個月？ 0-11
getFullYear():獲取年份
getTime():返回1970年1月1日到現在的毫秒數
-->
</head>
<body>
<script type="text/javascript">
var today=new Date(); //當前的系統時間
document.write(today);
//獲取年月日
var year= today.getFullYear();
var month= today.getMonth()+1;
var date= today.getDate();
var hours= today.getHours();
var min= today.getMinutes();
var s= today.getSeconds();
document.write("當前系統時間是："+year+"年:"+month+"月:"+date+"日 "+hours+":"+min+":"+s)
</script>
</body>
</html>
Date對象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Math對象</title>
<!--
Math對象:
ceil（）:向上取整
floor()：向下取整
random（）:隨機數
round（）：四舍五入
-->
</head>
<body>
<script type="text/javascript">
document.write("25.5ceil===》"+Math.ceil(25.5)+"<br/>");
document.write("25.5floor===》"+Math.floor(25.5)+"<br/>");
document.write("25.5round===》"+Math.round(25.5)+"<br/>");
</script>
</body>
</html>
Math對象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定時函數</title>
<!--
01. setTimeout函數 在一個指定的時間點，去指定一個指定的函數
02.setInterval函數 每隔多少時間就會執行一次指定的函數
-->
</head>
<body>
<div id="nowTime"></div>
<button type="button" onclick="setOne();"> setTimeout函數</button>
<button type="button" onclick="clearOne();"> 清空setTimeout函數</button>
<button type="button" onclick="setTwo();"> setInterval函數</button>
<button type="button" onclick="clearTwo();"> 清空setInterval函數</button>
<script type="text/javascript">
var num=0; //成員變量
function one(){
//獲取頁面中空元素 並賦值
document.getElementById("nowTime").innerHTML="數字："+(++num);
}
//聲明 定時函數的變量
var timeout,intervar;
function setOne(){ //設置定時函數
timeout=setTimeout("one()",2000);
}
function clearOne(){//清空定時函數
clearTimeout(timeout);
}
function setTwo(){ //周期性的執行 one（）函數
intervar=setInterval("one()",1000);
}
function clearTwo(){ //周期性的執行 one（）函數
clearInterval(intervar);
}
</script>
</body>
</html>
定時函數
js操作BOM對象