JavaScript個人學習心得
阿新 • • 發佈:2019-02-13
以下為本人學習JS的一些個人心得
- Js全稱JavaScript,是一門主要負責網頁行為的指令碼語言(指令碼語言就是隻能依託於其他語言才能產生作用,無法獨立使用的語言)。相關有DOM模型 ,即document object model(文件物件模型),一個HTML在JS方面看就是一個DOM樹,每一個標籤是一個節點,JS就是對DOM樹進行操作的指令碼語言。
- 獲取元素節點的一些方式:
- document.getElementById() :根據id獲取屬性,返回單個節點
- document.getElementByClassName():根據name屬性獲取,返回節點陣列
- document.getElementByTagName():根據標籤名獲取,返回節點陣列
3.獲取文字節點的方式:
- 獲取文字節點所在的元素節點
- 獲取元素節點的第一個子節點:元素節點.firstChild
- 獲取文字節點值:元素節點.firstChild.nodeValue;這個方法可以直接賦值,以改變文字節點值
4.獲取屬性節點:元素節點.屬性名;該方法可以直接賦值,以改變屬性值。
5.獲取子節點:
- .firstChild 獲取第一個子節點
- .lastChild 獲取最後一個子節點
- .childNodes 獲取所有的子節點並返回陣列
6.JS內建物件:
- window:代表瀏覽器,常用於window.onload事件,在頁面所有元素載入完成後觸發
- document:帶表HTML文件,通過該物件獲取元素節點
- console:代表控制檯,通過log()方法將資料列印到控制檯,和Java裡面的System.out.println()道理相同
7.this物件:指代當前觸發事件的節點
8.建立節點:
- 建立元素節點:document.createElement("標籤名")
- 建立文字節點:document.createTextNode("文字節點值");
- 建立屬性:元素節點.屬性名 = 值;
9.插入節點
- 將節點插入父節點中: 父節點.appendChild(子節點)
- 將節點插入到指定節點前面 父節點.insertBefore(新節點,指定節點)
10.刪除節點:節點.remove(); 刪除當前節點
11.確認提示框:
var flag = confirm("是否確定刪除");
使用者可選擇確定或不確定 返回值為布林型別
12.正則表示式:驗證文字內容是否符合業務邏輯
(1)特殊符合
- /.../正則表示式結構
- ^ 正則表示式的開頭
- $ 正則表示式的結尾
- \d 匹配內容為數字,等價[0-9]
- \D 匹配內容不為數字,等價[^0-9]
- \w 匹配內容為數字,大小寫字母,等價於[A-Za-z0-9]
- \W 匹配內容不為數字,大小寫字母,等價於[^A-Za-z0-9]
- . 匹配任意字元,包括符號,常與{}搭配,用於限制字元長度。
(2) {}限制驗證的位數:
- {n} 驗證n個字元
- {n,m}驗證至少n個字元,最多m個字元。
- {n,} 驗證至少n個字元,無上限。
- + 驗證至少1個長度,最大不限
13.JS事件
- onclick 單點選事件
- ondbclick 雙點選事件
- onchange 內容改變事件
- onmouseover 滑鼠懸停事件
- onmouseout 滑鼠移出事件
- onfous 游標聚集事件
- onblur 失去焦點事件
- onkeydown 鍵盤按下事件
14.事件冒泡
- 什麼是事件冒泡
觸發後代元素的事件,事件結束後會依次執行具有相同事件的祖先元素的事件程式碼
- 如何阻止事件冒泡
(1)需要在阻止事件冒泡的Js事件中加入[return false]
(2)event.stopPropagation();
15.Js事件監聽機制
垂直監聽 (這裡的垂直監聽是元素層級關係上的垂直,不是展示效果的垂直)
16.return false的功能
- 阻止元素預設行為。(元素預設行為指的是類似a標籤或者form表單可以跳轉頁面等元素自帶的行為)
- 阻止事件冒泡。
17.無標題
- .nodeValue 獲取節點值
- .innerHTML 獲取元素中的所有文件內容(包括換行、縮排) 來修改文件內容,或不賦值來獲取內容
- .innerText 獲取元素中的所有文字內容(換行不會被識別成空格)可以賦值來替換文件內容,或不賦值來獲取文字內容
此文件僅為個人學習簡單總結,很多地方有所欠缺,歡迎大家指教。