Web前端開發與設計07-JavaScript對象

時間 2020-07-06

標籤 web 前端開發設計 javascript 對象欄目 HTML 简体版

原文原文鏈接

學習要點

BOM模型
Window對象
History對象和Location對象
Document對象
JavaScript內置對象
定時函數

BOM模型

BOM是JavaScript的組成之一，它提供了獨立於內容與瀏覽器窗口進行交互的對象，使用瀏覽器對象模型能夠實現與HTML的交互。
BOM的核心：window對象。javascript

BOM可實現功能：
1. 彈出新的瀏覽器窗口
2. 移動、關閉瀏覽器窗口以及調整窗口的大小
3. 頁面的前進、後退html

Window對象

經常使用屬性

一、語法格式：java

window.屬性名= "屬性值"

二、示例：node

window.location="http://www.taobao.com" ;

經常使用方法

語法格式瀏覽器

window.方法名();

備註：window是全局對象，因此在使用window對象的屬性和方法時，window能夠省略。例如以前使用的alert()和prompt()。服務器

一、confirm()dom

語法格式：函數

confirm("對話框中顯示的純文本");

「肯定」按鈕返回true；「取消」按鈕返回false。學習

示例：url

<script type="text/javascript">
       var flag=confirm("確認要刪除此條信息嗎？");
       if(flag==true)
            alert("刪除成功！");
       else
            alert("你取消了刪除");
</script>

confirm()與alert ()、 prompt()區別：

二、open()

在頁面上彈出一個新的瀏覽器窗口。

語法：

window.open("彈出窗口的url","窗口名稱","窗口特徵」)

窗口特徵：

示例：

window.open("adv.html",""," height=380,width=320,toolbar=0,
scrollbars=0, location=0,status=0,menubar=0,resizable=0 ");

彈出固定大小窗口,而且無菜單欄等。

三、 close()
關閉瀏覽器窗口。
語法：

window.close();

經常使用事件

History對象和Location對象

History對象

History對象提供用戶最近瀏覽過的URL列表。但出於隱私方面的緣由，history對象再也不容許腳本訪問已經訪問過的實際URL。但能夠使用history對象提供的、逐個訪問過的頁面的方法。

示例：

Location對象

Location對象提供當前頁的URL信息，而且能夠從新裝載當前頁面或裝入新頁面。

一、經常使用屬性

二、經常使用方法

Document對象

Doucument對象既是window對象的一部分，又表明了整個HTML文檔，能夠用來訪問頁面中的全部元素。因此在使用doucument對象時，除了要適用於各瀏覽器外，也要符合W3C的標準。

Document對象經常使用屬性

語法格式：

document.referrer  //若是當前文檔不是經過超連接訪問，則document.referrer的值爲null
document.URL

示例：服務器端判斷頁面來源並跳轉

Document對象經常使用方法

getElementById()通常用於訪問DIV、圖片、表單元素、網頁標籤等，要求訪問對象的id是惟一的。
getElementsByName()方法與getElementById()方法類似，但他訪問元素的name屬性，因爲一個文檔的name屬性不惟一，所以經常使用於方位一組相同name的元素，如一組單選按鈕、複選框。
getElementsByTagName()方法是按標籤來訪問頁面元素，通常用於訪問一組相同的元素，如一組input、一組圖片等。
演示示例：doucment方法

document.getElementById("node").innerHTML = "天貓";

注：innerHTML屬性是幾乎全部html標籤都有的屬性。他是一個字符串，用來設置或獲取當前對象的開始標籤和結束標籤之間的HTML。

複選框的全選/全不選效果

一、Checked的屬性值

選中：true

未選中：false

二、問題

相同name的複選框所有被同時選中，如何設置？

三、分析

使用getElementsByName()方法訪問同名複選框

將「全選」複選框的checked屬性值賦值給每一個複選框的checked屬性

JavaScript內置對象

Array：用於在單獨的變量名中存儲一系列的值。

String：用於支持對字符串的處理。

Math：用於執行經常使用的數學任務，它包含了若干個數字常量和函數。

Date：用於操做日期和時間。

Math對象

經常使用方法

Random（）方法返回值不包括0和1。
選擇1-100之間的整數表示方式：
Var iNum=Math.floor(Math.random()*100+1);
選擇2-99之間的整數表示方式：
Var iNum=Math.floor(Math.random()*98+2)

Date對象

一、語法：

var 日期對象=new Date(參數)；

參數格式：MM DD,YYYY,hh:mm:ss

不帶參數表示當前時間： var today=new Date();

帶參數表示指定時間：var today = new Date(「July 15,2016,10:11:30」);

二、經常使用方法：

getYear（）返回2位或者4位的年份
getDay（）：0表示週日，1表示週一，6表示週六。
各部分時間表示的範圍：除號數（一個月中的每一天）外，其餘均從0開始計數。例如月份0-11,0表示1月份，11表示12月份。

三、示例：製做時鐘特效

function disptime(){ 
var today = new Date(); //得到當前時間
var hh = today.getHours(); 
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML=                  hh+":"+mm+":"+ss;
}

<body onload="disptime()">
<div id="myclock"></div>
</body>

定時函數

setTimeout()

語法：

setTimeout("調用的函數",等待的毫秒數)

示例：

var  myTime＝setTimeout("disptime() ", 1000 );// 1秒(1000毫秒)以後執行函數disptime()一次

setInterval()

語法：

setInterval("調用的函數",間隔的毫秒數)

示例：

var  myTime＝setInterval("disptime() ", 1000 );// 每隔1秒(1000毫秒)執行函數disptime()一次

若是要屢次調用，使用setInterval()或者讓disptime()自身再次調用setTimeout()

clearTimeout()

語法：

clearTimeout(setTimeOut()返回的ID值)

示例：

var  myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；

clearInterval ()

語法：

clearInterval(setInterval()返回的ID值)

示例：

var  myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。