當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

js 的学习

發布時間：2023/11/27 生活经验 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 的学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

day41

學習鏈接：https://www.cnblogs.com/yuanchenqi/articles/5980312.html

知識結構：
　　BOM對象

　　DOM對象（DHTML）

一個完整的JavaScript的組成有以下三個不同部分組成：
1、ECMAScipt（語法規范）

2、文檔對象模型（DOM） Document object model (整合js，css，html)

3、瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

Javascript 在開發中絕大多數情況是基于對象的.也是面向對象的.?

? ? ? ? ?

簡單地說，ECMAScript 描述了以下內容：

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

JavaScript的導入方式：

{#1 直接在body或者head內編寫(看個人習慣,個人習慣放在body內)#}

????<script> ????????alert('hello yuan') ????</script> {#2 head 導入文件#} ????<script src="hello.js"></script>　　

變量

注：每個var后面要加一個分號，沒有分號會以換行符作為每行的結束

1、聲明變量是不用聲明變量類型，全部使用var關鍵字

var name;

2、一行可以聲明多個變量.并且可以是不同類型,用逗號分隔

var name="yuan", age=20, job="lecturer";

3?(了解) 聲明變量時可以不用var. 如果不用var 那么它是全局變量.

4?變量命名,首字符只能是字母,下劃線,$美元符三選一，且區分大小寫，x與X是兩個變量

5?變量還應遵守以下某條著名的命名規則：

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

　規范：

1?每行結束可以不加分號. 沒有分號會以換行符作為每行的結束

2?注釋支持多行注釋和單行注釋. /* */? //

3?使用{}來封裝代碼塊

數據類型：

基本數據類型：

數字類型(Number)

簡介
最基本的數據類型
不區分整型數值和浮點型數值
所有數字都采用64位浮點格式存儲，相當于Java和C語言中的double格式
能表示的最大值是±1.7976931348623157 x 10308 
能表示的最小值是±5 x 10 -324

? ?整數：
? ? ? ? ? ?在JavaScript中10進制的整數由數字的序列組成
? ? ? ? ? ?精確表達的范圍是?-9007199254740992 (-253) 到 9007199254740992 (253)
? ? ? ? ? ?超出范圍的整數，精確度將受影響
? 浮點數：
? ? ? ? ? ?使用小數點記錄數據
? ? ? ? ? ?例如：3.4，5.6
? ? ? ? ? ?使用指數記錄數據
? ? ? ? ? ?例如：4.3e23 = 4.3 x 1023

? 16進制和8進制數的表達
? ? ? ? ? ?16進制數據前面加上0x，八進制前面加0
? ? ? ? ? ?16進制數是由0-9,A-F等16個字符組成
? ? ? ? ? ?8進制數由0-7等8個數字組成
? ? ? ? ? ?16進制和8進制與2進制的換算

# 2進制: 1111 0011 1101 0100   <-----> 16進制:0xF3D4 <-----> 10進制:62420
# 2進制: 1 111 001 111 010 100 <-----> 8進制:0171724

字符串(String)

簡介
是由Unicode字符、數字、標點符號組成的序列
字符串常量首尾由單引號或雙引號括起
JavaScript中沒有字符類型
常用特殊字符在字符串中的表達
字符串中部分特殊字符必須加上右劃線\
常用的轉義字符 \n:換行  \':單引號   \":雙引號  \\:右劃線

String數據類型的使用

特殊字符的使用方法和效果
Unicode的插入方法

1 2 3 4 <script> ????????var?str="\u4f60\u597d\n歡迎來到\"JavaScript世界\""; ????????alert(str); </script>

布爾型(Boolean)

簡介
Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0
布爾值也可以看作on/off、yes/no、1/0對應true/false
Boolean值主要用于JavaScript的控制語句，例如if (x==1){y=y+1;}else    {y=y-1;}

Null & Undefined

Undefined 類型

Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。

當函數無明確返回值時，返回的也是值 "undefined";

Null 類型

另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。

盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用于表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。如果函數或方法要返回的是對象，那么找不到該對象時，返回的通常是 null。

var person=new Person()

var person=null

數據類型轉換

JavaScript屬于松散類型的程序語言
變量在聲明的時候并不需要指定數據類型
變量只有在賦值的時候才會確定數據類型
表達式中包含不同類型數據則在計算過程中會強制進行類別轉換

數字 +?字符串：數字轉換為字符串

數字?+ 布爾值：true轉換為1，false轉換為0

字符串 +?布爾值：布爾值轉換為字符串true或false

強制類型轉換函數

函數parseInt：   強制轉換成整數   例如parseInt("6.12")=6  ; parseInt(“12a")=12 ; parseInt(“a12")=NaN  ;parseInt(“1a2")=1

NaN: not a number函數parseFloat： 強制轉換成浮點數  parseFloat("6.12")=6.12函數eval：       將字符串強制轉換為表達式并返回結果 eval("1+1")=2 ; eval("1<2")=true

類型查詢函數(typeof)

ECMAScript 提供了 typeof 運算符來判斷一個值是否在某種類型的范圍內?？梢杂眠@種運算符判斷一個值是否表示一種原始類型：如果它是原始類型，還可以判斷它表示哪種原始類型。

函數typeof ：查詢數值當前類型? (string / number / boolean / object )    
用來判斷數據類型

例如typeof("test"+3)      "string"
例如typeof(null)          "object "
例如typeof(true+1)        "number"
例如typeof(true-false)    "number"

ECMAScript 運算符：
　　算術運算符

　　NaN只要布爾值參與比較，那么結果一定是false(var n=NaN，n!=NaN的結果是True，其他都是false)

　　邏輯運算符

　　等性運算符

　　關系運算符

　　console.log(2==2)　　console.log(2=="2") 這兩個結果都是true,但是第二個會做類型轉換，所以也是true,但是我們用? “完全等”? console.log(2==="2")這樣的結果就是false

　　比較運算符兩側如果一個是數字類型,一個是其他類型,會將其類型轉換成數字類型.

　　比較運算符兩側如果都是字符串類型,比較的是最高位的asc碼,如果最高位相等,繼續取第二位比較.

?　? 布爾運算符

if 控制語句：

if-else基本格式
if (表達式){
語句１;
......
}else{
語句２;
.....
}
功能說明
如果表達式的值為true則執行語句1,
否則執行語句2

　eg:

var name="bigbao"if (name=="baobao"){alert('baobao')}else if(name=="xueyuan"){alert('xueyuan')}else {alert("hello world")document.write('not bigbao')}</script>

swith 選擇控制語句：

switch基本格式
switch (表達式) {case 值1:語句1;break;case 值2:語句2;break;case 值3:語句3;break;default:語句4;
}

eg:

var week='Monday';
switch (week) {case "Monday":alert('星期一');break;case "Tuesday":alert('星期二');break;case "Wednesday":alert('星期三');break;default:alert('byebye');
}

default 是在都不滿足的時候，執行該語句

switch比else if結構更加簡潔清晰，使程序可讀性更強,效率更高。

首先要看一個問題，if 語句適用范圍比較廣，只要是 boolean 表達式都可以用 if 判斷；而 switch 只能對基本類型進行數值比較。兩者的可比性就僅限在兩個基本類型比較的范圍內。
說到基本類型的數值比較，那當然要有兩個數。然后重點來了——
if 語句每一句都是獨立的，看下面的語句：
if (a == 1) ...
else if (a == 2) ...
這樣 a 要被讀入寄存器兩次，1 和 2 分別被讀入寄存器一次。于是你是否發現其實 a 讀兩次是有點多余的，在你全部比較完之前只需要一次讀入寄存器就行了，其余都是額外開銷。但是 if 語句必須每次都把里面的兩個數從內存拿出來讀到寄存器，它不知道你其實比較的是同一個 a。
于是 switch case 就出來了，把上面的改成 switch case 版本：
switch (a) {case 0:break;case 1:
}總結:1.switch用來根據一個整型值進行多路分支，并且編譯器可以對多路分支進行優化
2.switch-case只將表達式計算一次,然后將表達式的值與每個case的值比較,進而選擇執行哪一個case的語句塊
3.if..else 的判斷條件范圍較廣，每條語句基本上獨立的，每次判斷時都要條件加載一次。
所以在多路分支時用switch比if..else if .. else結構要效率高。

for? 循環控制語句******：

for循環基本格式
for (初始化;條件;增量){語句1;...
}
功能說明
實現條件循環，當條件成立時，執行語句1，否則跳出循環體

　eg：

    for (i=0;i<=10;i++){document.write("hello world"+i+"<br>")}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><p>hello</p><p>world</p><p>bigbao</p><div>nihao</div>
</head>
<body><script>var eles_p=document.getElementsByTagName("p");
for (var i=0;i<eles_p.length;i++){console.log(eles_p[i])
}
</script></body>
</html>

?While 循環控制語句：

while循環基本格式
while (條件){
語句1；
...
}
功能說明
運行功能和for類似，當條件成立循環執行語句花括號{}內的語句，否則跳出循環

?eg:

    var n=1;var s=0;while (n<=100){s=s+n;n++;}document.write(s)

異常處理：

try {//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {// 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。//e是一個局部變量，用來指向Error對象或者其他拋出的對象
}
finally {//無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}

eg:

    try {console.log(123)throw Error('Test Error')}catch(e){console.log(e)}finally {console.log('finally')}

ECMA 對象：

11種內置對象

包括：

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

string 對象的方法：　　

　　大小寫轉換

　　獲取指定字符串

　　查詢字符串

　　字符串替換

　　字符串截取

　　分割字符串

　　連接字符串

數組Array對象

　　創建的三種方式：
　　

    var arr1=[1,2,3];var arr2=new Array(3);arr2[0]="hello";arr2[1]="world";arr2[2]="bigbao";var arr3=new Array('hello',23,true);

Array對象的方法

1、連接數組的方法? ?join

//書寫格式
//x.join(bystr)
//使用注解
//
//x代表數組對象
//bystr作為連接數組中元素的字符串
//返回連接后的字符串
//與字符串的split功能剛好相反
eg:

var arr1=["hello","world","bigbao"];
var str1=arr1.join("--")
document.write(str1)

?2、連接數組 concat

//連接數組-concat方法
//
//x.concat(value,...)
eg：

    var arr1=["hello","world","bigbao"];
    var str1=arr1.concat("xx1","xx2");
    document.write(str1)

?3、數組排序-reverse sort

//x.reverse()倒序
//x.sort()　正序

?4、數組切片-slice

//x.slice(start, end)
//
//使用注解
//
//x代表數組對象
//start表示開始位置索引
//end是結束位置下一數組元素索引編號
//第一個數組元素索引為0
//start、end可為負數，-1代表最后一個數組元素
//end省略則相當于從start位置截取以后所有數組元素

?5、刪除子數組 splice

//x. splice(start, deleteCount, value, ...)
//
//使用注解
//
//x代表數組對象
//splice的主要用途是對數組指定位置進行刪除和插入
//start表示開始位置索引
//deleteCount刪除數組元素的個數
//value表示在刪除位置插入的數組元素
//value參數可以省略

Function 對象(重點)

?格式：

function 函數名 (參數){?函數體;

????return?返回值; }

功能說明：

可以使用變量、常量或表達式作為函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的

返回值必須使用return

Function?類可以表示開發者定義的任何函數。

用?Function?類直接創建函數的語法如下：

function 函數名 (參數){
    ?函數體;
   return 返回值;
}

BOM對象

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

使 JavaScript 有能力與瀏覽器“對話”。?

window（窗口）對象

    所有瀏覽器都支持 window 對象。概念上講.一個html文檔對應一個window對象.功能上講: 控制瀏覽器窗口的.使用上講: window對象不需要創建對象,直接使用即可.

window 對象的方法：

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。他是有一個返回值的。可以用一個變量表示  var sel=confirm("hello world"),這個是和alert的區別
prompt()           顯示可提示用戶輸入的對話框。var inp=prompt("input your name") 輸入框輸入內容后，點擊確定會把輸入值返回給inp open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。open("http://www.baidu.com")
close()            關閉瀏覽器窗口。
setInterval()      按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數后調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的坐標。

?setInterval 和 clearInterval?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input id="id1" type="text" οnclick="begin()"><button οnclick="end()">停止</button>
<script>function showTime(){var current_time=new Date().toLocaleString();var ele=document.getElementById("id1");ele.value=current_time}var clock1;function begin() {if (clock1 == undefined) {showTime();clock1 = setInterval(showTime, 1000)   這里的1000就是1s}}function end() {clearInterval(clock1);clock1 = undefined;}</script></body>
</html>

History 對象

Location 對象

location.assign(URL)  （用一個新的的頁面替換當前頁面，可以后退）
location.reload()  刷新頁面
location.replace(newURL)//注意與assign的區別（用一個新的頁面替換當前的頁面，不可以后退）

DOM對象(DHTML)*****

7.1 什么是 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 元素的對象和屬性，以及訪問它們的方法。

7.2 DOM 節點?

根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點(NODE)：

整個文檔是一個文檔節點(document對象)? ?***
每個 HTML 元素是元素節點(element 對象)? ***
HTML 元素內的文本是文本節點(text對象)
每個 HTML 屬性是屬性節點(attribute對象)
注釋是注釋節點(comment對象)

畫dom樹是為了展示文檔中各個對象之間的關系，用于對象的導航。

節點(自身)屬性:

attributes - 節點（元素）的屬性節點
nodeType – 節點類型
nodeValue – 節點值
nodeName – 節點名稱
innerHTML - 節點（元素）的文本值? ?(取指定標簽中的html 文本內容 )

導航屬性:

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

我們常用的導航屬性：

parentElement              // 父節點標簽元素children                        // 所有子標簽firstElementChild          // 第一個子標簽元素lastElementChild           // 最后一個子標簽元素nextElementtSibling       // 下一個兄弟標簽元素previousElementSibling  // 上一個兄弟標簽元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="div1"><p class="p1">hello p1</p><div class="div2"> hello div2</div>
</div><script>var ele=document.getElementsByClassName("p1")[0]; 這里我們拿到的類似是一個數組類型，所以這里我們拿第一個var b_ele=ele.nextElementSibling;console.log(b_ele.innerHTML);
</script></body>
</html>

節點樹中的節點彼此擁有層級關系。

父(parent),子(child)和同胞(sibling)等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱為根（root）
每個節點都有父節點、除了根（它沒有父節點）
一個節點可擁有任意數量的子
同胞是擁有相同父節點的節點

下面的圖片展示了節點樹的一部分，以及節點之間的關系：

? ? ? ? ?

訪問 HTML 元素（節點）,訪問 HTML 元素等同于訪問節點,我們能夠以不同的方式來訪問 HTML 元素：

全局查找標簽的方法：

通過使用 getElementById() 方法?　　? ? 通過? id 來尋找，得到的是一個唯一值
通過使用 getElementsByTagName() 方法? ? 通過標簽名字尋，document.getElementsByTagName("span")
通過使用 getElementsByClassName() 方法? ?通過 class? 來尋找，得到的是是一個類似數組結構的
通過使用 getElementsByName() 方法? ? 通過標簽的name屬性來查找，得到的也是一個數組結構，所以得加上索引

局部（某一個標簽內）查找標簽不支持

getElementById

getElementsByName

7.3 HTML DOM Event(事件)

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

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。onfocus        元素獲得焦點。               //練習：輸入框
onblur         元素失去焦點。               應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.（鼠標離開輸入框，就是失去焦點）
onchange       域的內容被改變。?            應用場景：通常用于表單元素,當元素內容被改變時觸發.（三級聯動）onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下并松開。
onkeyup        某個鍵盤按鍵被松開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。（一直按著鼠標）
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開，和 onmouseout 的區別在具體項目中說onselect      文本被選中。
onsubmit      確認按鈕被點擊。

onfocus 和 onblur 的實例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input id="search" type="text" οnfοcus="f1()" οnblur="f2()" value="輸入用戶名"><script>var ele1=document.getElementById("search");function f1() {if (ele1.value=="輸入用戶名"){ele1.value=""}}function f2() {if (!ele1.value.trim()) {ele1.value = "輸入用戶名"}}
</script></body>
</html>

onload 綁定事件：

script 標簽可以放在head內

然后

<body οnlοad="fun1()"><p id="ppp">hello p</p></body>

onsubmit:（監聽一個submit事件）

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onsubmit</title>
</head>
<body>
<form action="" id="form1"><input type="text" name="username">  <!-- name和username構成鍵值對，當點擊submit的時候，鍵值對提交給后端--><input type="submit" value="提交按鈕">
</form><script>var ele=document.getElementById("form1");ele.οnsubmit=function () {
//        document.write("hello world")return false}</script><!--這里submit 有兩家事情要做，順序操作
1、執行綁定觸發事件 onsubmit，這里我們要是return false的時候就無法執行下面的操作了
2、執行submit事件，把鍵值對傳給后端-->
</body>
</html>

Event

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onsubmit</title>
</head>
<body>
<form action="" id="form1"><input type="text" name="username">  <!-- name和username構成鍵值對，當點擊submit的時候，鍵值對提交給后端--><input type="submit" value="提交按鈕">
</form><script>var ele=document.getElementById("form1");ele.οnsubmit=function (event) {event.preventDefault()}
</script><!--
這里我們使用event的preventDefault來阻止表單提交
-->
</body>
</html>

事件傳播

<div id="abc_1" style="border:1px solid red;width:300px;height:300px;"><div id="abc_2" style="border:1px solid red;width:200px;height:200px;"></div></div><script type="text/javascript">document.getElementById("abc_1").οnclick=function(){alert('111');}document.getElementById("abc_2").οnclick=function(event){alert('222');event.stopPropagation(); //阻止事件向外層div傳播.}</script>

7.4 標簽節點的增刪改查

eg:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.div1,.div2,.div3,.div4{width: 300px;height: 100px;}.div1{background-color: blueviolet;}.div2{background-color: yellow;}.div3{background-color: #396bb3;}.div4{background-color: rosybrown;}</style>
</head>
<body>
<div class="div1">div1<button οnclick="add()">add</button>
</div>
<div class="div2">div2<button οnclick="remove()">remove</button>
</div>
<div class="div3">div3<p>hello world</p><button οnlοad="update()">update</button>
</div>
<div class="div4">div4<button οnclick="select()">select</button>
</div><script>function update() {var img=document.createElement("img");img.src="123.png";var father=document.getElementsByClassName("div3")[0];var son=document.getElementsByTagName("p")[0];father.replaceChild(img,son)}function add() {var ele1=document.createElement("p"); // <p></p>ele1.innerHTML="hello p";var ele=document.getElementsByClassName("div1")[0];ele.appendChild(ele1);}function remove() {var father=document.getElementsByClassName("div1")[0];var sons_p=father.getElementsByTagName("p")[0];father.removeChild(sons_p);}
</script>
</body>
</html>

?修改 HTML DOM?

改變 HTML 內容?

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

改變 CSS 樣式?

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

改變 HTML 屬性?

? ? ? ? elementNode.setAttribute(name,value)

? ? ? ? elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

創建新的 HTML 元素?

? ? ? ? createElement(name)

刪除已有的 HTML 元素?

? ? ? ? elementNode.removeChild(node)

關于class的操作?

? ? ? ? elementNode.className

? ? ? ? elementNode.classList.add

? ? ? ? elementNode.classList.remove

?遮罩層彈出框的例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>遮罩層</title><style>.content{height: 1800px;background-color: white;}.shade{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: gray;opacity: 0.2;}.module{width: 400px;height: 200px;background-color: navajowhite;position: absolute;top: 50%;left: 50%;margin-left: -130px;margin-top: -100px;}.hide{display: none;}</style>
</head><body>
<div class="content"><button οnclick="show()">顯示遮罩層</button>
</div><div class="shade hide"></div><div class="module hide"><button οnclick="cancel()">x</button>
</div><script>function show() {var ele_shade=document.getElementsByClassName("shade")[0];var ele_module=document.getElementsByClassName("module")[0];ele_shade.classList.remove("hide");ele_module.classList.remove("hide")}function cancel() {var ele_shade=document.getElementsByClassName("shade")[0];var ele_module=document.getElementsByClassName("module")[0];ele_shade.classList.add("hide");ele_module.classList.add("hide")}
</script><!--
應用場景就是在我們點擊一個按鈕的時候彈出一個頁面，這個頁面浮在當前頁面上方，背景變成淺灰色
注意這里我們是點擊按鈕之后出現遮罩層，所以沒有點擊的時候是不現實的，所以這里我們給遮罩層和彈出框加上display:none
classList 顯示所有標簽
classList.remove 移除標簽
classList.add 添加標簽
-->
</body>
</html>

正反選練習：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正反選</title>
</head>
<body><button οnclick="selectAll()">全選</button>
<button>取消</button>
<button>反選</button>
<table border="1px"><tr><td><input type="checkbox"></td><td>111</td><td>111</td><td>111</td></tr><tr><td><input type="checkbox"></td><td>222</td><td>222</td><td>222</td></tr><tr><td><input type="checkbox"></td><td>333</td><td>333</td><td>333</td></tr>
</table>
<script>function selectAll() {var inputs=document.getElementsByTagName("input");for (i=0;i<inputs.length;i++) {var input=inputs[i];input.checked=true;}}
</script>
</body>
</html>

改裝版；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正反選</title>
</head>
<body><button οnclick="select('all')">全選</button>
<button οnclick="select('cancel')">取消</button>
<button οnclick="select('reverse')">反選</button>
<table border="1px"><tr><td><input type="checkbox"></td><td>111</td><td>111</td><td>111</td></tr><tr><td><input type="checkbox"></td><td>222</td><td>222</td><td>222</td></tr><tr><td><input type="checkbox"></td><td>333</td><td>333</td><td>333</td></tr>
</table>
<script>function select(choice) {
//        var ele=document.getElementById("table");var inputs=document.getElementsByTagName("input");for (var i=0;i<inputs.length;i=i+1){var ele2=inputs[i];if (choice=="all"){ele2.checked=true;}else if(choice=="cancel"){ele2.checked=false;}else if(choice=='reverse') {if (ele2.checked){ele2.checked=false;}else {ele2.checked=true;}}}}
</script>
</body>
</html>

　二級浮動

轉載于:https://www.cnblogs.com/smail-bao/p/9817210.html

總結

以上是生活随笔為你收集整理的js 的学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：三星堆博物馆需要身份证吗
下一篇： linux下解压缩文件中文乱码问题的解决