JavaWeb第三章：JavaScript的全面知識(shí)

這篇具有很好參考價(jià)值的文章主要介紹了JavaWeb第三章：JavaScript的全面知識(shí)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

前言

一.JavaScript的簡(jiǎn)介

??概念

??學(xué)習(xí)內(nèi)容

二.JavaScript的引入方式

??內(nèi)部腳本

??外部腳本

三.JavaScript的基礎(chǔ)語法

??語法的書寫

??變量?

? 全局變量? ? ??

?局部變量

?常量

???JavaScript的數(shù)據(jù)類型

??JavaScript運(yùn)算符

?運(yùn)算符的講解

?類型轉(zhuǎn)換

??流程控制語句

四.JS函數(shù)

五.JS對(duì)象

??Array講解

?Array基本知識(shí)

?Array之屬性與方法

??String講解

?String之屬性與方法

??JSON對(duì)象

?自定義對(duì)象

?JSON

六.JS之BOM

??window

??Location

七.JS之DOM

??如何獲取該元素對(duì)象

??修改文本內(nèi)容? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

八.事件監(jiān)聽

??常見事件

??事件綁定

總結(jié)

??個(gè)人主頁：tq02的博客_CSDN博客-C語言,Java,Java數(shù)據(jù)結(jié)構(gòu)領(lǐng)域博主
?? 本文由 tq02 原創(chuàng)，首發(fā)于 CSDN??
???本章講解內(nèi)容：JavaScript的全面簡(jiǎn)潔講解

??歡迎各位→點(diǎn)贊?? +?收藏? +?評(píng)論??+關(guān)注?

?編譯器：VS Code

前言

? ? ? ? 本博文主要簡(jiǎn)單講解JavaScript的概要知識(shí)，為了后端而作準(zhǔn)備，雖然是概要知識(shí)，但是依然是十分主要的知識(shí)點(diǎn)，更好的了解前端知識(shí)，以便后期后端知識(shí)的學(xué)習(xí)。

官方幫助手冊(cè)：https://www.w3school.com.cn/

一.JavaScript的簡(jiǎn)介

??概念

JavaScript (簡(jiǎn)稱:JS) 是一門跨平臺(tái)、面向?qū)ο蟮哪_本語言。是用來控制網(wǎng)頁行為的，它能使網(wǎng)頁可交互。

JavaScript和Java 是完全不同的語言，不論是概念還是設(shè)計(jì)。但是基礎(chǔ)語法類似。

JavaScript在1995年由 Brendan Eich 發(fā)明，并于1997年成為ECMA標(biāo)準(zhǔn)

ECMAScript 6(ES6)是最新的JavaScript版本(發(fā)布于2015年)。

??學(xué)習(xí)內(nèi)容

JS主要學(xué)習(xí)以下內(nèi)容：?

JavaScript是控制網(wǎng)頁行為的，因此需要引入到HTML文檔，而引入的方式本文會(huì)有講解
Java和JavaScript毫無聯(lián)系，只是名字有點(diǎn)相似，但是在基礎(chǔ)語法方面類似，并且JavaScript是一門弱類型語言，且有單獨(dú)的數(shù)據(jù)類型。
JS函數(shù)不同于Java函數(shù)，主要用于是被設(shè)計(jì)為執(zhí)行特定任務(wù)的代碼塊。
JS對(duì)象，常用的對(duì)象，例如Array、String等，以及Json、BOM
JS事件綁定等

二.JavaScript的引入方式

將JS代碼與HTML文檔代碼結(jié)合，如此一來便可以控制網(wǎng)頁的行為，而引入方式有2種，分別為：內(nèi)部腳本和外部腳本

??內(nèi)部腳本

內(nèi)部腳本：將JS代碼引入到HTML頁面當(dāng)中

JS代碼?內(nèi)部引入?要求：

JavaScript代碼必須位于<script>? </script>標(biāo)簽之間

在HTML文檔中，可以在任意地方，放置任意數(shù)量的<script>

一般會(huì)把腳本置于<body>元素的底部，可改善顯示速度

例如：

//script可在任意位置
<html lang="en">
<head>
    <title>JS代碼</title>
    <script>/* JS代碼 */</script>
</head>

<body>  
  <script>/* JS代碼 */</script>
</body>

<script>/* JS代碼 */</script>
</html>

??外部腳本

外部腳本:將JS代碼定義在外部JS文件(xx.js 文件)中，然后引入到 HTML頁面中

JS代碼 外部引入?要求：

外部JS文件中，只包含]S代碼，不包含<script>標(biāo)簽

<script>標(biāo)簽不能自閉合

引入語法：<script src="js文件"></script>

例如：

//js文件--new.js
   代碼文件

//HTML文件---old.html
<html lang="en">
<head>
    <title>JS代碼</title>
</head>

<body>
    <script src="new.js"></script>
    //自閉合：<script src="new.js"/>  錯(cuò)誤，不可以這樣
</body>

</html>

三.JavaScript的基礎(chǔ)語法

基礎(chǔ)語法包括三種：語法書寫、變量、數(shù)據(jù)類型和運(yùn)算符及流程控制語句

注：JavaScript是弱類型語言、JavaScript的運(yùn)算符和流程控制語句和Java是十分相似的。

??語法的書寫

JavaScript語法的基本要求：

區(qū)分大小寫:與Java 一樣，變量名、函數(shù)名以及其他一切東西都是區(qū)分大小寫的

每行結(jié)尾的分號(hào)可有可無，但是建議大家使用。

注釋:? ?單行注釋: //注釋內(nèi)容 ????????多行注釋: /*注釋內(nèi)容*/

大括號(hào)代表代碼塊

JavaScript的輸出形式有三種方式:

window.alert()

將括號(hào)的內(nèi)容寫在警告框之中，瀏覽器負(fù)責(zé)彈出，注：可以將window.省略，直接使用alert()

document.write()

將括號(hào)中的信息填入到網(wǎng)頁之中

console.log()

將括號(hào)內(nèi)的內(nèi)容寫入控制臺(tái)，控制臺(tái)：網(wǎng)頁->右擊 "檢查" ->點(diǎn)擊 "console"

代碼示例：

<html lang="en">
<head>
    <title>JS輸出</title>
</head>
<body>
    <script>
        window.alert("我喜歡學(xué)習(xí)");
        document.write("我喜歡Java");
        console.log("我喜歡中國");
    </script>
</body>
</html>

輸出結(jié)果：

JavaWeb第三章：JavaScript的全面知識(shí),Java-web,javascript,開發(fā)語言,ecmascript

??變量?

? ? ? ?JavaScript的變量聲明不像Java，會(huì)使用各種數(shù)據(jù)類型聲明，目前JavaScript有兩種關(guān)鍵字可以定義變量，分別為：var（全局變量）、let（局部變量）
示例：var a=10; let b=20
變量名需要遵循如下規(guī)則:

?組成字符可以是任何字母、數(shù)字、下劃線()或美元符號(hào) (S)

數(shù)字不能開頭

建議使用駝峰命名

JavaScript是一門弱類型語言，變量可以存放各種類型的值。因此存在著原本的值被其他類型替換

ECMAScript 6新增了let（局部變量）、const（常量）

?? 全局變量? ? ??

? ? ? 關(guān)鍵字：var? ? ?特點(diǎn)：1、作用域很大? ?2、可重復(fù)定義

<script>
{
    var a=10;
    var a="tq02";
}
   alert(a);  
</script>

其中a被定義了兩次，分別為10和"tq02"，而最后定義是tq02，因此a為tq02。

?局部變量

????關(guān)鍵字：let? ? ? 特點(diǎn)：1、作用域?yàn)樗诘拇a塊? ? 2、不可以重復(fù)聲明

<html lang="en">
<head>
    <title>JS輸出</title>
</head>
<body>
    <script>
        var a=10;
        var a="tq02";
        //不可以重復(fù)聲明
        //let a="20";
        {
            let a=20;
            alert(a);  //警告框輸出為20；出了代碼塊就失效了
        }
        window.alert(a);
        document.write("我喜歡Java");
        console.log("我喜歡中國");
    </script>
</body>
</html>

?常量

關(guān)鍵字：const? ? ? 特點(diǎn)：一旦聲明，常量的值就不可以改變，編譯時(shí)，不會(huì)報(bào)錯(cuò)，但無法編譯成功

<html lang="en">
<head>
    <title>JS輸出</title>
</head>
<body>
    <script>
        const a=10;
        //  a="tq02"
        window.alert(a);
    </script>
</body>
</html>

???JavaScript的數(shù)據(jù)類型

????????因?yàn)镴avaScript是弱類型語言，在定義變量時(shí)，不用指定數(shù)據(jù)類型，但是JavaScript是存在數(shù)據(jù)類型的，JavaScript數(shù)據(jù)類型分為原始類型、引用類型?，引用類型就是JS函數(shù)，在下一章有詳細(xì)講解，我們主要講解原始類型

原始類型	取值
number	數(shù)字（小數(shù)、整數(shù)、NAN（not a numer））
string	字符串，單雙引號(hào)皆可
boolean	true、false
null	對(duì)象為空
undefined	當(dāng)聲明的變量未初始化時(shí)，默認(rèn)為underfined

問：在平時(shí)中我們應(yīng)該如何查看變量的元素類型呢？

答：使用關(guān)鍵字：typeof

<script>
//number類型
    alert(typeof 3);
    alert(typeof 3.15);

//string
    alert(typeof "tq02");
    alert(typeof 'tq02');

//boolean
    alert(typeof true);
    alert(typeof false);

//object
   alert(typeof null);

//underfined
    var a;
    alert(typeof a);

而細(xì)心的人一定可以發(fā)現(xiàn)，為什么null的數(shù)據(jù)類型是object?。?/p>

官方作出的解釋：這實(shí)際上是 JavaScript 最初實(shí)現(xiàn)中的一個(gè)錯(cuò)誤，然后被 ECMAScript 沿用了?，F(xiàn)在，null 被認(rèn)為是對(duì)象的占位符，從而解釋了這一矛盾，但從技術(shù)上來說，它仍然是原始值。

??JavaScript運(yùn)算符

?運(yùn)算符的講解

JavaScript運(yùn)算符
算數(shù)運(yùn)算符?	? ? ? + ? ? ?— ? ?* ? ? ?/ ? ? %? ?++? ?--
關(guān)系運(yùn)算符?	? ?>? <? ?>=? ? <= ? ?!= ? ?==? ? ===
邏輯運(yùn)算符?	? ?&& ? ? ? \|\| ? ！
條件（三目）運(yùn)算符?	條件表達(dá)式？true_value：false_value
賦值運(yùn)算符?	?= ? ? +=? ? ?*=? ?!=? ? - =? ? /=? ? ?%=? ?

JavaScript的運(yùn)算符和Java大致一樣，但是不同的就在于 ===?不同于==， ===表示的是值與類型相同，而==為值相同

例如：

<script>
    a=10;
    alert(a=="10")  //true
    alert(a==="10")  //false
<script>

如上圖，a=="10"時(shí)，a會(huì)自動(dòng)進(jìn)行類型裝換，因此相等，而a==="10",錯(cuò)誤，因?yàn)轭愋筒煌?/p>

?類型轉(zhuǎn)換

類型裝換分2種，字符串轉(zhuǎn)換成數(shù)字，其他類型轉(zhuǎn)換為boolean類型。

字符串轉(zhuǎn)換為數(shù)字

將字符串字面值轉(zhuǎn)換為數(shù)字，如果字面值不是數(shù)字，則轉(zhuǎn)換為NaN。

而在轉(zhuǎn)換的過程中有幾個(gè)特別注意的。
<script>
    parseInt("12")  //12
    parseInt("ABC12") //NaN
    parseInt("12AB")   //12
</script>
注：如果字符串是數(shù)字+字母，則裝換為前面的數(shù)字

其他類型轉(zhuǎn)換為boolean類型

Number：0 和 NaN為false 其他均為true

String：空字符串為false? 其他轉(zhuǎn)換為true

null和unde：均為false

代碼示例：
<script>
    if(0){            //0為false，不成立
        alert("”0轉(zhuǎn)換為false");
    }
    if(NaN){        //NaN為false，不成立
        alert("NaN轉(zhuǎn)換為false");
    }
    if(1){
        alert("1轉(zhuǎn)換為true");
    }

    if(""){            //空字符串為false，不成立
        alert("false");
    }
    if("tq02"){        //字符串為true，
        alert("true")
    }

if(null||undefined){   //為false，不成立，不執(zhí)行
    alert(false);
}
?注："? "不是空字符串，中間含有空格，因此為true

??流程控制語句

JavaScript流程控制語句有以下幾種，用法和Java是一致的。

if....else if.....else

switch

for

while

do...while

四.JS函數(shù)

函數(shù)：被設(shè)計(jì)為執(zhí)行特定任務(wù)的代碼塊，通過使用關(guān)鍵字 function進(jìn)行定義。

語法格式：
第一種定義方法
function 函數(shù)名(參數(shù)1,參數(shù)2..){
        //執(zhí)行的代碼
}

第二種定義方法
var 變量名=function(參數(shù)1，參數(shù)2）{
        //待執(zhí)行代碼
    }
注：1、形式參數(shù)不需要類型。因?yàn)镴avaScript是弱類型語言

? ? ? ?2、返回值也不需要定義類型，可以在函數(shù)內(nèi)部直接使用return返回即可

第一種定義方法代碼展示：

//注：形式參數(shù)不需要類型，所以直接為參數(shù)名
function  add(a,b){
    return a+b;
}

var result=add(10,20);

?第二種定義方法代碼展示：

var result=add(a,b){
    return a+b;
};
    //函數(shù)調(diào)用的方法一樣
add(20,30);

?函數(shù)調(diào)用時(shí)，需要注意一點(diǎn)，函數(shù)調(diào)用時(shí)，可以傳遞任意個(gè)數(shù)的參數(shù)，但是函數(shù)只接收前幾個(gè)。

例如：

var result=add(a,b){  //只接收20和30
    return a+b;
};
    
add(20,30，50,60,70);

五.JS對(duì)象

JavaScript中含有很多對(duì)象，官方資料查找：https://www.w3school.com.cn/

而我們主要講解3種對(duì)象，JS當(dāng)中最為重要的Array、String、JSON

??Array講解

?Array基本知識(shí)

Array對(duì)象，我們很熟悉，用于定義數(shù)組的。

定義方法：

?var? 變量名 =new Array(元素列表）;

var? ?變量名=[ 元素列表 ];

訪問方法：

變量名[ 下標(biāo)值 ]? ? ? ? ?注：和Java一樣，從下標(biāo)0開始。

特點(diǎn)：長(zhǎng)度可變、類型可變

長(zhǎng)度可變講解

<script>
    var a=new Array(1,2,3,4);
    a[10]=50;
</script>

????????如上述代碼，我定義了一個(gè)數(shù)組，長(zhǎng)度為4位，然后我在下標(biāo)為9的位置上，賦值為50，并沒有出錯(cuò)，而有人會(huì)問那么下標(biāo)4到下標(biāo)8的值為什么呢？由于沒有賦值，因此為默認(rèn)值undefined。

類型可變講解

<script>
    var a=new Array(1,2,3,4);
    a[10]=50;
    a[6]="tq02";
</script>

? ? ? ? 在下標(biāo)為5的位置上，賦值了tq02，而并沒有報(bào)錯(cuò)，正常編譯。

?Array之屬性與方法

Array常用屬性：length。? ? ?作用：獲取數(shù)組長(zhǎng)度

Array常用方法：

forEach()? ? ? ?作用：遍歷數(shù)組，遍歷數(shù)組中有值的元素。

push()? ? ? ? ? ?作用：添加元素，可一次性添加多個(gè)元素。

splice()? ? ? ? ? 作用：刪除元素，從某個(gè)下標(biāo)刪到某個(gè)下標(biāo)。

forEach()方法

<script>
        var a=[1,2,3,4,5,6,7,8];
        a.forEach(function(e){
             alert(e);
        })
    </script>

額外講一個(gè)箭頭函數(shù)，將函數(shù)關(guān)鍵字function刪去，如果有形參就使用，沒有就空著，然后打上箭頭(=>)。其他不變。例如將上述代碼修改為箭頭函數(shù),使代碼更為簡(jiǎn)潔
<script>
        var a=[1,2,3,4,5,6,7,8];
        a.forEach((e)=>{
             alert(e);
        })
    </script>

push()方法

    <script>
        var a=[1,2,3,4,5,6,7,8];
        a.push(3,4,5);     //數(shù)組a添加了3個(gè)值
    </script>

splice()方法

    <script>
        var a=[1,2,3,4,5,6,7,8];
        a.splice(2,5);     //從下標(biāo)值2開始刪到下標(biāo)值5
    </script>

??String講解

String字符串對(duì)象創(chuàng)建方法有2種：

var 變量名 = new String("....");

var 變量名="....";

?String之屬性與方法

String常用屬性：length。? ? ?作用：獲取字符串長(zhǎng)度

String常用方法：

charAt()? ? ? ? ? ? ? ? 作用：返回指定下標(biāo)值的字符

indexOf（）? ? ? ? ?作用：檢索字符串

trim()? ? ? ? ? ? ? ? ? ? 作用：去除字符串兩邊的空格

substring()? ? ? ? ? ? 作用：提取字符串中兩個(gè)指定索引號(hào)之間的字符

charAt() 方法

  <script>
        var a="abcdefg";
        alert(a.charAt(3));    //彈出下標(biāo)為3的d
 </script>

indexOf()方法

   
  <script>
        var a="abcdefg";
          alert(a.indexOf("cd"));   //檢索到下標(biāo)為2
 </script>

trim()方法

<script>
        var a="  abcdefg   ";
        alert(a.trim());  //將字符串兩端的空格去除
 </script>

substring()方法

<script>
        var a="abcdefghigk";
        alert(a.substring(3,8));  //截取下標(biāo)為3的d到下標(biāo)7的h
  </script>                       // 含頭不含尾，所以不含有下標(biāo)為8的值

??JSON對(duì)象

?自定義對(duì)象

自己使用編譯器定義一個(gè)對(duì)象，以便操作。

語法格式：var? 對(duì)象名{

? ? ? ? ? ? ? ? ? ? ? ? 屬性名1：屬性值,

????????????????????????屬性名2：屬性值,

? ? ? ? ? ? ? ? ? ? ? ? ........? :? ? .........,

? ? ? ? ? ? ? ? ? ? ? ? 函數(shù)名(形參列表）{ }

??????????????????}；

調(diào)用方法：1、對(duì)象名.屬性名? ? ? ?2、對(duì)象名.函數(shù)名

?JSON

概念：JavaScript Object? Notation，JavaScript對(duì)象標(biāo)記法

JSON是通過JavaScript對(duì)象標(biāo)記法書寫的文本。

注意了，這是文本，也就是字符串。而對(duì)象就是自定義對(duì)象，由于是字符串，所以大括號(hào)里的屬性名也需要雙引號(hào)。

基礎(chǔ)語法：var 變量名='{"key1":value1,? ? ?"key2":value2,? ...............? }';

value數(shù)據(jù)類型：數(shù)字（整數(shù)、浮點(diǎn)數(shù)）、字符串（雙引號(hào)當(dāng)中）、邏輯值（true、false）、數(shù)字（方括號(hào)中）、對(duì)象（花括號(hào)中）?

例如：

var a='{
    "name":"tq02",
    "sex":"男"，
    "age"：22，
    "addr":["背景"，"上海"，"西安"]
    }'

問：如何調(diào)用JSON中key對(duì)應(yīng)的value的值？

答：使用關(guān)鍵字parse，將json字符串轉(zhuǎn)換 js對(duì)象? ?

問：那么可以講 js對(duì)象轉(zhuǎn)換為 JSON字符串嘛？

答：可以，使用stringify關(guān)鍵字進(jìn)行轉(zhuǎn)換。

<script>
    var a='{ "name":"tq02", "age":22 , "addr": ["北京","上海","四川"]}';
        var j=JSON.parse(a);    //轉(zhuǎn)換為了js對(duì)象
        alert(j.addr);

        alert(JSON.stringify(j)); //再次轉(zhuǎn)換為了JSON字符串
</script>

六.JS之BOM

概念：Browser 0bject Model 瀏覽器對(duì)象模型，允許avaScript與瀏覽器對(duì)話，JavaScript 將瀏覽器的各個(gè)組成部分封裝為對(duì)象。也就是說BOM就是由對(duì)象組成。

BOM組成：

window：瀏覽器窗口對(duì)象

Navigator：瀏覽器對(duì)象主要是瀏覽器的應(yīng)用名稱、版本和內(nèi)核

Screen：屏幕對(duì)象

History：歷史記錄對(duì)象

Location：瀏覽器的地址欄對(duì)象

??window

問：如何使用window對(duì)象？

答：直接使用window就可以了

問：如何調(diào)用window對(duì)象的方法或者屬性？

答：使用window.對(duì)象/方法? 對(duì)了，使用方法時(shí)，可以省略window.

常用屬性：

history: 對(duì) History 對(duì)象的只讀引用。
location: 用于窗口或框架的 Location 對(duì)象。
navigator: 對(duì)Navigator 對(duì)象的只讀引用。

常見的方法：

alert(): 顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框
confirm(): 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框，并且有返回值
setlnterval(): 按照指定的周期 (以毫秒計(jì))來調(diào)用函數(shù)或計(jì)算表達(dá)式
setTimeout(): 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。

<script>  
  alert("tq02");
        confirm("你確定刪除嘛");
       
       //每?jī)擅雸?zhí)行一次
        var i=0;
        setInterval(()=>
        {
            document.write(i++);
        },2000)

        //兩秒之后執(zhí)行該函數(shù)
        setTimeout(()=>{
            document.write(5000);
        },2000)

    </script>

??Location

Location：地址欄對(duì)象

使用方法：window.location，由于window.可以省略，因此直接使用location

屬性：href：設(shè)置或返回完整的URL。

<script>

    location.;
</script>

七.JS之DOM

????????概念：Document Obiect Model，W3C(萬維網(wǎng)聯(lián)盟)的標(biāo)準(zhǔn)，文檔對(duì)象模型，定義了訪HTML和XML文檔的標(biāo)準(zhǔn)，分為3個(gè)不同的部分：1.Core DOM、2.XMLDOM、3.HTML DOM

1.Core DOM，將標(biāo)記語言的各個(gè)組成部分封裝為對(duì)應(yīng)的對(duì)象:

Document: 整個(gè)文檔對(duì)象? ? ? ? 封裝的是整個(gè)文本
Element:元素對(duì)象? ? ? ?封裝了文本的所有的標(biāo)簽
Attribute:屬性對(duì)象? ? ? ?封裝了所有標(biāo)簽中的屬性
Text:文本對(duì)象? ? ? ? ? ? ? 封裝了所有標(biāo)簽之間的文本
Comment: 注釋對(duì)象? ? 封裝了文本所有的注釋

2.XMLDOM-XML 文檔的標(biāo)準(zhǔn)模型，核心DOM的子集。

3.HTML DOM-HTML ，JavaScript可以通過DOM，進(jìn)而對(duì)HTML進(jìn)行操作：

改變HTML元素的內(nèi)容
改變HTML元素的樣式(CSS)
對(duì)HTMLDOM 事件作出反應(yīng)
添加和刪除HTML元素

注：我們主要學(xué)習(xí)HTML DOM-HTML、主要學(xué)習(xí)：如何獲取該元素對(duì)象、如何修改該對(duì)象內(nèi)容

??如何獲取該元素對(duì)象

HTML中的HTML元素可以通過Document對(duì)象獲取，而Document對(duì)象是通過window對(duì)象獲取的。

而Document對(duì)象提供了以下以下獲取HTML元素對(duì)象的函數(shù):

根據(jù)id屬性值獲取，返回單個(gè)Element對(duì)象? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
```
var h1 = document.getElementById( 'h1');
```
根據(jù)標(biāo)簽名稱獲取，返回Element對(duì)象數(shù)組? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
```
var divs = document.getElementsByTagName( 'div');
```
根據(jù)name屬性值獲取，返回Element對(duì)象數(shù)組? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
```
var hobbys = document.getElementsByName( 'hobby');
```
? ?根據(jù)class屬性值獲取，返回Element對(duì)象數(shù)組? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
```
var clss = document.getElementsByClassName('cls');
```
完整代碼示例：? ? ? ?

<html lang="en">
<head>

    <title>Document</title>
    <img id="h1" src="圖片鏈接"><br><br>

    <div class="cls">csdn官網(wǎng)</div>  <br>
    <div class="cls">tq02網(wǎng)頁</div>  <br>

    <input type="checkbox" name="hobby">電影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戲

</head>
<body>
    
    <script>
         //1.獲取元素，根據(jù)id名獲取
        var img=document.getElementById('h1');
        alert(img);

        //2.根據(jù)標(biāo)簽獲取
        var divs=document.getElementsByTagName('div');
        for(let i=0;i<divs.length;i++){
            alert(divs[i]);
        }
        //根據(jù)name屬性值獲取
        var hobbys = document.getElementsByName( 'hobby');
        for(let i=0;i<hobbys.length;i++){
            alert(hobbys[i]);
        }

        //根據(jù)class屬性值獲取
        var clss = document.getElementsByClassName('cls');
        for(let i=0;i<clss.length;i++){
            alert(clss[i]);
        }

    </script>

</body>
</html>

??修改文本內(nèi)容? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

??????通過DOM修改文本內(nèi)容，我們需要使用到getElementsByClassName()方法;以及innerHTML屬性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

代碼示例? ------ 將csdn官網(wǎng)文字變?yōu)閯澣螒颍?/p>

<html lang="en">
<head>

    <title>Document</title>
    <img id="h1" src="圖片鏈接"><br><br>

    <div class="cls">csdn官網(wǎng)</div>  <br>
    <div class="cls">tq02網(wǎng)頁</div>  <br>
</head>
<body>
    
    <script>
        var a=doucument.getElementByClassName('cls');
        var divs=a[0];
        divs.innnerHTML="劃拳游戲";
</script>

</html>

八.事件監(jiān)聽

事件監(jiān)聽，顧名思義，分為事件和監(jiān)聽，兩者相輔相成。缺一不可。

事件：HTML事件指發(fā)生在HTML元素上的'事情'，比如：按鈕被點(diǎn)擊，鼠標(biāo)移動(dòng)，按下鍵盤等等。

而計(jì)算機(jī)是如何監(jiān)聽到事件的發(fā)生呢？

答：通過事件綁定

??常見事件

事件名	說明
onclick	鼠標(biāo)單擊事件
onblur	元素失去焦點(diǎn)
onfocus	元素獲得焦點(diǎn)
onload	某個(gè)頁面或圖像被完成加載
onsubmit	當(dāng)表單提交時(shí)觸發(fā)該事件
onkeydown	某個(gè)鍵盤的鍵被按下
onmouseover	鼠標(biāo)被移到某元素之上
onmouseout	鼠標(biāo)從某元素移開

而下面的事件綁定，我們使用onclick

??事件綁定

? ? ? ? 事件綁定，有兩種方式

方式一：通過HTML標(biāo)簽的事件屬性進(jìn)行綁定

<input type="button" onclick="on()" value="按鈕1">
<script>
    function on(){alert(!我被點(diǎn)擊了!');
    }
</script>

解析：當(dāng)點(diǎn)擊按鈕時(shí)，我們就可以通過事件屬性onclick,所綁定的on()方法，然后調(diào)用script中的on()方法

方式二：通過 DOM 元素屬性綁定

<input type="button" id="btn" value="按鈕2">
<script>
    document.getElementById('btn' ).onclick=function(){
        alert('我被點(diǎn)擊了!);
    }
</script>

解析：通過document獲取指令DOM元素，然后再通過onclick屬性來綁定一個(gè)函數(shù)。

總結(jié)

????????看到這里，JavaScript的基本內(nèi)容已經(jīng)學(xué)會(huì)了，理論已經(jīng)有了，是時(shí)候進(jìn)行實(shí)踐操作了，JavaScript最重要最難的內(nèi)容是DOM和事件監(jiān)聽，本文內(nèi)容顯示有限，如果想更加深入學(xué)習(xí)，還是需要去看視頻進(jìn)行加一步學(xué)習(xí)。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ------------------懶惰的tq02文章來源地址http://www.zghlxwxcb.cn/news/detail-561095.html

到了這里，關(guān)于JavaWeb第三章：JavaScript的全面知識(shí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！