国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<address id="snvbr"><pre id="snvbr"><strike id="snvbr"></strike></pre></address>

【JavaWeb】JavaScript

2年前作者：晚風(fēng)Dai分類：Toy博客閱讀(16)違法舉報

這篇具有很好參考價值的文章主要介紹了【JavaWeb】JavaScript。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

1、JavaScript 介紹

Javascript 語言誕生主要是完成頁面的數(shù)據(jù)驗證。因此它運(yùn)行在客戶端，需要運(yùn)行瀏覽器來解析執(zhí)行 JavaScript 代碼。

JS 是 Netscape 網(wǎng)景公司的產(chǎn)品，最早取名為 LiveScript;為了吸引更多 java 程序員。更名為 JavaScript。?

JS 是弱類型，Java 是強(qiáng)類型。

弱類型就是類型可變，

強(qiáng)類型就是定義變量時類型已經(jīng)確定，并且不可變?

特點(diǎn)：

1. 交互性（它可以做的就是信息的動態(tài)交互）

2. 安全性（不允許直接訪問本地硬盤）

3. 跨平臺性（只要是可以解釋 JS 的瀏覽器都可以執(zhí)行，和平臺無關(guān)）

2、JavaScript 和 html 代碼的結(jié)合方式

2.1、第一種方式

只需要在 head 標(biāo)簽中，或者在 body 標(biāo)簽中，使用 script 標(biāo)簽來書寫 JavaScript 代碼

代碼舉例說明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("hello javaScript!");
    </script>
</head>
<body>

</body>
</html>

運(yùn)行結(jié)果如下：

【JavaWeb】JavaScript

其中alert是JavaScript語言提供的一個警告框函數(shù)。它可以接收任意類型的參數(shù)，這個參數(shù)就是警告框的提示信息

2.2、第二種方式

使用 script 標(biāo)簽引入單獨(dú)的 JavaScript 代碼文件文件目錄：

文件目錄:

【JavaWeb】JavaScript

?html 代碼內(nèi)容：

現(xiàn)在需要使用script引入外部的js文件來執(zhí)行 src 屬性專門用來引入js文件路徑（可以是相對路徑，也可以是絕對路徑）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="1.js"></script>
</head>
<body>

</body>
</html>

運(yùn)行結(jié)果如下：

【JavaWeb】JavaScript

?script 標(biāo)簽可以用來定義 js 代碼，也可以用來引入 js 文件但是，兩個功能二選一使用。不能同時使用兩個功能

舉例：我們在引入了js文件的script標(biāo)簽里面再寫一個alter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
    <script type="text/javascript" src="1.js">
        alert("11111111111111111")
    </script>

</head>
<body>

</body>
</html>

?運(yùn)行結(jié)果

【JavaWeb】JavaScript

點(diǎn)完確定后

【JavaWeb】JavaScript

假如我們想實(shí)現(xiàn)如上代碼中script標(biāo)簽里面彈出警告框顯示11111111111111111應(yīng)該怎么辦？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="1.js"></script>

    <script type="text/javascript">
        alert("11111111111111111");
    </script>
</head>
<body>

</body>
</html>

運(yùn)行結(jié)果：

先彈出

【JavaWeb】JavaScript

點(diǎn)擊確定后：

【JavaWeb】JavaScript

再寫一個script標(biāo)簽就可以了，代碼執(zhí)行順序從上到下。

3、變量

什么是變量？變量是可以存放某些值的內(nèi)存的命名。

3.1：JavaScript 的變量類型：

? ? ? ? ? ? ? ? ? ? ? ? ?數(shù)值類型： number

? ? ? ? ? ? ? ? ? ? ? ? ?字符串類型： string

? ? ? ? ? ? ? ? ? ? ? ? ?對象類型： object

? ? ? ? ? ? ? ? ? ? ? ? ?布爾類型： boolean

? ? ? ? ? ? ? ? ? ? ? ? ?函數(shù)類型： function

3.2：JavaScript 里特殊的值：

? ? ? ? ? ? ? ? ? ? ?undefined 未定義，所有 js 變量未賦于初始值的時候，默認(rèn)值都是 undefined.

? ? ? ? ? ? ? ? ? ? ?null 空值

? ? ? ? ? ? ? ? ? ? ?NaN 全稱是：Not a Number。非數(shù)字。非數(shù)值

3.3：JS 中的定義變量格式：

? ? ? ? ? ? ? ? ? ? var 變量名;

? ? ? ? ? ? ? ? ? ? var 變量名 = 值;

綜上三點(diǎn)的示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i;
        alert(i);
    </script>
</head>
<body>

</body>
</html>

運(yùn)行結(jié)果如下：

【JavaWeb】JavaScript

typeof()是JavaScript語言提供的一個函數(shù)，它可以獲取變量類型的數(shù)據(jù)類型返回。

?我們給i賦值，并查看它的類型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i;
        alert(i);
        i = 12;
        alert( typeof(i) );
    </script>
</head>
<body>

</body>
</html>

運(yùn)行結(jié)果：

? 【JavaWeb】JavaScript

?因為js是弱類型。我們給“i”賦值“abc”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i;
        alert(i);
        i = 12;
        alert( typeof(i) );
        i = "abc";
        alert(typeof (i));
    </script>
</head>
<body>

</body>
</html>

當(dāng)我們將“i”賦值為“abc”查看它的類型

【JavaWeb】JavaScript

如果我們將一個數(shù)值跟一個字符串相乘會得到什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i;
        alert(i);
        i = 12;
        alert( typeof(i) );
        i = "abc";
        alert(typeof (i));

        var a = 12;
        var b = "abc";
        alert( a * b );
    </script>
</head>
<body>

</body>
</html>

?相乘結(jié)果如下：

【JavaWeb】JavaScript

?5、關(guān)系（比較）運(yùn)算

等于： == 等于是簡單的做字面值的比較

全等于： === 除了做字面值的比較之外，還會比較兩個變量的數(shù)據(jù)類型

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var a = "12";
        var b = 12;

        alert( a == b ); // true
        alert( a === b ); // false

    </script>
</head>
<body>

</body>
</html>

運(yùn)行第一個警示框

【JavaWeb】JavaScript

第二個：

【JavaWeb】JavaScript

6、邏輯運(yùn)算

且運(yùn)算： &&

或運(yùn)算： ||

取反運(yùn)算： !

在 JavaScript 語言中，所有的變量，都可以做為一個 boolean 類型的變量去使用。

0 、null、 undefined、""(空串) 都認(rèn)為是 false；

舉例說明：

1.var a = 0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = 0;
        if (a) {
            alert("零為真");
        } else {
            alert("零為假");
        }
    </script>
</head>
<body>

</body>
</html>

運(yùn)行結(jié)果如下：

【JavaWeb】JavaScript

?2.var a = null;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = null;
        if (a) {
            alert("null為真");
        } else {
            alert("null為假");
        }
    </script>
</head>
<body>

</body>
</html>

運(yùn)行結(jié)果如下：

【JavaWeb】JavaScript

?3.var a = undefined;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = undefined;
        if (a) {
            alert("undefined為真");
        } else {
            alert("undefined為假");
        }
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

?4：a = "";(空串，一個空格都不能有)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = "";
        if (a) {
            alert("空串為真");
        } else {
            alert("空串為假");
        }
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

?

&& 且運(yùn)算。

有兩種情況：

第一種：當(dāng)表達(dá)式全為真的時候。返回最后一個表達(dá)式的值。

第二種：當(dāng)表達(dá)式中，有一個為假的時候。返回第一個為假的表達(dá)式的值

第一種示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var a = "abc";
        var b = true;
        var d = false;
        var c = null;

        alert( a && b );//true
        alert( b && a );//abc(true)
    </script>
</head>
<body>

</body>
</html>

? 【JavaWeb】JavaScript

【JavaWeb】JavaScript

第二種示例代碼：?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var a = "abc";
        var b = true;
        var d = false;
        var c = null;

        alert( a && d ); // false
        alert( a && c ); // null
    </script>
</head>
<body>

</body>
</html>

運(yùn)行結(jié)果：

【JavaWeb】JavaScript

【JavaWeb】JavaScript

|| 或運(yùn)算

第一種情況：當(dāng)表達(dá)式全為假時，返回最后一個表達(dá)式的值

第二種情況：只要有一個表達(dá)式為真。就會把回第一個為真的表達(dá)式的值

第一種情況示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var a = "abc";
        var b = true;
        var d = false;
        var c = null;

        alert( d || c ); // null
        alert( c || d ); //false
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

【JavaWeb】JavaScript

第二種示例代碼?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var a = "abc";
        var b = true;
        var d = false;
        var c = null;

        alert( a || c ); //abc
        alert( b || c ); //true
    </script>
</head>
<body>

</body>
</html>

? 【JavaWeb】JavaScript

【JavaWeb】JavaScript

并且 && 與運(yùn)算和 ||或運(yùn)算有短路。

短路就是說，當(dāng)這個&&或||運(yùn)算有結(jié)果了之后。后面的表達(dá)式不再執(zhí)行

7、數(shù)組（*****重點(diǎn)）

7.1、數(shù)組定義方式 JS 中數(shù)組的定義：

格式： var 數(shù)組名 = []; // 空數(shù)組

? ? ? ? ? ? var 數(shù)組名 = [1 , ’abc’ , true]; // 定義數(shù)組同時賦值元素

示例代碼：

1:定義一個空數(shù)組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr = []; // 定義一個空數(shù)組
        alert( arr.length ); // 0
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

?問：如上數(shù)值是否還能被賦值？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr = []; // 定義一個空數(shù)組
        arr[0] = 12;
        alert( arr[0] );//12
        alert( arr.length ); // 0
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

【JavaWeb】JavaScript

?如上示例說明JavaScript中可一個一個空數(shù)組賦值

如果我們將數(shù)組下表為2的賦值會怎么樣？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr = []; // 定義一個空數(shù)組
        arr[0] = 12;
        arr[2] = "abc";
        alert(arr.length); //3
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

綜上所述：javaScript語言中的數(shù)組，只要我們通過數(shù)組下標(biāo)賦值，那么最大的下標(biāo)值，就會自動的給數(shù)組做擴(kuò)容操作。

?我們可以看到數(shù)組下標(biāo)為1的沒有定義那它的值是多少？

下面我們遍歷一下數(shù)組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr = []; // 定義一個空數(shù)組
        arr[0] = 12;
        arr[2] = "abc";
        
        for (var i = 0; i < arr.length; i++){
            alert(arr[i]);
        }
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

【JavaWeb】JavaScript

【JavaWeb】JavaScript

如果定義數(shù)組時同時賦值元素是否能自動的給數(shù)組做擴(kuò)容操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr = [true,1];
        arr[0] = 12;
        arr[2] = "abc";

        for (var i = 0; i < arr.length; i++){
            alert(arr[i]);
        }
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

【JavaWeb】JavaScript

【JavaWeb】JavaScript

?綜上所述：定義數(shù)組時同時賦值元素是能自動的給數(shù)組做擴(kuò)容操作。

?注：只有在賦值的時候才能做擴(kuò)容操作，讀的時候不能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr = [true,1];

        alert(arr[9]);// undefined

        alert(arr.length);//2
    </script>
</head>
<body>

</body>
</html>

? 【JavaWeb】JavaScript

【JavaWeb】JavaScript

8、函數(shù)(*****重點(diǎn))

8.1、函數(shù)的二種定義方式

第一種，可以使用 function 關(guān)鍵字來定義函數(shù)。

使用的格式如下:

function 函數(shù)名(形參列表){

函數(shù)體

}

示例代碼：

我們定義一個無參函數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 定義一個無參函數(shù)
        function fun(){
            alert("無參函數(shù)fun()被調(diào)用了");
        }
        // 函數(shù)調(diào)用了才會執(zhí)行
        fun();
    </script>
</head>
<body>

</body>
</html>

? 【JavaWeb】JavaScript

定義一個有參函數(shù)?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 定義一個有參函數(shù)
        function fun2(a ,b) {
            alert("有參函數(shù)fun2()被調(diào)用了 a=>" + a + ",b=>"+b);
        }

        fun2(12,"abc");
    </script>
</head>
<body>

</body>
</html>

? 【JavaWeb】JavaScript

在 JavaScript 語言中，如何定義帶有返回值的函數(shù)？

只需要在函數(shù)體內(nèi)直接使用 return 語句返回值即可！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 定義帶有返回值的函數(shù)
        function sum(num1,num2) {
            var result = num1 + num2;
            return result;
        }

        alert( sum(100,50) );
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

函數(shù)的第二種定義方式

使用格式如下：

var 函數(shù)名 = function(形參列表) { 函數(shù)體 }

?示例代碼：

1.無參

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        
        var fun = function () {
            alert("無參函數(shù)");
        }
        fun();
        
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

2.有參

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var fun2 = function (a,b) {
            alert("有參函數(shù)a=" + a + ",b=" + b);
        }
        fun2(1,2);

    </script>
</head>
<body>

</body>
</html>

? 【JavaWeb】JavaScript

3.帶返回值?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var fun3 = function (num1,num2) {
            return num1 + num2;
        }

        alert( fun3(100,200) );

    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

注：在 Java 中函數(shù)允許重載。但是在 JS 中函數(shù)的重載會直接覆蓋掉上一次的定義?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function fun() {
            alert("無參函數(shù)fun()");
        }
        
        function fun(a,b) {
            alert("有參函數(shù)fun(a,b)");
        }
        
        fun();

    </script>
</head>
<body>

</body>
</html>

? 【JavaWeb】JavaScript

?我們將兩個方法倒過來寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">


        function fun(a,b) {
            alert("有參函數(shù)fun(a,b)");
        }

        function fun() {
            alert("無參函數(shù)fun()");
        }

        fun(1,"abc");

    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

?綜合上面兩個示例我們可以知道：JS 中函數(shù)的重載會直接覆蓋掉上一次的定義

8.2、函數(shù)的 arguments 隱形參數(shù)（只在 function 函數(shù)內(nèi)）

在8.1中我們寫了重載的方法但是在JavaScript中函數(shù)的重載會直接覆蓋掉上一次的定義而我們在調(diào)用是還為什么能傳入?yún)?shù)？

就是在 function 函數(shù)中不需要定義，但卻可以直接用來獲取所有參數(shù)的變量。我們管它叫隱形參數(shù)。隱形參數(shù)特別像 java 基礎(chǔ)的可變長參數(shù)一樣。

public void fun( Object ... args );

可變長參數(shù)其他是一個數(shù)組。

那么 js 中的隱形參數(shù)也跟 java 的可變長參數(shù)一樣。操作類似數(shù)組。

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function fun() {
            alert(arguments.length);//可看參數(shù)個數(shù)
            alert(arguments[0]);
            alert("a = " + a);
            alert("無參函數(shù)fun()");
        }

        fun(1,"ad",true);

    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

【JavaWeb】JavaScript

?隱形參數(shù)怎么用呢？

需求：要求編寫一個函數(shù)。用于計算所有參數(shù)相加的和并返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function sum(num1,num2) {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                result += arguments[i];
            }
            return result;
        }

        alert( sum(1,2,3,4,5,6,7,8,9) );

    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

假如我們在中間加入一個字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function sum(num1,num2) {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                result += arguments[i];
            }
            return result;
        }

        alert( sum(1,2,3,4,"abc",5,6,7,8,9) );

    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

在JavaScript中數(shù)值跟字符串進(jìn)行相加時是在做字符串拼接

遇到這種情況如何只將數(shù)值進(jìn)行相加？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function sum(num1,num2) {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                if (typeof(arguments[i]) == "number") {
                    result += arguments[i];
                }
            }
            return result;
        }

        alert( sum(1,2,3,4,"abc",5,6,7,8,9) );

    </script>
</head>
<body>

</body>
</html>

9、JS 中的自定義對象

Object 形式的自定義對象

對象的定義：

var 變量名 = new Object(); // 對象實(shí)例（空對象）

變量名.屬性名 = 值; // 定義一個屬性

變量名.函數(shù)名 = function(){} // 定義一個函數(shù)

對象的訪問：

變量名.屬性 / 函數(shù)名();

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var obj = new Object();
        obj.name = "湯姆";
        obj.age = 18;
        obj.fun = function () {
            alert("姓名：" + this.name + " , 年齡：" + this.age);
        }
        alert(obj.name);
        obj.fun();

    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

【JavaWeb】JavaScript

{}花括號形式的自定義對象

對象的定義：

var 變量名 = {} // 空對象

var 變量名 = {?

? ? ? 屬性名：值, // 定義一個屬性

? ? ? 屬性名：值, // 定義一個屬性

? ? ? 函數(shù)名：function(){} // 定義一個函數(shù)

};

對象的訪問：

? ? ? ? ? 變量名.屬性 / 函數(shù)名();

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var obj = {
            name:"湯姆",
            age:18,
            fun : function () {
                alert("姓名：" + this.name + " , 年齡：" + this.age);
            }
        };
        
        alert(obj.name);
        obj.fun();

    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

【JavaWeb】JavaScript

10、js 中的事件

什么是事件？

事件是電腦輸入設(shè)備與頁面進(jìn)行交互的響應(yīng)。我們稱之為事件。

常用的事件：

onload 加載完成事件：頁面加載完成之后，常用于做頁面 js 代碼初始化操作

onclick 單擊事件：常用于按鈕的點(diǎn)擊響應(yīng)操作。

onblur 失去焦點(diǎn)事件：常用用于輸入框失去焦點(diǎn)后驗證其輸入內(nèi)容是否合法。

onchange 內(nèi)容發(fā)生改變事件： 常用于下拉列表和輸入框內(nèi)容發(fā)生改變后操作

onsubmit 表單提交事件：常用于表單提交前，驗證所有表單項是否合法。

事件的注冊又分為靜態(tài)注冊和動態(tài)注冊兩種：

什么是事件的注冊（綁定）？

其實(shí)就是告訴瀏覽器，當(dāng)事件響應(yīng)后要執(zhí)行哪些操作代碼，叫事件注冊或事件綁定。

靜態(tài)注冊事件：

通過 html 標(biāo)簽的事件屬性直接賦于事件響應(yīng)后的代碼，這種方式我們叫靜態(tài)注冊。

動態(tài)注冊事件：

是指先通過 js 代碼得到標(biāo)簽的 dom 對象，然后再通過 dom 對象.事件名 = function(){} 這種形式賦于事件響應(yīng)后的代碼，叫動態(tài)注冊。

動態(tài)注冊基本步驟：

? ? ?1、獲取標(biāo)簽對象

? ? ?2、標(biāo)簽對象.事件名 = fucntion(){}

onload 加載完成事件

1.靜態(tài)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //onload事件的方法
        function onloadFun(){
            alert("靜態(tài)注冊onload事件，所有代碼")
        }
        

    </script>
</head>
<body onload="onloadFun()">

</body>
</html>

【JavaWeb】JavaScript

2.動態(tài)?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //onload事件的動態(tài)注冊，是固定寫法
        window.onload = function (){
            alert("動態(tài)注冊的onload事件")
        }


    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

onclick 單擊事件

1：靜態(tài)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function onclickFun() {
            alert("靜態(tài)注冊onclick事件");
        }

    </script>
</head>
<body>
   <!-- 靜態(tài)注冊onclick事件 -->
   <button onclick="onclickFun();">按鈕1</button>
   <button>按鈕2</button>
</body>
</html>

運(yùn)行點(diǎn)擊按鈕1

【JavaWeb】JavaScript

2：動態(tài)?

document 是JavaScript語言提供的一個對象（文檔）

get 獲取

Element 元素（就是標(biāo)簽）

By 通過。。由。。經(jīng)。。。

Id id屬性

getElementById ---> 通過id屬性獲取標(biāo)簽對象?

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function onclickFun() {
            alert("靜態(tài)注冊onclick事件");
        }

        // 動態(tài)注冊onclick事件
        window.onload = function () {
            // 1 獲取標(biāo)簽對象
            var btnObj = document.getElementById("btn01");
            // 2 通過標(biāo)簽對象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("動態(tài)注冊的onclick事件");
            }
        }

    </script>
</head>
<body>
<!--靜態(tài)注冊onClick事件-->
<button onclick="onclickFun();">按鈕1</button>
<button id="btn01">按鈕2</button>
</body>
</html>

點(diǎn)擊按鈕2

【JavaWeb】JavaScript

?onblur 失去焦點(diǎn)事件

?1：靜態(tài)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        // 靜態(tài)注冊失去焦點(diǎn)事件
        function onblurFun() {
            // console是控制臺對象，是由JavaScript語言提供，專門用來向瀏覽器的控制器打印輸出， 用于測試使用
            // log() 是打印的方法
            console.log("靜態(tài)注冊失去焦點(diǎn)事件");
        }

    </script>
</head>
<body>
    用戶名:<input type="text" onblur="onblurFun();"><br/>
    密碼:<input type="text" ><br/>
</body>
</html>

當(dāng)我們點(diǎn)擊用戶名后面的方框在點(diǎn)擊空白區(qū)

【JavaWeb】JavaScript

2：動態(tài)?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        // 靜態(tài)注冊失去焦點(diǎn)事件
        function onblurFun() {
            // console是控制臺對象，是由JavaScript語言提供，專門用來向瀏覽器的控制器打印輸出， 用于測試使用
            // log() 是打印的方法
            console.log("靜態(tài)注冊失去焦點(diǎn)事件");
        }

        // 動態(tài)注冊 onblur事件
        window.onload = function () {
            //1 獲取標(biāo)簽對象
            var passwordObj = document.getElementById("password");
            //2 通過標(biāo)簽對象.事件名 = function(){};
            passwordObj.onblur = function () {
                console.log("動態(tài)注冊失去焦點(diǎn)事件");
            }
        }
    </script>
</head>
<body>
    用戶名:<input type="text" onblur="onblurFun();"><br/>
    密碼:<input id="password" type="text" ><br/>
</body>
</html>

?當(dāng)我們來回點(diǎn)擊用戶名以及密碼后面的方框時

【JavaWeb】JavaScript

onchange 內(nèi)容發(fā)生改變事件

一：靜態(tài)?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        
        function onchangeFun() {
            alert("女神已經(jīng)改變了");
        }
        
    </script>
</head>
<body>
   請選擇你心中的女神：
   <!--靜態(tài)注冊onchange事件-->
  <select onchange="onchangeFun();">
      <option>--女神--</option>
      <option>aa</option>
      <option>bb</option>
      <option>cc</option>
  </select>
</body>
</html>

?運(yùn)行下拉女生框選擇aa點(diǎn)擊確定

【JavaWeb】JavaScript

【JavaWeb】JavaScript

【JavaWeb】JavaScript

2：動態(tài)?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function onchangeFun() {
            alert("女神已經(jīng)改變了");
        }

        window.onload = function () {
            //1 獲取標(biāo)簽對象
            var selObj = document.getElementById("sel01");
            //2 通過標(biāo)簽對象.事件名 = function(){}
            selObj.onchange = function () {
                alert("男神已經(jīng)改變了");
            }
        }

    </script>
</head>
<body>
      請選擇你心中的女神：
      <!--靜態(tài)注冊onchange事件-->
      <select onchange="onchangeFun();">
          <option>--女神--</option>
          <option>aa</option>
          <option>bb</option>
          <option>cc</option>

      </select>
      
      請選擇你心中的男神：
      <select id="sel01">
          <option>--男神--</option>
          <option>AA</option>
          <option>BB</option>
          <option>CC</option>
      </select>
</body>
</html>

?跟靜態(tài)的同理操作

【JavaWeb】JavaScript

onsubmit 表單提交事件

1：靜態(tài)?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        // 靜態(tài)注冊表單提交事務(wù)
        function onsubmitFun(){
            alert("靜態(tài)注冊表單提交事件");
        }

    </script>
</head>
<body>
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="靜態(tài)注冊"/>
    </form>
</body>
</html>

點(diǎn)擊確定提交

【JavaWeb】JavaScript

【JavaWeb】JavaScript

如果表單不合法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        // 靜態(tài)注冊表單提交事務(wù)
        function onsubmitFun(){
            // 要驗證所有表單項是否合法，如果，有一個不合法就阻止表單提交
            alert("靜態(tài)注冊表單提交事件----發(fā)現(xiàn)不合法");

            return flase;
        }

    </script>
</head>
<body>
    <!--return false 可以阻止 表單提交 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="靜態(tài)注冊"/>
    </form>
</body>
</html>

2：動態(tài)

不合法，如果想跳轉(zhuǎn)就將false改成true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        // 靜態(tài)注冊表單提交事務(wù)
        function onsubmitFun(){
            // 要驗證所有表單項是否合法，如果，有一個不合法就阻止表單提交
            alert("靜態(tài)注冊表單提交事件----發(fā)現(xiàn)不合法");

            return flase;
        }

        window.onload = function () {
            //1 獲取標(biāo)簽對象
            var formObj = document.getElementById("form01");
            //2 通過標(biāo)簽對象.事件名 = function(){}
            formObj.onsubmit = function () {
                // 要驗證所有表單項是否合法，如果，有一個不合法就阻止表單提交
                alert("動態(tài)注冊表單提交事件----發(fā)現(xiàn)不合法");

                return false;
            }
        }

    </script>
</head>
<body>
    <!--return false 可以阻止 表單提交 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="靜態(tài)注冊"/>
    </form>
    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="動態(tài)注冊"/>
    </form>

</body>
</html>

10、DOM 模型

DOM 全稱是 Document Object Model 文檔對象模型

大白話，就是把文檔中的標(biāo)簽，屬性，文本，轉(zhuǎn)換成為對象來管理。那么它們是如何實(shí)現(xiàn)把標(biāo)簽，屬性，文本轉(zhuǎn)換成為對象來管理呢。

10.1、Document 對象（重點(diǎn)）

【JavaWeb】JavaScript ?

Document 對象的理解：

第一點(diǎn)：Document 它管理了所有的 HTML 文檔內(nèi)容。

第二點(diǎn)：document 它是一種樹結(jié)構(gòu)的文檔。有層級關(guān)系。

第三點(diǎn)：它讓我們把所有的標(biāo)簽都對象化

第四點(diǎn)：我們可以通過 document 訪問所有的標(biāo)簽對象。

什么是對象化？？?

舉例：有一個人有年齡：18 歲，性別：女，名字：張某某

我們要把這個人的信息對象化怎么辦！

Class Person {

? ? ? ? private int age;

? ? ? ? private String sex;

? ? ? ? private String name;

}?

那么 html 標(biāo)簽要對象化怎么辦？

<body>
  <div id="div01">div01</div>
</body>

模擬對象化，相當(dāng)于：

class Dom{

? ? ? ? private String id; // id 屬性

? ? ? ? private String tagName; //表示標(biāo)簽名

? ? ? ? private Dom parentNode; //父類

? ? ? ? private List children; // 子類結(jié)點(diǎn)

? ? ? ? private String innerHTML; // 起始標(biāo)簽和結(jié)束標(biāo)簽中間的內(nèi)容

}

10.2、Document 對象中的方法介紹（重點(diǎn)）

document.getElementById(elementId)

通過標(biāo)簽的 id 屬性查找標(biāo)簽 dom 對象，elementId 是標(biāo)簽的 id 屬性值

document.getElementsByName(elementName)

通過標(biāo)簽的 name 屬性查找標(biāo)簽 dom 對象，elementName 標(biāo)簽的 name 屬性值

document.getElementsByTagName(tagname)

通過標(biāo)簽名查找標(biāo)簽 dom 對象。tagname 是標(biāo)簽名

document.createElement( tagName)

方法，通過給定的標(biāo)簽名，創(chuàng)建一個標(biāo)簽對象。tagName 是要創(chuàng)建的標(biāo)簽名

getElementById 方法

示例代碼：

需求：當(dāng)用戶點(diǎn)擊了較驗按鈕，要獲取輸出框中的內(nèi)容。然后驗證其是否合法。

驗證的規(guī)則是：必須由字母，數(shù)字。下劃線組成。并且長度是5到12位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        /*
        * 需求：當(dāng)用戶點(diǎn)擊了較驗按鈕，要獲取輸出框中的內(nèi)容。然后驗證其是否合法。<br/>
        * 驗證的規(guī)則是：必須由字母，數(shù)字。下劃線組成。并且長度是5到12位。
        * */
        function onclickFun() {
            // 1 當(dāng)我們要操作一個標(biāo)簽的時候，一定要先獲取這個標(biāo)簽對象。
            var usernameObj = document.getElementById("username");
            // [object HTMLInputElement] 它就是dom對象
            var usernameText = usernameObj.value;
            // 如何 驗證 字符串，符合某個規(guī)則 ，需要使用正則表達(dá)式技術(shù)
            var patt = /^\w{5,12}$/;

            /*
            *  test()方法用于測試某個字符串，是不是匹配我的規(guī)則 ，
            *  匹配就返回true。不匹配就返回false.
            */
            if (patt.test(usernameText)) {
                 alert("用戶名合法！");
            } else {
                 alert("用戶名不合法！");
            }
        }
    </script>
</head>
<body>
    用戶名：<input type="text" id="username" value="mr"/>
    <button onclick="onclickFun()">較驗</button>
</body>
</html>

測試

【JavaWeb】JavaScript

【JavaWeb】JavaScript

上面代碼中用到了正則表達(dá)式，那什么是正則表達(dá)式？

?我們先到幫助文檔上看看

鏈接:https://pan.baidu.com/s/1725SNSptjfE75xEQ-4ljjA?pwd=0000?
提取碼:0000

【JavaWeb】JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >

        //表示要求字符串中，是否包含字母e
        var patt = new RegExp("e");
        var str = "abcd";
        alert(patt.test(str));

    </script>
</head>
<body>

</body>
</html>

? 【JavaWeb】JavaScript

當(dāng)我們加入'e'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >

        //表示要求字符串中，是否包含字母e
        var patt = new RegExp("e");
        var str = "abecd";
        alert(patt.test(str));

    </script>
</head>
<body>

</body>
</html>

? 【JavaWeb】JavaScript

【JavaWeb】JavaScript

我們還可以這樣寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >

        //表示要求字符串中，是否包含字母e
        var patt = /e/;
        alert(patt);
        var str = "abecd";
        alert(patt.test(str));

    </script>
</head>
<body>

</body>
</html>

? 【JavaWeb】JavaScript

【JavaWeb】JavaScript

這也是正則表達(dá)式

? 【JavaWeb】JavaScript

?示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >

        // 表示要求字符串中，是否包含字母e
         var patt = new RegExp("e");
         var patt = /e/; // 也是正則表達(dá)式對象
        // 表示要求字符串中，是否包含字母a或b或c
         var patt = /[abc]/;
        // 表示要求字符串，是否包含小寫字母
         var patt = /[a-z]/;
        // 表示要求字符串，是否包含任意大寫字母
         var patt = /[A-Z]/;
        // 表示要求字符串，是否包含任意數(shù)字
         var patt = /[0-9]/;

    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript ?我們看一下\w

? 【JavaWeb】JavaScript

?量詞示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >

        // 表示要求 字符串中是否包含至少一個a
         var patt = /a+/;
        // 表示要求 字符串中是否 *包含* 零個 或 多個a
         var patt = /a*/;
        // 表示要求 字符串是否包含一個或零個a
         var patt = /a?/;
        // 表示要求 字符串是否包含連續(xù)三個a
         var patt = /a{3}/;
        // 表示要求 字符串是否包 至少3個連續(xù)的a，最多5個連續(xù)的a
         var patt = /a{3,5}/;
        // 表示要求 字符串是否包 至少3個連續(xù)的a，
         var patt = /a{3,}/;
        // 表示要求 字符串必須以a結(jié)尾
         var patt = /a$/;
        // 表示要求 字符串必須以a打頭
         var patt = /^a/;

        // 要求字符串中是否包含 至少3個連續(xù)的a
         var patt = /a{3,5}/;
        // 要求字符串，從頭到尾都必須完全匹配
         var patt = /^a{3,5}$/;


    </script>
</head>
<body>

</body>
</html>

?回到什么的需求，我們再進(jìn)行優(yōu)化一下導(dǎo)入兩張圖片

需求：當(dāng)用戶點(diǎn)擊了較驗按鈕，要獲取輸出框中的內(nèi)容。然后驗證其是否合法。

驗證的規(guī)則是：必須由字母，數(shù)字。下劃線組成。并且長度是5到12位

【JavaWeb】JavaScript

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
     
        function onclickFun() {
            // 1 當(dāng)我們要操作一個標(biāo)簽的時候，一定要先獲取這個標(biāo)簽對象。
            var usernameObj = document.getElementById("username");
            // [object HTMLInputElement] 它就是dom對象
            var usernameText = usernameObj.value;
            // 如何 驗證 字符串，符合某個規(guī)則 ，需要使用正則表達(dá)式技術(shù)
            var patt = /^\w{5,12}$/;
            /*
            *  test()方法用于測試某個字符串，是不是匹配我的規(guī)則 ，
            *  匹配就返回true。不匹配就返回false.
            * */

            var usernameSpanObj = document.getElementById("usernameSpan");
            // innerHTML 表示起始標(biāo)簽和結(jié)束標(biāo)簽中的內(nèi)容
            // innerHTML 這個屬性可讀，可寫
            usernameSpanObj.innerHTML = "哈哈哈哈哈哈！";

            if (patt.test(usernameText)) {
                // alert("用戶名合法！");
                // usernameSpanObj.innerHTML = "用戶名合法！";
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else {
                // alert("用戶名不合法！");
                // usernameSpanObj.innerHTML = "用戶名不合法！";
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }
        }
    </script>
</head>
<body>
    用戶名：<input type="text" id="username" value="mr"/>
    <span id="usernameSpan" style="color:red;">

    </span>
    <button onclick="onclickFun()">較驗</button>
</body>
</html>

? 【JavaWeb】JavaScript

【JavaWeb】JavaScript ??

getElementsByName 方法

定義三個復(fù)選框?qū)崿F(xiàn)全選，全不選跟反選的功能

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全選
        function checkAll() {
            // 讓所有復(fù)選框都選中
            // document.getElementsByName();是根據(jù) 指定的name屬性查詢返回多個標(biāo)簽對象集合
            // 這個集合的操作跟數(shù)組 一樣
            // 集合中每個元素都是dom對象
            // 這個集合中的元素順序是他們在html頁面中從上到下的順序
            var hobbies = document.getElementsByName("hobby");
            // checked表示復(fù)選框的選中狀態(tài)。如果選中是true，不選中是false
            // checked 這個屬性可讀，可寫
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = true;
            }
        }
        //全不選
        function checkNo() {

            var hobbies = document.getElementsByName("hobby");
            // checked表示復(fù)選框的選中狀態(tài)。如果選中是true，不選中是false
            // checked 這個屬性可讀，可寫
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = false;
            }
        }
        // 反選
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");

            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;

                // if (hobbies[i].checked) {
                //     hobbies[i].checked = false;
                // }else {
                //     hobbies[i].checked = true;
                // }
            }


        }

    </script>
</head>
<body>
    興趣愛好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全選</button>
    <button onclick="checkNo()">全不選</button>
    <button onclick="checkReverse()">反選</button>
</body>
</html>

getElementsByTagName 方法：

?定義三個復(fù)選框，實(shí)現(xiàn)全選功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
     
        // 全選
        function checkAll() {
            alert( document.getElementById("btn01") );
            // document.getElementsByTagName("input");
            // 是按照指定標(biāo)簽名來進(jìn)行查詢并返回集合
            // 這個集合的操作跟數(shù)組 一樣
            // 集合中都是dom對象
            // 集合中元素順序 是他們在html頁面中從上到下的順序。
            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++){
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>

    <!--as -->
    興趣愛好：
    <input type="checkbox" value="cpp" checked="checked">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button id="btn01" onclick="checkAll()">全選</button>

</body>
</html>

注：

document 對象的三個查詢方法，如果有 id 屬性，優(yōu)先使用 getElementById 方法來進(jìn)行查詢

如果沒有 id 屬性，則優(yōu)先使用 getElementsByName 方法來進(jìn)行查詢

如果 id 屬性和 name 屬性都沒有最后再按標(biāo)簽名查 getElementsByTagName

以上三個方法，一定要在頁面加載完成之后執(zhí)行，才能查詢到標(biāo)簽對象。

10.3、節(jié)點(diǎn)的常用屬性和方法

節(jié)點(diǎn)就是標(biāo)簽對象

方法：

通過具體的元素節(jié)點(diǎn)調(diào)用

getElementsByTagName()

方法，獲取當(dāng)前節(jié)點(diǎn)的指定標(biāo)簽名孩子節(jié)點(diǎn)

appendChild( oChildNode )

方法，可以添加一個子節(jié)點(diǎn)，oChildNode 是要添加的孩子節(jié)點(diǎn)

屬性：

childNodes

屬性，獲取當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)

firstChild

屬性，獲取當(dāng)前節(jié)點(diǎn)的第一個子節(jié)點(diǎn)

lastChild

屬性，獲取當(dāng)前節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)

parentNode

屬性，獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)

nextSibling

屬性，獲取當(dāng)前節(jié)點(diǎn)的下一個節(jié)點(diǎn)

previousSibling

屬性，獲取當(dāng)前節(jié)點(diǎn)的上一個節(jié)點(diǎn)

className

用于獲取或設(shè)置標(biāo)簽的 class 屬性值

innerHTML

屬性，表示獲取/設(shè)置起始標(biāo)簽和結(jié)束標(biāo)簽中的內(nèi)容

innerText

屬性，表示獲取/設(shè)置起始標(biāo)簽和結(jié)束標(biāo)簽中的文本

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查詢</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj節(jié)點(diǎn)
		document.getElementById("btn01").onclick = function () {
			var bjObj = document.getElementById("bj");
			alert(bjObj.innerHTML);
		}
		//2.查找所有l(wèi)i節(jié)點(diǎn)
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			var lis = document.getElementsByTagName("li");
			alert(lis.length)
		};
		//3.查找name=gender的所有節(jié)點(diǎn)
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			var genders = document.getElementsByName("gender");
			alert(genders.length)
		};
		//4.查找#city下所有l(wèi)i節(jié)點(diǎn)
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1 獲取id為city的節(jié)點(diǎn)
			//2 通過city節(jié)點(diǎn).getElementsByTagName按標(biāo)簽名查子節(jié)點(diǎn)
			var lis = document.getElementById("city").getElementsByTagName("li");
			alert(lis.length)
		};
		//5.返回#city的所有子節(jié)點(diǎn)
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1 獲取id為city的節(jié)點(diǎn)
			//2 通過city獲取所有子節(jié)點(diǎn)
			alert(document.getElementById("city").childNodes.length);
		};
		//6.返回#phone的第一個子節(jié)點(diǎn)
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			// 查詢id為phone的節(jié)點(diǎn)
			alert( document.getElementById("phone").firstChild.innerHTML );
		};
		//7.返回#bj的父節(jié)點(diǎn)
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			//1 查詢id為bj的節(jié)點(diǎn)
			var bjObj = document.getElementById("bj");
			//2 bj節(jié)點(diǎn)獲取父節(jié)點(diǎn)
			alert( bjObj.parentNode.innerHTML );
		};
		//8.返回#android的前一個兄弟節(jié)點(diǎn)
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			// 獲取id為android的節(jié)點(diǎn)
			// 通過android節(jié)點(diǎn)獲取前面兄弟節(jié)點(diǎn)
			alert( document.getElementById("android").previousSibling.innerHTML );
		};
		//9.讀取#username的value屬性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value);
		};
		//10.設(shè)置#username的value屬性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value = "哈哈哈哈哈哈";
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert(document.getElementById("city").innerHTML);
			// alert(document.getElementById("city").innerText);
		};
	};
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜歡哪個城市?
		</p>

		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>東京</li>
			<li>首爾</li>
		</ul>

		<br>
		<br>

		<p>
			你喜歡哪款單機(jī)游戲?
		</p>

		<ul id="game">
			<li id="rl">紅警</li>
			<li>實(shí)況</li>
			<li>極品飛車</li>
			<li>魔獸</li>
		</ul>

		<br />
		<br />

		<p>
			你手機(jī)的操作系統(tǒng)是?
		</p>

		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
	</div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</div>
<div id="btnList">
	<div><button id="btn01">查找#bj節(jié)點(diǎn)</button></div>
	<div><button id="btn02">查找所有l(wèi)i節(jié)點(diǎn)</button></div>
	<div><button id="btn03">查找name=gender的所有節(jié)點(diǎn)</button></div>
	<div><button id="btn04">查找#city下所有l(wèi)i節(jié)點(diǎn)</button></div>
	<div><button id="btn05">返回#city的所有子節(jié)點(diǎn)</button></div>
	<div><button id="btn06">返回#phone的第一個子節(jié)點(diǎn)</button></div>
	<div><button id="btn07">返回#bj的父節(jié)點(diǎn)</button></div>
	<div><button id="btn08">返回#android的前一個兄弟節(jié)點(diǎn)</button></div>
	<div><button id="btn09">返回#username的value屬性值</button></div>
	<div><button id="btn10">設(shè)置#username的value屬性值</button></div>
	<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

document對象補(bǔ)充說明：

現(xiàn)在需要我們使用js代碼來創(chuàng)建html標(biāo)簽，并顯示在頁面上標(biāo)簽的內(nèi)容就是：

<div>哈哈哈哈哈</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            // 現(xiàn)在需要我們使用js代碼來創(chuàng)建html標(biāo)簽，并顯示在頁面上
            // 標(biāo)簽的內(nèi)容就是：<div>哈哈哈哈哈</div>
            var divObj = document.createElement("div"); // 在內(nèi)存中 <div></div>

            var textNodeObj = document.createTextNode("哈哈哈哈哈"); // 有一個文本節(jié)點(diǎn)對象 #哈哈哈哈哈
            
            // 添加子元素
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

文本也是一個節(jié)點(diǎn)，所以還可以這么寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            // 現(xiàn)在需要我們使用js代碼來創(chuàng)建html標(biāo)簽，并顯示在頁面上
            // 標(biāo)簽的內(nèi)容就是：<div>哈哈哈哈哈</div>
            var divObj = document.createElement("div"); // 在內(nèi)存中 <div></div>

            var textNodeObj = document.createTextNode("哈哈哈哈哈"); // 有一個文本節(jié)點(diǎn)對象 #哈哈哈哈哈

            divObj.appendChild(textNodeObj); // <div>哈哈哈哈哈</div>

            // divObj.innerHTML = "哈哈哈哈哈"; // <div>哈哈哈哈哈</div>,但，還只是在內(nèi)存中
            // 添加子元素
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

【JavaWeb】JavaScript

感謝觀看?。?！?文章來源地址http://www.zghlxwxcb.cn/news/detail-427786.html

到了這里，關(guān)于【JavaWeb】JavaScript的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

[JavaWeb]【一】入門JavaWeb開發(fā)總概及HTML、CSS、JavaScript
目錄一特色 ?二? 收獲?編輯 ?三什么是web? 四網(wǎng)站的工作流程 ?五?web網(wǎng)站的開發(fā)模式?編輯 ?六 web開發(fā)課程學(xué)習(xí)安排 ?七、初始web前端 ?八 HTML、CSS 8.1 什么是HTNLCSS(w3cschool) 8.2 HTML快速入門 8.3 VS Code開發(fā)工具 8.3.1? 插件 ?8.3.2 主題（改變顏色） 8.3.3 設(shè)置 8.4 基礎(chǔ)標(biāo)簽樣
2024年02月12日
瀏覽(48)
JAVAWEB項目--POST完整交互(servlet,axios,JavaScript)
post交互 js： ? 后端servlet：響應(yīng)前端： ? 前端接收： ?
2024年02月14日
瀏覽(22)
JavaScript系列從入門到精通系列第二十篇：使用工廠方法創(chuàng)建JavaScript對象，JavaScript構(gòu)造函數(shù)詳解，JavaScript類概念的介紹
文章目錄一：使用工廠方法創(chuàng)建對象 1：原始寫法 2：工廠方式 3：結(jié)果驗證? 二：構(gòu)造函數(shù) 1：什么是構(gòu)造函數(shù) 2：構(gòu)造函數(shù)和普通函數(shù)的區(qū)別 3：構(gòu)造函數(shù)的執(zhí)行流程三：類 1：什么是類 2：如何檢查一個對象是否是個類的實(shí)例 3：Object的地位四：構(gòu)造函數(shù)修改 1：重大問題
2024年02月08日
瀏覽(25)
前端開發(fā)——Javascript知識（介紹）
目錄有關(guān)JavaScript的知識? JavaScript的優(yōu)點(diǎn)? ?JavaScript的領(lǐng)域 JavaScript的組成 JavaScript的特點(diǎn) 第一個JavaScript程序在 HTML 文檔中嵌入 JavaScript 代碼在腳本文件中編寫 JavaScript 代碼 JavaScript內(nèi)容? Html內(nèi)容? JavaScript 代碼執(zhí)行順序 JavaScript中的幾個重要概念標(biāo)識符保留字區(qū)分
2024年02月01日
瀏覽(25)
JavaScript閉包詳細(xì)介紹
閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)，創(chuàng)建閉包的常見方式是讓一個內(nèi)嵌函數(shù)訪問其外部（父級）函數(shù)的變量，即使外部函數(shù)已經(jīng)執(zhí)行完畢，其變量仍然存在于內(nèi)存中。閉包的主要特點(diǎn)是它可以“記住”外部函數(shù)的變量。變量持久化：閉包能夠保持對外部作
2024年02月20日
瀏覽(21)
Javascript 函數(shù)介紹
? 很多教程書一上來就講解一堆語法，例如函數(shù)定義、函數(shù)調(diào)用什么。等讀者看完了函數(shù)這一章都沒搞懂什么是函數(shù)。在講解什么叫函數(shù)之前，我們先看下面一段代碼：大家一看就知道了，上面代碼實(shí)現(xiàn)的是50以內(nèi)所有奇數(shù)的和。如果要分別計算50以內(nèi)所有奇數(shù)和以及100以內(nèi)
2024年02月03日
瀏覽(15)
JavaScript高級技巧：深入探索JavaScript語言的高級特性和用法
當(dāng)我們談?wù)揓avaScript高級技巧時，以下是一些示例來說明這些概念：閉包（Closures）：在上面的例子中， innerFunction 是一個閉包，它可以訪問外部函數(shù) outerFunction 中的 outerVariable 變量，即使在外部函數(shù)執(zhí)行結(jié)束后也可以。高階函數(shù)（Higher-Order Functions）：在上面的例子中，
2024年02月08日
瀏覽(33)
JavaScript -- Map對象及常用方法介紹
Map用來存儲鍵值對結(jié)構(gòu)的數(shù)據(jù)**（key-value）** Object中存儲的數(shù)據(jù)就可以認(rèn)為是一種鍵值對結(jié)構(gòu) Map和Object的主要區(qū)別： Object中的屬性名只能是字符串或符號，如果傳遞了一個其他類型的屬性名，JS解釋器會自動將其轉(zhuǎn)換為字符串 Map中任何類型的值都可以成為數(shù)據(jù)的key map.si
2024年02月10日
瀏覽(21)
【JavaScript】JavaScript 簡介 ④ ( 解釋型語言和編譯型語言 | 計算機(jī)程序本質(zhì) | 編譯器和解釋器 )
計算機(jī) 的程序是在 CPU 上執(zhí)行的 , CPU 上執(zhí)行的只有匹配該 CPU 的機(jī)器碼指令 , 不同類型的 CPU 執(zhí)行的機(jī)器碼指令格式不同 , X86 和 ARM 執(zhí)行的機(jī)器碼指令格式是不同的 ; 機(jī)器碼指令是二進(jìn)制的 , 所有在計算機(jī) 上執(zhí)行的程序 , 都是若干二進(jìn)制機(jī)器碼的集合 ; 計算機(jī) 只能執(zhí)
2024年03月22日
瀏覽(32)
開發(fā)語言漫談-JavaScript
? ? ? ?JavaScript、Java名字很相近，但它們沒有任何親緣關(guān)系，是由不同公司開發(fā)的編程語言。Java由Sun公司（后被Oracle收購）開發(fā)，JavaScript最初是由Netscape公司開發(fā)的（當(dāng)年瀏覽器的霸主）。JavaScript最初的名字是 LiveScript，Netscape將其命名為 JavaScript，無非是蹭?Java流量。當(dāng)
2024年04月16日
瀏覽(26)

<track id="6z3no"></track>