亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

前戲

到目前為止，我們已經(jīng)學(xué)過(guò)了JavaScript的一些簡(jiǎn)單的語(yǔ)法。但是這些簡(jiǎn)單的語(yǔ)法，并沒(méi)有和瀏覽器有任何交互。

也就是我們還不能制作一些我們經(jīng)常看到的網(wǎng)頁(yè)的一些交互，我們需要繼續(xù)學(xué)習(xí)BOM和DOM相關(guān)知識(shí)。

JavaScript分為 ECMAScript，DOM，BOM。

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

DOM （Document Object Model）是指文檔對(duì)象模型，通過(guò)它，可以訪問(wèn)HTML文檔的所有元素。

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

window對(duì)象

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

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

*沒(méi)有應(yīng)用于 window 對(duì)象的公開(kāi)標(biāo)準(zhǔn)，不過(guò)所有瀏覽器都支持該對(duì)象。

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

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

接下來(lái)要講的HTML DOM 的 document 也是 window 對(duì)象的屬性之一。

一些常用的Window方法：

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

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

window.open() - 打開(kāi)新窗口

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

window的子對(duì)象

navigator對(duì)象（了解即可）

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

navigator.appName　　// Web瀏覽器全稱(chēng)

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

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

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

screen對(duì)象（了解即可）

屏幕對(duì)象，不常用。

一些屬性：

screen.availWidth - 可用的屏幕寬度

screen.availHeight - 可用的屏幕高度

history對(duì)象（了解即可）

window.history 對(duì)象包含瀏覽器的歷史。

瀏覽歷史對(duì)象，包含了用戶對(duì)當(dāng)前頁(yè)面的瀏覽歷史，但我們無(wú)法查看具體的地址，可以簡(jiǎn)單的用來(lái)前進(jìn)或后退一個(gè)頁(yè)面。

history.forward()  // 前進(jìn)一頁(yè)

history.back()  // 后退一頁(yè)

location對(duì)象

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

常用屬性和方法：

location.href  獲取URL

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

location.reload() 重新加載頁(yè)面

彈出框

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

警告框

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

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

語(yǔ)法：

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

確認(rèn)框（了解即可）

確認(rèn)框用于使用戶可以驗(yàn)證或者接受某些信息。

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

如果用戶點(diǎn)擊確認(rèn)，那么返回值為 true。如果用戶點(diǎn)擊取消，那么返回值為 false。

語(yǔ)法：

confirm("你確定嗎？")

提示框（了解即可）

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

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

如果用戶點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶點(diǎn)擊取消，那么返回值為 null。

語(yǔ)法：

prompt("請(qǐng)?jiān)谙路捷斎?quot;,"你的答案")

計(jì)時(shí)相關(guān)

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

setTimeout()

語(yǔ)法：

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

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

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

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

clearTimeout()

語(yǔ)法：

clearTimeout(setTimeout_variable)

舉個(gè)例子：

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

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

// 取消setTimeout設(shè)置

clearTimeout(timer);

setInterval()

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

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

語(yǔ)法：

setInterval("JS語(yǔ)句",時(shí)間間隔)

返回值

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

clearInterval()

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

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

語(yǔ)法：

clearInterval(setinterval返回的ID值)

舉個(gè)例子：

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

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

// 取消setInterval設(shè)置

clearInterval(timer);

DOM

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

當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Object Model）。

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

HTML DOM 樹(shù)

DOM標(biāo)準(zhǔn)規(guī)定HTML文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)(node)：

文檔節(jié)點(diǎn)(document對(duì)象)：代表整個(gè)文檔

元素節(jié)點(diǎn)(element 對(duì)象)：代表一個(gè)元素（標(biāo)簽）

文本節(jié)點(diǎn)(text對(duì)象)：代表元素（標(biāo)簽）中的文本

屬性節(jié)點(diǎn)(attribute對(duì)象)：代表一個(gè)屬性，元素（標(biāo)簽）才有屬性

注釋是注釋節(jié)點(diǎn)(comment對(duì)象)　

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

JavaScript 能夠改變頁(yè)面中的所有 HTML 元素

JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性

JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式

JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)

查找標(biāo)簽

直接查找

document.getElementById           根據(jù)ID獲取一個(gè)標(biāo)簽

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

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

注意：

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

間接查找

parentElement            父節(jié)點(diǎn)標(biāo)簽元素

children                 所有子標(biāo)簽

firstElementChild        第一個(gè)子標(biāo)簽元素

lastElementChild         最后一個(gè)子標(biāo)簽元素

nextElementSibling       下一個(gè)兄弟標(biāo)簽元素

previousElementSibling   上一個(gè)兄弟標(biāo)簽元素

節(jié)點(diǎn)操作

創(chuàng)建節(jié)點(diǎn)

語(yǔ)法：

createElement(標(biāo)簽名)

示例：

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

添加節(jié)點(diǎn)

語(yǔ)法：

追加一個(gè)子節(jié)點(diǎn)（作為最后的子節(jié)點(diǎn)）

somenode.appendChild(newnode)；

把增加的節(jié)點(diǎn)放到某個(gè)節(jié)點(diǎn)的前邊。

somenode.insertBefore(newnode,某個(gè)節(jié)點(diǎn));

示例：

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ǎn)：

語(yǔ)法：

獲得要?jiǎng)h除的元素，通過(guò)父元素調(diào)用該方法刪除。

somenode.removeChild(要?jiǎng)h除的節(jié)點(diǎn))

替換節(jié)點(diǎn)：

語(yǔ)法：

somenode.replaceChild(newnode, 某個(gè)節(jié)點(diǎn));

屬性節(jié)點(diǎn)

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

var divEle = document.getElementById("d1")

divEle.innerText

divEle.innerHTML

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

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")

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

imgEle.src

imgEle.src="..."

獲取值操作

語(yǔ)法：

elementNode.value

適用于以下標(biāo)簽：

.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  獲取所有樣式類(lèi)名(字符串)

classList.remove(cls)  刪除指定類(lèi)

classList.add(cls)  添加類(lèi)

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

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

指定CSS操作

obj.style.backgroundColor="red"

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

1.對(duì)于沒(méi)有中橫線的CSS屬性一般直接使用style.屬性名即可。如：

obj.style.margin

obj.style.width

obj.style.left

obj.style.position

2.對(duì)含有中橫線的CSS屬性，將中橫線后面的第一個(gè)字母換成大寫(xiě)即可。如：

obj.style.marginTop

obj.style.borderLeftWidth

obj.style.zIndex

obj.style.fontFamily

事件

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

常用事件

onclick        當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。

ondblclick     當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。

onfocus        元素獲得焦點(diǎn)。               // 練習(xí)：輸入框

onblur         元素失去焦點(diǎn)。               應(yīng)用場(chǎng)景：用于表單驗(yàn)證,用戶離開(kāi)某個(gè)輸入框時(shí),代表已經(jīng)輸入完了,我們可以對(duì)它進(jìn)行驗(yàn)證.

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

onkeydown      某個(gè)鍵盤(pán)按鍵被按下。          應(yīng)用場(chǎng)景: 當(dāng)用戶在最后一個(gè)輸入框按下回車(chē)按鍵時(shí),表單提交.

onkeypress     某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)。

onkeyup        某個(gè)鍵盤(pán)按鍵被松開(kāi)。

onload         一張頁(yè)面或一幅圖像完成加載。

onmousedown    鼠標(biāo)按鈕被按下。

onmousemove    鼠標(biāo)被移動(dòng)。

onmouseout     鼠標(biāo)從某元素移開(kāi)。

onmouseover    鼠標(biāo)移到某元素之上。

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

onsubmit      確認(rèn)按鈕被點(diǎn)擊，使用的對(duì)象是form。

綁定方式：

方式一：

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

<script>

  function changeColor(ths) {

    ths.style.backgroundColor="green";

  }

</script>

注意：

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

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

方式二：

<div id="d2">點(diǎn)我</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">開(kāi)始</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="請(qǐng)輸入關(guān)鍵字" onblur="blur()" onfocus="focus()">

<script>

function focus(){

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

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

        inputEle.value="";

    }

}

function blur(){

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

    var val=inputEle.value;

    if(!val.trim()){

        inputEle.value="請(qǐng)輸入關(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)動(dòng)</title>

</head>

<body>

<select id="province">

  <option>請(qǐng)選擇省:</option>

</select>

<select id="city">

  <option>請(qǐng)選擇市:</option>

</select>

<script>

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

  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

當(dāng)我們給頁(yè)面上的元素綁定事件的時(shí)候，必須等到文檔加載完畢。因?yàn)槲覀儫o(wú)法給一個(gè)不存在的元素綁定事件。

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

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