網頁三劍客之JS

時間 2019-12-07

標籤網頁劍客欄目 HTML 简体版

原文原文鏈接

1.javascrapt介紹

js概述

JavaScript是運行在瀏覽器端的腳步語言，JavaScript主要解決的是前端與用戶交互的問題，包括使用交互與數據交互。 JavaScript是瀏覽器解釋執行的，前端腳本語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，須要插件)等。javascript

1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其更名ScriptEase.(客戶端執行的語言)
Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.後更名叫Javascript
微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.
爲了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 做爲標準（ISO/IEC-16262）。今後，Web 瀏覽器就開始努力（雖然有着不一樣的程度的成功和失敗）將 ECMAScript 做爲 JavaScript 實現的基礎。EcmaScript是規範.

前端三大塊
一、HTML：頁面結構
二、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果
三、JavaScript：頁面行爲：部分動畫效果、頁面與用戶的交互、頁面功能css

ECMAScript

儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：html

核心（ECMAScript）
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
Javascript 在開發中絕大多數狀況是基於對象的.也是面向對象的

簡單地說，ECMAScript 描述瞭如下內容：前端

語法
類型
語句
關鍵字
保留字
運算符
對象 (封裝繼承多態) 基於對象的語言.使用對象.

2.JavaScript嵌入頁面的方式

一、行間事件（主要用於事件）java

<input type="button" name="" onclick="alert('ok！');">

二、頁面script標籤嵌入node

<script type="text/javascript">        
    var a = '你好！';
    alert(a);
</script>

三、外部引入web

<script type="text/javascript" src="js/index.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js01</title>
    <!-- 第三種嵌入js的方式：外鏈式 -->
    <script type="text/javascript" src="hello.js"></script>

    <script type="text/javascript">
        // 第二種嵌入js的方式：嵌入式

        alert('hello,again!')
    </script>
</head>
<body>
    <!-- 第一種嵌入js的方式：行間事件，不推介使用 -->

    <input type="button" name="" value="彈框" onclick="alert('hello!')">
</body>
</html>

示例

3. 變量

JavaScript 是一種弱類型語言，javascript的變量類型由它的值來決定。定義變量須要用關鍵字 'var'數組

 var a = 123;
 var b = 'asd';

 //同時定義多個變量能夠用","隔開，公用一個‘var’關鍵字

 var c = 45,d='qwe',f='68';

變量類型瀏覽器

5種基本數據類型：
number、string、boolean、undefined、null緩存

1種複合（引入）數據類型：
object

//typeof 區分基本數據類型
console.log(typeof '123'); //string
console.log(typeof 123); //numder
console.log(typeof null); //object
console.log(typeof true); //boolean
console.log(typeof undefined); //undefinded
console.log(typeof [1,2,3]) //object
console.log(typeof {'a':'b'}) //object

變量、函數、屬性、函數參數命名規範

一、區分大小寫
二、第一個字符必須是字母、下劃線（_）或者美圓符號（$）
三、其餘字符能夠是字母、下劃線、美圓符或數字

window.onload = function(){
　　　　　　　　
            var oDiv = document.getElementById('div1');
            oDiv.title = "我看到了！";
            var oA = document.getElementById('link1');
            oA.href = "http://www.baidu.com";
            oA.title = "歡迎來到百度網";
            alert(oA.id);  //兩種打印方式之一 彈出框
            console.log(oA.title); //兩種打印方式之二  打印日誌

        }

alert(a);//彈出undefined
        // alert(c);報錯，c沒有聲明
        var a =123;
        // 彈出OK！

function hello() {
            document.write('<h1>hello world</h1>') //渲染頁面
        }
        hello();
        console.log(hello()) //undefinde

　　　　 console.log(typeof hello()) //undefinded:undefinded  null:null

console.log('我是誰'+true);
console.log('我是誰'+2);
console.log(true+2);//3
console.log(parseInt(3.999999));//3
console.log(parseInt('hello')); //NaN
console.log(parseInt('123')); //123
console.log(parseInt('123abc')); //123
console.log(parseInt('abc')); //undefinded

注：變量必須var開頭，一條語句結束後加;，打印輸出兩種形式

著名命名規則

Camel 標記法
首字母是小寫的，接下來的字母都以大寫字符開頭。例如：
var myTestValue = 0, mySecondValue = "hi";
Pascal 標記法
首字母是大寫的，接下來的字母都以大寫字符開頭。例如：
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利類型標記法
在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，以下所示「
Var iMyTestValue = 0, sMySecondValue = "hi";

註釋

//單行註釋文字
/*
多行註釋
變量定義
*/

類型轉換

一、直接轉換 parseInt() 與 parseFloat()

alert('12'+7); //彈出127
alert( parseInt('12') + 7 );  //彈出19 
alert( parseInt(5.6));  // 彈出5
alert('5.6'+2.3);  // 彈出5.62.3
alert(parseFloat('5.6')+2.3);  // 彈出7.8999999999999995
alert(0.1+0.2); //彈出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //彈出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //彈出7.9
二、隱式轉換 「==」 和 「-」

if('3'==3)
{
    alert('相等');
}

// 彈出'相等'
alert('10'-3);  // 彈出7
三、NaN 和 isNaN

alert( parseInt('123abc') );  // 彈出123
alert( parseInt('abc123') );  // 彈出NaN

邏輯運算符

邏輯 AND 運算符(&&)
邏輯 AND 運算的運算數能夠是任何類型的，不止是 Boolean 值。

若是某個運算數不是原始的 Boolean 型值，邏輯 AND 運算並不必定返回 Boolean 值：

若是某個運算數是 null，返回 null。 
若是某個運算數是 NaN，返回 NaN。 
若是某個運算數是 undefined，返回undefined。 
邏輯 OR 運算符(||)
與邏輯 AND 運算符類似，若是某個運算數不是 Boolean 值，邏輯 OR 運算並不必定返回 Boolean 值

賦值運算符
賦值 = 
JavaScript中=表明賦值，兩個等號==表示判斷是否相等
例如，x=1表示給x賦值爲1
if (x==1){...}程序表示當x與1相等時
if(x==「on」){…}程序表示當x與「on」相等時
 配合其餘運算符造成的簡化表達式
例如i+=1至關於i=i+1，x&=y至關於x=x&y

等性運算符
執行類型轉換的規則以下：

若是一個運算數是 Boolean 值，在檢查相等性以前，把它轉換成數字值。false 轉換成 0，true 爲 1。 
若是一個運算數是字符串，另外一個是數字，在檢查相等性以前，要嘗試把字符串轉換成數字。 
若是一個運算數是對象，另外一個是字符串，在檢查相等性以前，要嘗試把對象轉換成字符串。 
若是一個運算數是對象，另外一個是數字，在檢查相等性以前，要嘗試把對象轉換成數字。 
在比較時，該運算符還遵照下列規則：

值 null 和 undefined 相等。 
在檢查相等性時，不能把 null 和 undefined 轉換成其餘值。 
若是某個運算數是 NaN，等號將返回 false，非等號將返回 true。 
若是兩個運算數都是對象，那麼比較的是它們的引用值。若是兩個運算數指向同一對象，那麼等號返回 true，不然兩個運算數不等。

關係運算符
比較數字和字符串

另外一種棘手的情況發生在比較兩個字符串形式的數字時，好比：

1
2
var bResult = "25" < "3";
alert(bResult); //輸出 "true"
上面這段代碼比較的是字符串 "25" 和 "3"。兩個運算數都是字符串，因此比較的是它們的字符代碼（"2" 的字符代碼是 50，"3" 的字符代碼是 51）。

不過，若是把某個運算數該爲數字，那麼結果就有趣了：

1
2
var bResult = "25" < 3;
alert(bResult); //輸出 "false"
這裏，字符串 "25" 將被轉換成數字 25，而後與數字 3 進行比較，結果不出所料。

總結：

1
2
比較運算符兩側若是一個是數字類型,一個是其餘類型,會將其類型轉換成數字類型.
比較運算符兩側若是都是字符串類型,比較的是最高位的asc碼,若是最高位相等,繼續取第二位比較.

//Boolean運算符
var temp=new Object();// false;[];0; null; undefined;object(new Object();)

    if(temp){
        console.log("yuan")
    }else {
        console.log("alex")
    }

全等號和非全等號

等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所作的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。

4.JS條件語句

經過條件來控制程序的走向，就須要用到條件語句。

運算符
一、算術運算符： +(加)、 -(減)、 *(乘)、 /(除)、 %(求餘)
二、賦值運算符：=、 +=、 -=、 *=、 /=、 %=
三、條件運算符：==、===、>、>=、<、<=、!=、&&(並且)、||(或者)、!(否)

if else

var a = 6;
if(a==1)
{
    alert('語文');
}
else if(a==2)
{
    alert('數學');
}
else if(a==3)
{
    alert('英語');
}
else if(a==4)
{
    alert('美術');
}
else if(a==5)
{
    alert('舞蹈');
}
else
{
    alert('不補習');
}
switch

var a = 6;

switch (a){
    case 1:
        alert('語文');
        break;
    case 2:
        alert('數學');
        break;
    case 3:
        alert('英語');
        break;
    case 4:
        alert('美術');
        break;
    case 5:
        alert('舞蹈');
        break;
    default:
        alert('不補習');
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>條件語句</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            var oBox = document.getElementById('box');
            // alert(oBox.style.display)彈出空的值
            oBtn.onclick = function(){
                if (oBox.style.display == 'block' || oBox.style.display == '') {
                oBox.style.display = 'none';
                }
                else {
                    oBox.style.display = 'block';
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" name="" value="切換" id="btn">
    <div class="box" id="box"></div>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多重條件語句</title>
    <script type="text/javascript">
        var today = 1;
        if (today == 1) {
            alert('語文');
        }
        else if(today == 2){
            alert('數學');
        }
        else if(today == 3){
            alert('英語');
        }
        else if(today == 4){
            alert('美術');
        }
        else if(today == 5){
            alert('舞蹈');
        }
        else if(today == 6){
            alert('政治');
        }
        else {
            alert('不補習');
        }

    switch(today){
        case 1:
        alert('語文');
        break;
        case 2:
        alert('數學');
        break;
        case 3:
        alert('舞蹈');
        break;
        case 4:
        alert('英語');
        break;
        case 5:
        alert('政治');
        break;
        default:
        alert('不補習');
    }
    </script>
</head>
<body>
    
</body>
</html>

5.JS循環語句

程序中進行有規律的重複性操做，須要用到循環語句。

for循環

for(var i=0;i<len;i++)
{
    ......
}

while循環

var i=0;

while(i<8){

    ......

    i++;

}

數組去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>經過標籤獲取元素</title>
    <script type="text/javascript">
        window.onload = function(){
            var oList = document.getElementById('list01');
            var ali = oList.getElementsByTagName('li');
            
            for(var i=0;i<ali.length;i++){
                if (i%2==0) {
                ali[i].style.backgroundColor = 'gold';
            }
            }
            for(i in ali){
                console.log(i);
                if (i%2==1){
                ali[i].style.backgroundColor = 'red';
            }}
            
        }
    </script>
</head>
<body>
    <ul id="list01">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <ul id="list02">
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</body>
</html>

View Code

6.JS獲取元素方法

獲取元素方法一

可使用內置對象document上的getElementById方法來獲取頁面上設置了id屬性的元素，獲取到的是一個html對象，而後將它賦值給一個變量，好比：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">這是一個div元素</div>

上面的語句，若是把javascript寫在元素的上面，就會出錯，由於頁面上從上往下加載執行的，javascript去頁面上獲取元素div1的時候，元素div1尚未加載，解決方法有兩種：

第一種方法：將javascript放到頁面最下邊

....
<div id="div1">這是一個div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

第二種方法：將javascript語句放到window.onload觸發的函數裏面,獲取元素的語句會在頁面加載完後才執行，就不會出錯了。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">這是一個div元素</div>

`7.操做元素屬性`

獲取的頁面元素，就能夠對頁面元素的屬性進行操做，屬性的操做包括屬性的讀和寫。

操做屬性的方法
一、「.」操做
二、「[ ]」操做

屬性寫法

一、html的屬性和js裏面屬性寫法同樣
二、「class」屬性寫成「className」
三、「style」屬性裏面的屬性，有橫槓的改爲駝峯式，好比：「font-size」，改爲」style.fontSize」

經過「.」操做屬性：

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 讀取屬性值
        var val = oInput.value;
        var typ = oInput.type;
        var nam = oInput.name;
        var links = oA.href;
        // 寫(設置)屬性
        oA.style.color = 'red';
        oA.style.fontSize = val;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">傳智播客</a>

經過「[ ]」操做屬性：

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 讀取屬性
        var val1 = oInput1.value;
        var val2 = oInput2.value;
        // 寫(設置)屬性
        // oA.style.val1 = val2; 沒反應
        oA.style[val1] = val2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">傳智播客</a>

innerHTML
innerHTML能夠讀取或者寫入標籤包裹的內容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //讀取
        var txt = oDiv.innerHTML;
        alert(txt);
        //寫入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">傳智播客<a/>';
    }
</script>

......

<div id="div1">這是一個div元素</div>

對象的概念與分類

11種內置對象

包括：

Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object

簡介：

在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是經過對象實現的

BOM對象

BOM（瀏覽器對象模型），能夠對瀏覽器窗口進行訪問和操做。使用 BOM，開發者能夠移動窗口、改變狀態欄中的文本以及執行其餘與頁面內容不直接相關的動做。

使 JavaScript 有能力與瀏覽器「對話」。

window對象

window對象
    全部瀏覽器都支持 window 對象。
    概念上講.一個html文檔對應一個window對象.
    功能上講: 控制瀏覽器窗口的.
    使用上講: window對象不須要建立對象,直接使用便可.

window對象方法

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           顯示可提示用戶輸入的對話框。

open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close()            關閉瀏覽器窗口。
setInterval()      按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數後調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的座標。

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #id1{
        width: 200px;
        height: 50px;
    }
</style>
<body>
<input type="text" id="id1" onclick="begin()">
<button onclick="end()">中止</button>
<button onclick="click()">click</button>
<button onclick="history.go(-1)">back</button>
<button onclick="location.reload()">刷新</button>
<script>
    //1.警告框
    // window.alert('hello');
    //2.判斷框
    // var ret = window.confirm('hello zhangyafei');
    // console.log(ret);
    //3.輸入框
    // var inp = window.prompt();
    // console.log(inp);
    // open('http://www.baidu.com');
    // close();
    // setInterval(f,1000);
    // function f() {
    //     console.log('hello');
    // }
    //定時器
    function showtime() {
        var now = new Date().toLocaleString();
        // console.log(now);
        var inp=document.getElementById('id1');
        inp.value = now;
    }
    var clock1;
    function begin() {
        if(clock1==undefined) {
            showtime();
            clock1 = setInterval(showtime, 1000);
        }
    }
    function end() {
        clearInterval(clock1);
        clock1 = undefined
    }
    function click() {
        console.log('hello...')
    }
    setTimeout(click,1000);

</script>
</body>
</html>

View Code

history對象

History 對象屬性

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。

History 對象方法

back()    加載 history 列表中的前一個 URL。
forward()    加載 history 列表中的下一個 URL。
go()    加載 history 列表中的某個具體頁面。

<button onclick="history.go(-1)">back</button>
<a href="Bom對象.html">forward</a>
<button onclick="history.go(1)">前進</button>

View Code

location對象

Location 對象包含有關當前 URL 的信息。

Location 對象是 Window 對象的一個部分，可經過 window.location 屬性來訪問。

Location 對象方法

location.assign(URL)
location.reload()
location.replace(newURL)//注意與assign的區別

頁面刷新的幾種方式：

1 history.go(0)
除非有<%..%>等需在服務端解釋才能生成的頁面代碼,不然直接讀取緩存中的數據
不刷新
2 location.reload()
要從新連服務器以讀得新的頁面(雖然頁面是同樣的) 
刷新
3 location=location
要在javascript中導航，不是調用window對象的某個方法，而是設置它的location.href屬性，location屬性是每一個瀏覽器都支持的。好比：
<span onclick=」javascript:window.location.href=’#top’」>top</span>
執行後有後退、前進
4 location.assign(location)
加載 URL 指定的新的 HTML 文檔。 就至關於一個連接，跳轉到指定的url，當前頁面會轉爲新頁面內容，能夠點擊後退返回上一個頁面。 
5 document.execCommand('Refresh') 
6 window.navigate(location)
MSDN說的window.navigate(sURL)方法是針對IE的，不適用於FF，在HTML DOM Window Object中，根本沒有列出window.navigate方法。
7 location.replace(location)
執行後無後退、前進
經過加載 URL 指定的文檔來替換當前文檔 ，這個方法是替換當前窗口頁面，先後兩個頁面共用一個
窗口，因此是沒有後退返回上一頁的
8 document.URL=location.href

頁面刷新的幾種方式介紹

頁面自動刷新的幾種方式：

1.頁面自動刷新：把以下代碼加入<head>區域中
<meta http-equiv="refresh" content="20">
其中20指每隔20秒刷新一次頁面.

2.頁面自動跳轉：把以下代碼加入<head>區域中
<meta http-equiv="refresh" content="20;url=http://www.jbxue.com">
其中20指隔20秒後跳轉到http://www.jbxue.com頁面

頁面自動刷新

<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>

js版

//如何刷新包含該框架的頁面用 
<script language=JavaScript>
parent.location.reload();
</script>

//子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script> www.jbxue.com
(　或　<a href="javascript:opener.location.reload()">刷新</a> )

//如何刷新另外一個框架的頁面用 
<script language=JavaScript>
parent.另外一FrameID.location.reload();
</script>

js刷新框架的腳本語句

<body onload="opener.location.reload()"> 開窗時刷新
<body onUnload="opener.location.reload()"> 關閉時刷新

<script language="javascript">
window.opener.document.location.reload()
</script>

打開或關閉窗口時刷新

DOM對象

DOM 是 W3C（萬維網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文檔的標準：

"W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"

W3C DOM 標準被分爲 3 個不一樣的部分：

核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型

什麼是 XML DOM？－－－－>XML DOM 定義了全部 XML 元素的對象和屬性，以及訪問它們的方法。
什麼是 HTML DOM？－－－－>HTML DOM 定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。

DOM結點

節點(自身)屬性:

attributes - 節點（元素）的屬性節點
nodeType – 節點類型
nodeValue – 節點值
nodeName – 節點名稱
innerHTML - 節點（元素）的文本值

導航屬性:

parentNode - 節點（元素）的父節點 (推薦)
firstChild – 節點下第一個子元素
lastChild – 節點下最後一個子元素
childNodes - 節點（元素）的子節點

推介導航屬性

parentElement              // 父節點標籤元素

children                        // 全部子標籤
  
firstElementChild          // 第一個子標籤元素

lastElementChild           // 最後一個子標籤元素

nextElementtSibling       // 下一個兄弟標籤元素

previousElementSibling  // 上一個兄弟標籤元素

訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,咱們可以以不一樣的方式來訪問 HTML 元素：

全局查找標籤的方法：
document.getElementById() 
document.getElementsByTagName()
document.getElementsByClassName() 
document.getElementsByName()

局部查找：
element.getElementByTagName()
element.getElementByclassName()

DOM event事件

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

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               //練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect      文本被選中。
onsubmit      確認按鈕被點擊。

兩種綁定事件的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p onclick="func(this)">hello</p>

<div>hello DIV</div>

<script>
    // 綁定事件方式一
    function func(self) {
        console.log(self)
        alert(1234)
    }
    // 綁定事件方式二
    var ele=document.getElementsByTagName("div")[0]
    ele.onclick=function () {
        console.log(ele);
        console.log(this);
//        alert(6666)


    }
</script>
</body>
</html>

View Code

onload：

onload 屬性開發中只給 body元素加.
這個屬性的觸發標誌着頁面內容被加載完成.
應用場景: 當有些事情咱們但願頁面加載完馬上執行,那麼可使用該事件屬性.

onsubmit:

是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.若是驗證失敗.在該方法中咱們應該阻止表單的提交.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="form1" method="post">
    <input type="text" name="username">
    <input type="submit" name="提交">
</form>
<script>
    var ele = document.getElementById('form1');
    ele.onsubmit = function (e) {
        // console.log('hello');
        alert('hello');
        // return false  //攔截表單提交
        e.preventDefault();

    }
</script>
</body>
</html>

View Code

Event 對象

Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

事件一般與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經建立好了,而且會在事件函數被調用時傳給事件函數.咱們得到僅僅須要接收一下便可.

好比onkeydown,咱們想知道哪一個鍵被按下了，須要問下event對象的屬性，這裏就時KeyCode；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: #4cae4c;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="outer" onclick="func1()">
    <div class="inner"></div>
</div>
<script>
    var ele = document.getElementsByClassName('inner')[0];
    ele.onclick = function (e) {
        alert('i am a inner!');
        e.stopPropagation();
    };
    function func1() {
        alert('i am a outer!')
    }
</script>
</body>
</html>

View Code

修改 HTML DOM

改變 HTML 內容

改變元素內容的最簡答的方法是使用 innerHTML ，innerText。

改變 CSS 樣式

 
         <p id= 
         "p2" 
         >Hello world!</p> 
        
         document.getElementById( 
         "p2" 
         ).style.color= 
         "blue" 
         ;<br>                             .style.fontSize=48px