JavaScript 語言入門

来源:https://www.cnblogs.com/kohler21/archive/2022/06/22/16374926.html
-Advertisement-
Play Games

JavaScript 介紹 Javascript 語言誕生主要是完成頁面的數據驗證。因此它運行在客戶端,需要運行瀏覽器來解析執行 JavaScript 代碼。 JS 是 Netscape 網景公司的產品,最早取名為 LiveScript;為了吸引更多 java 程式員。更名為 JavaScript。 ...


目錄

JavaScript 介紹

Javascript 語言誕生主要是完成頁面的數據驗證。因此它運行在客戶端,需要運行瀏覽器來解析執行 JavaScript 代碼。

JS 是 Netscape 網景公司的產品,最早取名為 LiveScript;為了吸引更多 java 程式員。更名為 JavaScript。

java和JavaScript的區別:

JS 是弱類型,Java 是強類型。

特點:

  1. 交互性(它可以做的就是信息的動態交互)
  2. 安全性(不允許直接訪問本地硬碟)
  3. 跨平臺性(只要是可以解釋 JS 的瀏覽器都可以執行,和平臺無關)

JavaScript 和 和 html 代碼的結合方式

第一種方式

只需要在 head 標簽中,或者在 body 標簽中, 使用 script 標簽 來書寫 JavaScript 代碼

示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //alert是JavaScript語言提供的一個警告框函數。
        //他可以接受任意類型的參數,這個參數就是警告框的提示信息。
        alert("hello javascript!");
    </script>
</head>
<body>
</body>
</html

效果:

第二種方式

使用 script 標簽引入 單獨的 JavaScript 代碼文件

文件目錄如圖:

現在需要使用script引入外部的js文件來執行
src屬性專門用來引入js文件路徑,可以是相對路徑,也可以是絕對路徑。
script標簽可以用來定義js代碼,也可以用來引入js文件
但是,兩個功能二選一使用,不能同時使用兩個功能。

例如:既引入js文件,又使用script標簽

02-hello.html的源代碼:

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

</body>
</html>

1.js的源代碼

alert("hello 愷龍")

效果:

很明顯只顯示了js文件里的提示框,下麵的“快來關註並沒有顯示”
但是可以利用再建script標簽的方式來使得都顯示
例如(js代碼不變):

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

效果:

很明顯這次都顯示了。

變數

什麼是變數?變數是可以存放某些值的記憶體的命名。

JavaScript 的變數類型:
數值類型: number
字元串類型: string
對象類型: object
布爾類型: boolean
函數類型: function

JavaScript 里特殊的值:
undefined 未定義,所有 js 變數未賦於初始值的時候,預設值都是 undefined.
null 空值
NaN 全稱是:Not a Number。非數字。非數值。
JS 中的定義變數格式:
var 變數名;
var 變數名 = 值;

示例:

<script type="text/javascript">
        var i;
        alert(i);//undefined
    </script>

效果:

示例:

    <script type="text/javascript">
        var i;
        i = 12;
        //type of 是JavaScript語言提供的一個函數,它可以取變數的數據類型返回
        alert(typeof (i));//number
    </script>

效果:

示例:

    <script type="text/javascript">
        var i;
        i = 12;
        //type of 是JavaScript語言提供的一個函數,它可以取變數的數據類型返回
        alert(typeof (i));//number
        //javascript是弱類型,可以再次賦值
        i = "abc";
        alert(typeof (i));//String
    </script>

效果:

先number後string
示例:

    <script type="text/javascript">

            var a = 12;
            var b = "abc";
            alert(a * b);// NaN 是非數字、非數值
    </script>

效果:

NaN 是非數字、非數值,也就是字元型和數字相乘是不可以的,只能得到NaN

關係(比較)運算

等於: == 等於是簡單的做字面值的比較
全等於: === 除了做字面值的比較之外,還會比較兩個變數的數據類型
示例:

    <script type="text/javascript">
        var a  = "12";
        var b = 12;
        alert(a == b);//true,只是進行字面意義上的比較
        alert(a === b);//false,類型不一樣
    </script>

效果:

邏輯運算

且運算: &&
或運算: ||
取反運算: !

在 JavaScript 語言中,所有的變數,都可以做為一個 boolean 類型的變數去使用。
0 、null、 undefined、””(空串,裡面一個空格都沒有) 都認為是 false
解釋:

&& 且運算。
有兩種情況:
第一種:當表達式全為真的時候。返回最後一個表達式的值。
第二種:當表達式中,有一個為假的時候。返回第一個為假的表達式的值
|| 或運算
第一種情況:當表達式全為假時,返回最後一個表達式的值
第二種情況:只要有一個表達式為真。就會把回第一個為真的表達式的值
並且 && 與運算 和 ||或運算 有短路。
短路就是說,當這個&&或||運算有結果了之後 。後面的表達式不再執行

示例:

  <script type="text/javascript">
    var a = 0;
    if(a){
        alert("0為真");
    }else {
        alert("0為假");
    }
  </script>

結果:

示例:

  <script type="text/javascript">
      var b = null;
      if (b) {
        alert("null 為真 ");
      } else {
        alert("null 為假 ");
      }
  </script>

結果:

示例:

  <script type="text/javascript">
      var c = undefined;
      if (c) {
        alert("undefined 為真 ");
      } else {
        alert("undefined 為假 ");
      }
  </script>

結果:

示例:

  <script type="text/javascript">
      var d = "";
      if (d) {
        alert(" 空串為真 ");
      } else {
        alert(" 空串為假 ");
      }
  </script>

結果:

&& 且運算。

有兩種情況:
第一種:當表達式全為真的時候。返回最後一個表達式的值。
第二種:當表達式中,有一個為假的時候。返回第一個為假的表達式的值

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

alert( a && b );//true
alert( b && a );//true
alert( a && d ); // false
alert( a && c ); // null

|| 或運算
第一種情況:當表達式全為假時,返回最後一個表達式的值
第二種情況:只要有一個表達式為真。就會把回第一個為真的表達式的值

alert( d || c ); // null
alert( c|| d ); //false
alert( a || c ); //abc
alert( b || c ); //true

數組(重點)

數組定義方式
JS 中 數組的定義:
格式:
var 數組名 = []; // 空數組
var 數組名 = [1 , ’abc’ , true]; // 定義數組同時賦值元素
示例:

    <script type="text/javascript">
        var arr = []; // 定義一個空數組
        alert( arr.length ); // 0
    </script>

結果:

示例:

    <script type="text/javascript">
        var arr = []; // 定義一個空數組
        arr[0] = 12;
        alert( arr[0] );//12
        alert( arr.length ); // 0
    </script>

結果:

示例:

    <script type="text/javascript">
        var arr = []; // 定義一個空數組
        // javaScript 語言中的數組,只要我們通過數組下標賦值,那麼最大的下標值,就會自動的給數組做擴容操作。
        arr[2] = "abc";
        alert(arr.length); //3
    </script>

結果:

示例:

    <script type="text/javascript">
        var arr = []; // 定義一個空數組
        // javaScript 語言中的數組,只要我們通過數組下標賦值,那麼最大的下標值,就會自動的給數組做擴容操作。
        arr[2] = "abc";
        alert(arr[1]);// undefined
    </script>

結果:

示例:

    <script type="text/javascript">
        var arr = []; // 定義一個空數組
        // javaScript 語言中的數組,只要我們通過數組下標賦值,那麼最大的下標值,就會自動的給數組做擴容操作。
        arr[2] = "abc";
        //數組的遍歷
        for (var i = 0; i < arr.length; i++){
            alert(arr[i]);
        }
    </script>

結果:

函數(重點)

函數的二種定義方式

第一種,可以使用 function 關鍵字來定義函數。
使用的格式如下:
function 函數名(形參列表){
函數體
}
在 JavaScript 語言中,如何定義帶有返回值的函數?
只需要在函數體內直接使用 return 語句返回值即可!
示例代碼:

  <script type="text/javascript">
      // 定義一個無參函數
      function fun(){
          alert(" 無參函數 fun() 被調用了");
      }
      // 函數調用才會執行
      fun();
  </script>

結果:

示例代碼:

  <script type="text/javascript">
      function fun2(a ,b) {
          alert(" 有參函數 fun2()了 被調用了 a=>" + a + ",b=>"+b);
      }
      fun2(12,"abc");
  </script>

結果:

示例代碼:

  <script type="text/javascript">
      // 定義帶有返回值的函數
      function sum(num1,num2) {
          var result = num1 + num2;
          return result;
      }
      alert( sum(100,50) );
  </script>

結果:

函數的第二種定義方式,格式如下:
使用格式如下:
var 函數名 = function(形參列表)
{
函數體
}
示例代碼:

var fun = function () {
alert(" 無參函數");
}
// fun();
var fun2 = function (a,b) {
alert(" 有參函數 a=" + a + ",b=" + b);
}
// fun2(1,2);
var fun3 = function (num1,num2) {
return num1 + num2;
}
alert( fun3(100,200) );

結果:
這個結果就跟剛纔的差不多了,只是形式上稍有差別。
在 Java 中函數允許重載。但是在 JS 中函數的重載會直接覆蓋掉上一次的定義

示例代碼:

  <script type="text/javascript">
      function fun() {
          alert(" 無參函數 fun()");
      }
      function fun(a,b) {
          alert(" 有參函數 fun(a,b)");
      }
      fun();
  </script>

結果:

函數的 arguments 隱形參數 (只在 function 函數內 )

就是在 function 函數中不需要定義,但卻可以直接用來獲取所有參數的變數。我們管它叫隱形參數。
隱形參數特別像 java 基礎的可變長參數一樣。
public void fun( Object ... args );
可變長參數其他是一個數組。
那麼 js 中的隱形參數也跟 java 的可變長參數一樣。操作類似數組

示例代碼:

 <script type="text/javascript">
      function fun(a) {
          alert( arguments.length );// 可看參數個數 為3個
          alert( arguments[0] );// 1
          alert( arguments[1] );//ad
          alert( arguments[2] );//true
          alert("a = " + a);
          for (var i = 0; i < arguments.length; i++){
              alert( arguments[i] );
          }//依次輸出1,ad,true
          alert(" 無參函數 fun()");////最後輸出
      }
      fun(1,"ad",true);
  </script>
</head>

結果:

示例代碼:

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

結果:

JS 中的自定義對象 中的自定義對象

Object 形式的自定義對象

對象的定義:
var 變數名 = new Object(); // 對象實例(空對象)
變數名.屬性名 = 值; // 定義一個屬性
變數名.函數名 = function(){} // 定義一個函數
對象的訪問:
變數名.屬性 / 函數名();

示例代碼:

  <script type="text/javascript">
      var obj = new Object();
      obj.name = " 愷龍";
      obj.age = 21;
      obj.fun = function () {
          alert(" 姓名:" + this.name + " , 年齡:" + this.age);
      }
      obj.fun();
  </script>

結果:

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

對象的定義:
var 變數名 = { // 空對象
屬性名:值, // 定義一個屬性
屬性名:值, // 定義一個屬性
函數名:function(){} // 定義一個函數
};
對象的訪問:
變數名.屬性 或 函數名();

示例代碼:

 <script type="text/javascript">
      var obj = {
          name:" 愷龍",
          age:18,
          fun : function () {
              alert(" 姓名:" + this.name + " , 年齡:" + this.age);
          }
      };
      alert(obj.name);
      obj.fun();
  </script>

結果:

js 中的事件

什麼是事件?事件是電腦輸入設備與頁面進行交互的響應。我們稱之為事件。
常用的事件:

事件 解釋
onload 載入完成事件: 頁面載入完成之後,常用於做頁面 js 代碼初始化操作
onclick 單擊事件: 常用於按鈕的點擊響應操作。
onblur 失去焦點事件: 常用用於輸入框失去焦點後驗證其輸入內容是否合法。
onchange 內容發生改變事件: 常用於下拉列表和輸入框內容發生改變後操作
onsubmit 表單提交事件: 常用於表單提交前,驗證所有表單項是否合法。

事件的註冊又分為靜態註冊和動態註冊兩種:
什麼是事件的註冊(綁定)?
其實就是告訴瀏覽器,當事件響應後要執行哪些操作代碼,叫事件註冊或事件綁定。
靜態註冊事件 :通過 html 標簽的事件屬性直接賦於事件響應後的代碼,這種方式我們叫靜態註冊。
動態註冊事件 :是指先通過 js 代碼得到標簽的 dom 對象,然後再通過 dom 對象.事件名 = function(){} 這種形式賦於事件響應後的代碼,叫動態註冊。
動態註冊基本步驟:
1、獲取標簽對象
2、標簽對象.事件名 = fucntion(){}

onload 載入完成事件

靜態註冊onload事件

示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload 事件的方法
        function onloadFun(){
            alert('靜態註冊onload事件,所有代碼');
        }
    </script>
</head>
<!--靜態註冊onload事件-->
<!--onload事件是瀏覽器解析完頁面之後就會自動觸發的事件-->
<body onload="onloadFun()">
</body>
</html>

結果:

解釋:
這段代碼實現定義了實現onload事件的方法onloadFun(),然後在body標簽裡面通過引用這個方法來實現。

動態註冊onload事件

示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload事件動態註冊,是固定寫法
        window.onload = function (){
            alert("動態註冊的onload事件");
        }
    </script>
</head>
<body>
</body>
</html>

結果:

可以對照一下這兩種方式進而感受他們的差別

onclick事件

onclick事件靜態註冊
示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            alert('靜態註冊onclick事件');
        }
    </script>
</head>
<body>
<!--靜態註冊onclick事件-->
<button onclick="onclickFun()">按鈕1</button>
<button>按鈕2</button>
</body>
</html>

結果:

動態註冊onclick事件

示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //動態註冊onclick事件
        window.onload = function (){
            //獲取標簽對象
            /*
                document 是 JavaScript 語言提供的一個對象(文檔)
                * get 獲取
                * Element 元素(就是標簽)
                * By 通過...由...經....
                * Id id 屬性
                * getElementById 通過 id 屬性獲取標簽對象*/
            var btnobj = document.getElementById("btn01");
            //alert(btnobj);
            //通過標簽對象.事件名 = function(){}
            btnobj.onclick = function () {
               alert("動態註冊的onclick事件");
            }
        }
    </script>
</head>
<body>
<button >按鈕1</button>
<button id="btn01">按鈕2</button>
</body>
</html>

結果:

onblur 失去焦點事件

示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 靜態註冊失去焦點事件
        function onblurFun() {
            // console 是控制台對象,是由 JavaScript 語言提供,專門用來向瀏覽器的控制器列印輸出, 用於測試使用
            // log() 是列印的方法
            console.log(" 靜態註冊失去焦點事件");
        }
    </script>
</head>
<body>
    用戶名:<input type="text" onblur="onblurFun();"><br/>
    密碼:<input type="text" ><br/>
</body>
</html>

結果:
image

當滑鼠點擊一次輸入框再離開就形成一個焦點事件,每觸發一次就會累計一次,這都可以在控制台看到
控制台打開方式:在頁面按F12或右鍵檢查再點擊控制台(console)即可

動態註冊:

示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 動態註冊 onblur 事件
        window.onload = function () {
            //1 獲取標簽對象
            var passwordObj = document.getElementById("password");
                // alert(passwordObj);
                //2 通過標簽對象 . 事件名 = function(){};
            passwordObj.onblur = function () {
                console.log(" 動態註冊失去焦點事件");
            }
        }
    </script>
</head>
<body>
    用戶名:<input type="text" onblur="onblurFun();"><br/>
    密碼:<input id = "password" type="text" ><br/>
</body>
</html>

結果:
和靜態註冊效果一樣

onchange 內容發生改變事件

靜態註冊示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert(" 老師已經改變了");
        }
    </script>
</head>
<body>
請選擇交大最好的老師:
<!-- 靜態註冊 onchange 事件 -->
    <select onchange="onchangeFun();">
        <option>--老師--</option>
        <option>韓寶民</option>
        <option>柳淑琴</option>
    </select>
</body>
</html>

結果:
image

動態註冊示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
                //1 獲取標簽對象
            var selObj = document.getElementById("sel01");
                // alert( selObj );
                //2 通過標簽對象 . 事件名 = function(){}
            selObj.onchange = function () {
                alert(" 老師已經改變了");
            }
        }
    </script>
</head>
<body>
請選擇交大最好的老師:
<!-- 靜態註冊 onchange 事件 -->
    <select id = "sel01">
        <option>--老師--</option>
        <option>韓寶民</option>
        <option>柳淑琴</option>
    </select>
</body>
</html>

結果:
效果和靜態註冊一樣

onsubmit 表單提交事件

示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" >
    // 靜態註冊表單提交事務
    function onsubmitFun(){
    // 要驗證所有表單項是否合法,如果,有一個不合法就阻止表單提交
      alert(" 靜態註冊表單提交事件---- 發現不合法");
      return flase;
    }
    window.onload = function () {
        //1 獲取標簽對象
        var formObj = document.getElementById("form01");
        //2 通過標簽對象 . 事件名 = function(){}
        formObj.onsubmit = function () {
        // 要驗證所有表單項是否合法,如果,有一個不合法就阻止表單提交
            alert(" 動態註冊表單提交事件---- 發現不合法");
            return false;
        }
    }
  </script>
</head>
<body>
    <!--return false 可以阻止 表單提交 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value=" 靜態註冊"/>
    </form>
    <form action="http://localhost:8080" id="form01">
        <input type="submit" value=" 動態註冊"/>
    </form>
</body>
</html>

結果:
註意看這個最後是拒絕連接了
動態註冊的效果一樣
image

DOM 模型

DOM 全稱是 Document Object Model 文檔對象模型
大白話,就是把文檔中的標簽,屬性,文本,轉換成為對象來管理。
那麼 它們是如何實現把標簽,屬性,文本轉換成為對象來管理呢。

Document 對象

Document 對象的理解:

  1. Document 它管理了所有的 HTML 文檔內容。
  2. document 它是一種樹結構的文檔。有層級關係。
  3. 它讓我們把所有的標簽 都 對象化
  4. 我們可以通過 document 訪問所有的標簽對象。

什麼是對象化?

舉例:
有一個人有年齡:18 歲,性別:女,名字:張某某
我們要把這個人的信息對象化怎麼辦!

Class Person {
  private int age;
  private String sex;
  private String name;
}

那麼 html 標簽 要 對象化 怎麼辦?

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

模擬對象化,相當於:

class Dom{
  private String id; // id 屬性
  private String tagName; //表示標簽名
  private Dom parentNode; //父親
  private List<Dom> children; // 孩子結點
  private String innerHTML; // 起始標簽和結束標簽中間的內容
}

Document 對象中的方法介紹

document.getElementById(elementId)
通過標簽的 id 屬性查找標簽 dom 對象,elementId 是標簽的 id 屬性值
document.getElementsByName(elementName)
通過標簽的 name 屬性查找標簽 dom 對象,elementName 標簽的 name 屬性值
document.getElementsByTagName(tagname)
通過標簽名查找標簽 dom 對象。tagname 是標簽名
document.createElement( tagName)
方法,通過給定的標簽名,創建一個標簽對象。tagName 是要創建的標簽名

註意:
document 對象的三個查詢方法,如果有 id 屬性,優先使用 getElementById 方法來進行查詢
如果沒有 id 屬性,則優先使用 getElementsByName 方法來進行查詢
如果 id 屬性和 name 屬性都沒有最後再按標簽名查 getElementsByTagName
以上三個方法,一定要在頁面載入完成之後執行,才能查詢到標簽對象。

getElementById 方法示例代碼:
此示例代碼涉及到java正則表達式的使用,請參考文章Java正則表達式入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" >
    /*
    * 需求:當用戶點擊了較驗按鈕,要獲取輸出框中的內容。然後驗證其是否合法。 <br/>
    * 驗證的規則是:必須由字母,數字。下劃線組成。並且長度是 5 到 12 位。
    * */
    function onclickFun() {
    // 1 當我們要操作一個標簽的時候,一定要先獲取這個標簽對象。
      var usernameObj = document.getElementById("username");
    // [object HTMLInputElement] 它就是 dom 對象
      var usernameText = usernameObj.value;
    // 如何 驗證 字元串,符合某個規則 ,需要使用正則表達式技術
      var patt = /^\w{5,12}$/;
      /*
      * test() 方法用於測試某個字元串,是不是匹配我的規則 ,
      * 匹配就返回 true 。不匹配就返回 false.
      * */
      var usernameSpanObj = document.getElementById("usernameSpan");
    // innerHTML 表示起始標簽和結束標簽中的內容
    // 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="愷龍"/>
    <span id="usernameSpan" style="color:red;">
    </span>
    <button onclick="onclickFun()">較驗</button>
</body>
</html>

結果:
image

這個顯示的結果是用的圖片來顯示的,也可以用提示框(alert)的方式或文本的方式來顯示,這都在代碼中有寫(註釋部分),可以自己嘗試一下。

getElementsByName示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
        // 全選
    function checkAll() {
        // 讓所有覆選框都選中
        // document.getElementsByName(); 是根據 指定的 name 屬性查詢返回多個標簽對象集合
        // 這個集合的操作跟數組 一樣
        // 集合中每個元素都是 dom 對象
        // 這個集合中的元素順序是他們在 html 頁面中從上到下的順序
      var cities = document.getElementsByName("city");
        // checked 表示覆選框的選中狀態。如果選中是 true ,不選中是 false
        // checked 這個屬性可讀,可寫
      for (var i = 0; i < cities.length; i++){
        cities[i].checked = true;
      }
    }
     // 全不選
    function checkNo() {
      var cities = document.getElementsByName("city");
        // checked 表示覆選框的選中狀態。如果選中是 true ,不選中是 false
        // checked 這個屬性可讀,可寫
      for (var i = 0; i < cities.length; i++){
        cities[i].checked = false;
      }
    }
    // 反選
    function checkReverse() {
      var cities = document.getElementsByName("city");
      for (var i = 0; i < cities.length; i++) {//利用迴圈快速實現
        cities[i].checked = !cities[i].checked;
          // if (cities[i].checked) {//非迴圈實現
          // cities[i].checked = false;
          // }else {
          // cities[i].checked = true;
          // }
      }
    }
  </script>
</head>
<body>
你喜歡的城市:
    <input type="checkbox" name="city" value="漯河" checked="checked">漯河
    <input type="checkbox" name="city" value="大連">大連
    <input type="checkbox" name="city" value="太原">太原
    <br/>
    <button onclick="checkAll()">全選</button>
    <button onclick="checkNo()">全不選</button>
    <button onclick="checkReverse()">反選</button>
</body>
</html>

結果:
image

getElementsByTagName示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全選
        function checkAll() {
        // document.getElementsByTagName("input");
        // 是按照指定標簽名來進行查詢並返回集合
        // 這個集合的操作跟數組 一樣
        // 集合中都是 dom 對象
        // 集合中元素順序 是他們在 html 頁面中從上到下的順序。
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++){
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
你喜歡的城市:
<input type="checkbox" name="city" value="漯河" checked="checked">漯河
<input type="checkbox" name="city" value="大連">大連
<input type="checkbox" name="city" value="太原">太原
<br/>
<button onclick="checkAll()">全選</button>
</body>
</html>

結果:

createElement 方法示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
        // 現在需要我們使用 js 代碼來創建 html 標簽,並顯示在頁面上
        // 標簽的內容就是: <div> 快關註我 </div>
            var divObj = document.createElement("div"); // 在記憶體中 <div></div>
            var textNodeObj = document.createTextNode(" 快關註我"); // 有一個文本節點對象 # 快關註我
            divObj.appendChild(textNodeObj); // <div> 快關註我 </div>
        // divObj.innerHTML = " 快關註我 ";// <div> 快關註我 </div>, 但,還只是在記憶體中
        // 添加子元素
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>
</body>
</html>

結果:

節點的常用屬性和方法

節點就是標簽對象

方法:
通過具體的元素節點調用
getElementsByTagName()
方法,獲取當前節點的指定標簽名孩子節點
appendChild( oChildNode )
方法,可以添加一個子節點,oChildNode 是要添加的孩子節點

屬性:
childNodes
屬性,獲取當前節點的所有子節點
firstChild
屬性,獲取當前節點的第一個子節點
lastChild
屬性,獲取當前節點的最後一個子節點
parentNode
屬性,獲取當前節點的父節點
nextSibling
屬性,獲取當前節點的下一個節點
previousSibling
屬性,獲取當前節點的上一個節點
className
用於獲取或設置標簽的 class 屬性值
innerHTML
屬性,表示獲取/設置起始標簽和結束標簽中的內容
innerText
屬性,表示獲取/設置起始標簽和結束標簽中的文本

另有DOM查詢的示例練習,鑒於篇幅過長如有需要可在公眾號直接回覆:“DOM查詢練習”獲取相關資料和源碼。

DOM查詢練習部分截圖:

歡迎關註我的公眾號,共同學習


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 為什麼要使用Gridsome Gridsome 通過使用PRPL模式將超高性能構建到每個頁面中。您可以獲得開箱即用的代碼拆分、資產優化、漸進式圖像和鏈接預取。Gridsome 網站預設獲得幾乎完美的頁面速度分數。 Gridsome 生成靜態 PWA。只有關鍵的 HTML、CSS 和 JavaScri ...
  • 轉載自:https://blog.csdn.net/u013685264/article/details/121903540?spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault% ...
  • 記錄windows11系統,按shift鍵中英文切換未生效解決辦法 問題由來:中英文切換不順暢 問題搜索思路: shift鍵跟粘滯鍵有關,博主顯示直接去搜Windows shift鍵切換中英文不順暢。看到有人說從Windows 10後shift鍵就有了該特性,有些大佬描述是跟粘滯鍵有關,shift按 ...
  • 一 、通過雲開發平臺快速創建初始化應用 1.創建相關應用模版請參考鏈接:嘗鮮少代碼高性能的Svelte框架 2.完成創建後就可以在github中查看到新增的Vite倉庫 二 、 本地編寫 Svelte3聊天室 1.將應用模版克隆到本地 首先假定你已經安裝了Git、node,沒有安裝請移步node官網 ...
  • E-R圖也稱實體-聯繫圖(Entity Relationship Diagram),它提供了表示實體類型、屬性和聯繫的方法,用來描述現實世界的概念模型。 ...
  • 本文檔內容主要是分析android設備中cgroup v1實現了哪些控制器,他們有哪些子控制器以及如何配置這些控制器的。 我是使用紅米Note4Plus的開發版本來調研分析的,手機已經解鎖並具有了root許可權,可以隨意操作修改手機內容。不涉及到源代碼層面的調查分析。 設備的基本配置信息:高通msm8 ...
  • 開發者們,你希望用戶如何獲取新聞? 有的人靠手機彈窗知天下事,有的人則在新聞應用中盡覽每一篇文章;有的人一目十行,有的人則喜歡細細咀嚼;有的人主動探索,有的人則想要應用投其所好。 科技在不斷刷新著用戶獲取新聞的方式,與此同時,用戶自身也在發出新的獲知需求。HMS Core新聞行業解決方案,為新聞行業 ...
  • 今天繼續是對後臺管理部分的一個操作,但是快要結束了,今天結束,明天會進入一個從Vue以來,另外一個名聲顯著的東西了,一隻耳聞從未見識,而且十分的炫酷 他就是 數據可視化Echarts,迫不及待瞭解了 11.銷售屬性添加 當我們點擊添加就,應該把添加的放到table裡面來,table裡面每一行數據是一 ...
一周排行
    -Advertisement-
    Play Games
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 很多軟體工程師都認為MD5是一種加密演算法,然而這種觀點是不對的。作為一個 1992 年第一次被公開的演算法,到今天為止已經被髮現了一些致命的漏洞。本文討論MD5在密碼保存方面的一些問題。 ...
  • Maven可以使我們在構建項目時需要用到很多第三方類jar包,如下一些常用jar包 而maven的出現可以讓我們避免手動導入jar包出現的某些問題,它可以自動下載那須所需要的jar包 我們只需要在創建的maven項目自動生成的pom.xml中輸入如下代碼 <dependencies> <!--ser ...
  • 來源:https://developer.aliyun.com/article/694020 非同步調用幾乎是處理高併發Web應用性能問題的萬金油,那麼什麼是“非同步調用”? “非同步調用”對應的是“同步調用”,同步調用指程式按照定義順序依次執行,每一行程式都必須等待上一行程式執行完成之後才能執行;非同步調 ...
  • 1.面向對象 面向對象編程是在面向過程編程的基礎上發展來的,它比面向過程編程具有更強的靈活性和擴展性,所以可以先瞭解下什麼是面向過程編程: 面向過程編程的核心是過程,就是分析出實現需求所需要的步驟,通過函數一步一步實現這些步驟,接著依次調用即可,再簡單理解就是程式 從上到下一步步執行,從頭到尾的解決 ...
  • 10瓶毒藥其中只有一瓶有毒至少需要幾隻老鼠可以找到有毒的那瓶 身似浮雲,心如飛絮,氣若游絲。 用二分查找和二進位位運算的思想都可以把死亡的老鼠降到最低。 其中,二進位位運算就是每一隻老鼠代表一個二進位0或1,0就代表老鼠存活,1代表老鼠死亡;根據數學運算 23 = 8、24 = 16,那麼至少需要四 ...
  • 一、Kafka存在哪些方面的優勢 1. 多生產者 可以無縫地支持多個生產者,不管客戶端在使用單個主題還是多個主題。 2. 多消費者 支持多個消費者從一個單獨的消息流上讀取數據,而且消費者之間互不影響。 3. 基於磁碟的數據存儲 支持消費者非實時地讀取消息,由於消息被提交到磁碟,根據設置的規則進行保存 ...
  • 大家好,我是陶朱公Boy。 前言 上一篇文章《關於狀態機的技術選型,最後一個真心好》我跟大家聊了一下關於”狀態機“的話題。從眾多技術選型中我也推薦了一款阿裡開源的狀態機—“cola-statemachine”。 於是就有小伙伴私信我,自己項目也考慮引入這款狀態機,但網上資料實在太少,能不能系統的介紹 ...
  • 使用腳本自動跑實驗(Ubuntu),將實驗結果記錄在文件中,併在實驗結束之後將結果通過郵件發送到郵箱,最後在windows端自動解析成excel表格。 ...
  • 話說在前面,我不是小黑子~ 我是超級大黑子😏 表弟大周末的跑來我家,沒事幹天天騷擾我,搞得我都不能跟小姐姐好好聊天了,於是為了打發表弟,我決定用Python做一個小游戲來消耗一下他的精力,我思來想去,決定把他變成小黑子,於是做了一個坤坤打籃球的游戲,沒想到他還挺愛玩的~ 終於解放了,於是我把游戲寫 ...