男女成人秒免费试看久久_无码毛片免费自慰09_黄品汇mba旧版本_亚洲少妇与大狗性交对白_人妻无卡中文乱码在线_无码a级毛片免费视频内谢_午夜亚洲亚洲精品不卡_欧美成人在线观看_欧美日本韩国乱伦_十八禁观看污污污网站

前戲

到目前為止，我們已經(jīng)學過了JavaScript的一些簡單的語法。但是這些簡單的語法，并沒有和瀏覽器有任何交互。

也就是我們還不能制作一些我們經(jīng)?？吹降木W(wǎng)頁的一些交互，我們需要繼續(xù)學習BOM和DOM相關(guān)知識。

JavaScript分為 ECMAScript，DOM，BOM。

 BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行“對話”。

DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素。

 Window對象是客戶端JavaScript最高層對象之一，由于window對象是其它大部分對象的共同祖先，在調(diào)用window對象的方法和屬性時，可以省略window對象的引用。例如：window.document.write()可以簡寫成：document.write()。

window對象

所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。

*如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創(chuàng)建一個 window 對象，并為每個框架創(chuàng)建一個額外的 window 對象。

*沒有應(yīng)用于 window 對象的公開標準，不過所有瀏覽器都支持該對象。

所有 JavaScript 全局對象、函數(shù)以及變量均自動成為 window 對象的成員。

全局變量是 window 對象的屬性。全局函數(shù)是 window 對象的方法。

接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

一些常用的Window方法：

window.innerHeight - 瀏覽器窗口的內(nèi)部高度

window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

window.open() - 打開新窗口

window.close() - 關(guān)閉當前窗口

window的子對象

navigator對象（了解即可）

瀏覽器對象，通過這個對象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關(guān)信息。

navigator.appName　　// Web瀏覽器全稱

navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串

navigator.userAgent　　// 客戶端絕大部分信息

navigator.platform　　　// 瀏覽器運行所在的操作系統(tǒng)

screen對象（了解即可）

屏幕對象，不常用。

一些屬性：

screen.availWidth - 可用的屏幕寬度

screen.availHeight - 可用的屏幕高度

history對象（了解即可）

window.history 對象包含瀏覽器的歷史。

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或后退一個頁面。

history.forward()  // 前進一頁

history.back()  // 后退一頁

location對象

window.location 對象用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面。

常用屬性和方法：

location.href  獲取URL

location.href="URL" // 跳轉(zhuǎn)到指定頁面

location.reload() 重新加載頁面

彈出框

可以在 JavaScript 中創(chuàng)建三種消息框：警告框、確認框、提示框。

警告框

警告框經(jīng)常用于確保用戶可以得到某些信息。

當警告框出現(xiàn)后，用戶需要點擊確定按鈕才能繼續(xù)進行操作。

語法：

alert("你看到了嗎？");

確認框（了解即可）

確認框用于使用戶可以驗證或者接受某些信息。

當確認框出現(xiàn)后，用戶需要點擊確定或者取消按鈕才能繼續(xù)進行操作。

如果用戶點擊確認，那么返回值為 true。如果用戶點擊取消，那么返回值為 false。

語法：

confirm("你確定嗎？")

提示框（了解即可）

提示框經(jīng)常用于提示用戶在進入頁面前輸入某個值。

當提示框出現(xiàn)后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續(xù)操縱。

如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 null。

語法：

prompt("請在下方輸入","你的答案")

計時相關(guān)

通過使用 JavaScript，我們可以在一定時間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。我們稱之為計時事件。

setTimeout()

語法：

var t=setTimeout("JS語句",毫秒)

setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。

setTimeout() 的第一個參數(shù)是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數(shù)的調(diào)用，諸如 alertMsg()"。

第二個參數(shù)指示從當前起多少毫秒后執(zhí)行第一個參數(shù)（1000 毫秒等于一秒）。

clearTimeout()

語法：

clearTimeout(setTimeout_variable)

舉個例子：

// 在指定時間之后執(zhí)行一次相應(yīng)函數(shù)

var timer = setTimeout(function(){alert(123);}, 3000)

// 取消setTimeout設(shè)置

clearTimeout(timer);

setInterval()

setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。

setInterval() 方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。

語法：

setInterval("JS語句",時間間隔)

返回值

一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執(zhí)行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 設(shè)置的 timeout。

clearInterval() 方法的參數(shù)必須是由 setInterval() 返回的 ID 值。

語法：

clearInterval(setinterval返回的ID值)

舉個例子：

// 每隔一段時間就執(zhí)行一次相應(yīng)函數(shù)

var timer = setInterval(function(){console.log(123);}, 3000)

// 取消setInterval設(shè)置

clearInterval(timer);

DOM

DOM（Document Object Model）是一套對文檔的內(nèi)容進行抽象和概念化的方法。

當網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構(gòu)造為對象的樹。

HTML DOM 樹

DOM標準規(guī)定HTML文檔中的每個成分都是一個節(jié)點(node)：

文檔節(jié)點(document對象)：代表整個文檔

元素節(jié)點(element 對象)：代表一個元素（標簽）

文本節(jié)點(text對象)：代表元素（標簽）中的文本

屬性節(jié)點(attribute對象)：代表一個屬性，元素（標簽）才有屬性

注釋是注釋節(jié)點(comment對象)　

JavaScript 可以通過DOM創(chuàng)建動態(tài)的 HTML：

JavaScript 能夠改變頁面中的所有 HTML 元素

JavaScript 能夠改變頁面中的所有 HTML 屬性

JavaScript 能夠改變頁面中的所有 CSS 樣式

JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)

查找標簽

直接查找

document.getElementById           根據(jù)ID獲取一個標簽

document.getElementsByClassName   根據(jù)class屬性獲取

document.getElementsByTagName     根據(jù)標簽名獲取標簽合集

注意：

涉及到DOM操作的JS代碼應(yīng)該放在文檔的哪個位置。

間接查找

parentElement            父節(jié)點標簽元素

children                 所有子標簽

firstElementChild        第一個子標簽元素

lastElementChild         最后一個子標簽元素

nextElementSibling       下一個兄弟標簽元素

previousElementSibling   上一個兄弟標簽元素

節(jié)點操作

創(chuàng)建節(jié)點

語法：

createElement(標簽名)

示例：

var divEle = document.createElement("div");

添加節(jié)點

語法：

追加一個子節(jié)點（作為最后的子節(jié)點）

somenode.appendChild(newnode)；

把增加的節(jié)點放到某個節(jié)點的前邊。

somenode.insertBefore(newnode,某個節(jié)點);

示例：

var imgEle=document.createElement("img");

imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");

var d1Ele = document.getElementById("d1");

d1Ele.appendChild(imgEle);

刪除節(jié)點：

語法：

獲得要刪除的元素，通過父元素調(diào)用該方法刪除。

somenode.removeChild(要刪除的節(jié)點)

替換節(jié)點：

語法：

somenode.replaceChild(newnode, 某個節(jié)點);

屬性節(jié)點

獲取文本節(jié)點的值：

var divEle = document.getElementById("d1")

divEle.innerText

divEle.innerHTML

設(shè)置文本節(jié)點的值：

var divEle = document.getElementById("d1")

divEle.innerText="1"

divEle.innerHTML="<p>2</p>"

attribute操作

var divEle = document.getElementById("d1");

divEle.setAttribute("age","18")

divEle.getAttribute("age")

divEle.removeAttribute("age")

// 自帶的屬性還可以直接.屬性名來獲取和設(shè)置

imgEle.src

imgEle.src="..."

獲取值操作

語法：

elementNode.value

適用于以下標簽：

.input

.select

.textarea

var iEle = document.getElementById("i1");

console.log(iEle.value);

var sEle = document.getElementById("s1");

console.log(sEle.value);

var tEle = document.getElementById("t1");

console.log(tEle.value);

class的操作

className  獲取所有樣式類名(字符串)

classList.remove(cls)  刪除指定類

classList.add(cls)  添加類

classList.contains(cls)  存在返回true，否則返回false

classList.toggle(cls)  存在就刪除，否則添加

指定CSS操作

obj.style.backgroundColor="red"

JS操作CSS屬性的規(guī)律：

1.對于沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：

obj.style.margin

obj.style.width

obj.style.left

obj.style.position

2.對含有中橫線的CSS屬性，將中橫線后面的第一個字母換成大寫即可。如：

obj.style.marginTop

obj.style.borderLeftWidth

obj.style.zIndex

obj.style.fontFamily

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發(fā)瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。

常用事件

onclick        當用戶點擊某個對象時調(diào)用的事件句柄。

ondblclick     當用戶雙擊某個對象時調(diào)用的事件句柄。

onfocus        元素獲得焦點。               // 練習：輸入框

onblur         元素失去焦點。               應(yīng)用場景：用于表單驗證,用戶離開某個輸入框時,代表已經(jīng)輸入完了,我們可以對它進行驗證.

onchange       域的內(nèi)容被改變。             應(yīng)用場景：通常用于表單元素,當元素內(nèi)容被改變時觸發(fā).（select聯(lián)動）

onkeydown      某個鍵盤按鍵被按下。          應(yīng)用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.

onkeypress     某個鍵盤按鍵被按下并松開。

onkeyup        某個鍵盤按鍵被松開。

onload         一張頁面或一幅圖像完成加載。

onmousedown    鼠標按鈕被按下。

onmousemove    鼠標被移動。

onmouseout     鼠標從某元素移開。

onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發(fā)生。

onsubmit      確認按鈕被點擊，使用的對象是form。

綁定方式：

方式一：

<div id="d1" onclick="changeColor(this);">點我</div>

<script>

  function changeColor(ths) {

    ths.style.backgroundColor="green";

  }

</script>

注意：

this是實參，表示觸發(fā)事件的當前元素。

函數(shù)定義過程中的ths為形參。

方式二：

<div id="d2">點我</div>

<script>

  var divEle2 = document.getElementById("d2");

  divEle2.onclick=function () {

    this.innerText="呵呵";

  }

</script>

事件示例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<input type="text" id="i1">

<button id="b1">開始</button>

<button id="b2">結(jié)束</button>

<script>

    var t;

    function showTime() {

        var i1Ele = document.getElementById('i1');

        var time = new Date();

        i1Ele.value = time.toLocaleString();

    }

    showTime();

    var b1Ele = document.getElementById('b1');

    b1Ele.onclick = function (ev) {

        if (!t){

            t = setInterval(showTime,1000)

        }

    };

    var b2Ele = document.getElementById('b2');

    b2Ele.onclick = function (ev) {

       clearInterval(t);

       t = undefined

    };

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>搜索框示例</title>

</head>

<body>

    <input id="d1" type="text" value="請輸入關(guān)鍵字" onblur="blur()" onfocus="focus()">

<script>

function focus(){

    var inputEle=document.getElementById("d1");

    if (inputEle.value==="請輸入關(guān)鍵字"){

        inputEle.value="";

    }

}

function blur(){

    var inputEle=document.getElementById("d1");

    var val=inputEle.value;

    if(!val.trim()){

        inputEle.value="請輸入關(guān)鍵字";

    }

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>select聯(lián)動</title>

</head>

<body>

<select id="province">

  <option>請選擇省:</option>

</select>

<select id="city">

  <option>請選擇市:</option>

</select>

<script>

  data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區(qū)", "海淀區(qū)"], "山東": ["威海市", "煙臺市"]};

  var p = document.getElementById("province");

  var c = document.getElementById("city");

  for (var i in data) {

    var optionP = document.createElement("option");

    optionP.innerHTML = i;

    p.appendChild(optionP);

  }

  p.onchange = function () {

    var pro = (this.options[this.selectedIndex]).innerHTML;

    var citys = data[pro];

    // 清空option

    c.innerHTML = "";

    for (var i=0;i<citys.length;i++) {

      var option_city = document.createElement("option");

      option_city.innerHTML = citys[i];

      c.appendChild(option_city);

    }

  }

</script>

</body>

</html>

window.onload

當我們給頁面上的元素綁定事件的時候，必須等到文檔加載完畢。因為我們無法給一個不存在的元素綁定事件。

window.onload事件在文件加載過程結(jié)束的時候觸發(fā)。此時，文檔中的所有對象都位于DOM中，并且所有圖像，腳本，鏈接和子框架都已完成加載。

注意：.onload()函數(shù)存在覆蓋現(xiàn)象。