JS基礎學習第七天

心有明珠，山河明媚發表於2021-04-13
JS

包裝類

在JS中為我們提供了三個包裝類：
String() Boolean() Number()
通過這三個包裝類可以建立基本資料型別的物件
例子：

1
2
3
 
var num = new Number(2);  
var str = new String("hello");  
var bool = new Boolean(true);

 

但是在實際應用中不會這樣使用。

當我們去操作一個基本資料型別的屬性和方法時，
解析器會臨時將其轉換為對應的包裝類，然後再去操作屬性和方法，
操作完成以後再將這個臨時物件進行銷燬。

Date

日期的物件，在JS中通過Date物件來表示一個時間

建立物件

建立一個當前的時間物件

1
 
var d = new Date();

 

建立一個指定的時間物件

1
 
var d = new Date("月/日/年 時:分:秒");

方法：

詳見文件

Math

Math屬於一個工具類，它不需要我們建立物件，它裡邊封裝了屬性運算相關的常量和方法
我們可以直接使用它來進行數學運算相關的操作

方法：

詳見文件

字串的相關的方法

詳見文件

正規表示式

正規表示式用來定義一些字串的規則，程式可以根據這些規則來判斷一個字串是否符合規則。
也可以將一個字串中符合規則的內容提取出來。
建立正規表示式
var reg = new RegExp("正則","匹配模式"); 注意：使用建構函式時，由於它的引數是一個字串，而\是字串中轉義字元，如果要使用正則中的 \ 則需要使用 \\ 來代替。（看輸出結果，正則中需要輸出 \. 才可以表示普通的 . 字元，而在字串中寫 \. 只會輸出 . ，所以要寫 \\.）

var reg = /正規表示式/匹配模式 

匹配模式：
i:忽略大小寫
g:全域性匹配模式（使用它是因為正則中預設只匹配1次）
設定匹配模式時，可以都不設定，也可以設定1個，也可以全設定，設定時沒有順序要求

具體語法，詳見文件

DOM

 

 

 

 

 

 

 

 

 

 

 

 

 

DOM------>用來操作網頁
DOM中的物件和網頁是一一對應的關係

文件的載入

瀏覽器在載入一個頁面時，是按照自上向下的順序載入的，載入一行執行一行。
如果將js程式碼編寫到頁面的上邊，當程式碼執行時，頁面中的DOM物件還沒有載入，
此時將會無法正常獲取到DOM物件，導致DOM操作失敗。
解決方式一：
可以將js程式碼編寫到body的下邊

1
2
3
4
5
6
7
8
9
10
 
<body>  
　　<button id="btn">按鈕</button>  
  
　　<script>  
　　　　var btn = document.getElementById("btn");  
　　　　btn.onclick = function(){  
		  
　　　　};  
　　</script>  
</body>

 

解決方式二：
將js程式碼編寫到window.onload = function(){}中
window.onload 對應的回撥函式會在整個頁面載入完畢以後才執行，
所以可以確保程式碼執行時，DOM物件已經載入完畢了

1
2
3
4
5
6
7
 
<script>  
    window.onload = function(){  
        var btn = document.getElementById("btn");  
        btn.onclick = function(){  
        };  
    };  
</script>

 事件

 

 

 

繫結事件的方式：
1.可以在標籤的事件屬性中設定相應的JS程式碼
例子：

1
 
<button onclick="js程式碼。。。">按鈕</button>

 

2.可以通過為物件的指定事件屬性設定回撥函式的形式來處理事件
例子：

1
2
3
4
5
6
7
 
<button id="btn">按鈕</button>  
<script>  
    var btn = document.getElementById("btn");  
    btn.onclick = function(){  
  
    };  
</script>

DOM查詢

在網頁中瀏覽器已經為我們提供了document物件，
它代表的是整個網頁，它是window物件的屬性，可以在頁面中直接使用。

獲取元素節點（通過document物件呼叫）

根據元素的id屬性查詢一個元素節點物件：
document.getElementById("id屬性值");

根據元素的name屬性值查詢一組元素節點物件:
document.getElementsByName("name屬性值");

根據標籤名來查詢一組元素節點物件：
document.getElementsByTagName("標籤名");
-這個方法會給我們返回一個類陣列物件，所有查詢到的元素都會封裝到該陣列物件中，即使查詢到的元素只有一個，也會封裝到陣列中返回

讀取元素的屬性

語法：元素.屬性名
例子：　ele.name
　　　　ele.id
　　　　ele.value
　　　　ele.className
注意：class屬性不能採用這種方式，
讀取class屬性時需要使用 元素.className

innerHTML

使用該屬性可以獲取或設定元素內部的HTML程式碼，會獲取到html標籤

innerText

使用該屬性可以獲取或設定元素內部的文字內容
它和innerHTML相似，不同的是它會自動將html標籤去除，如果使用這兩個屬性來設定標籤內部的內容時，沒有任何區別

讀取元素的文字內容的其他方法（推薦使用上方兩個inner屬性，這個僅作了解）

元素.firstChild.nodeValue

獲取元素節點的子節點（通過具體的元素節點呼叫）

返回當前節點的指定標籤名後代節點：（方法）
getElementsByTagName("標籤名");

表示當前節點的所有子節點：（屬性）
childNodes
childNodes屬性會獲取包括文字節點在內的所有節點，根據DOM標準。標籤間的空白也會被當成文字節點

獲取當前元素的所有子元素：（屬性）
children

表示當前節點的第一個子節點：（屬性）
firstNodes

獲取當前元素的第一個子元素：（屬性，不支援IE8）
firstElementChild

表示當前節點的最後一個子節點：（屬性）
lastChild

獲取父節點和兄弟節點（通過具體的元素節點呼叫）

表示當前節點的父節點：（屬性）
parentNode

表示當前節點的前一個兄弟節點：（屬性）
previousSibling

獲取當前元素的前一個兄弟元素：（屬性，不支援IE8）
previousElementSibling

表示當前節點的後一個兄弟節點：（屬性，不支援IE8）
nextSibling

 

學識淺薄，如有錯誤，懇請斧正，在下不勝感激。

相關文章