Java全棧大資料學習筆記NO.11（JavaScript提升2）

JavaScript提升2

- 一、節點操作
- 二、事件
- 三、window對象常用方法
- 四、正規表達式
- 五、json對象
- 六、附加文法

一、節點操作

在 HTML DOM 中，所有事物都是節點，DOM 是被視為節點樹的 HTML。

replaceChild(new,old); 替換節點
appendChild(); 追加節點，在父節點中追加子節點，按順序放置在最後
insertBefore(new,old); 插入節點，在old節點前插入new節點

old.insertBefore(new,null); 在old節點後插入new節點

舉例說明：将這三個節點操作方法放到一個程式中進行實驗，對p标簽進行操作

<div id="div1">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
</div>
<input type="button" value="替換節點" onclick="replaceNode()"/>
<input type="button" value="追加節點" onclick="appendNode()"/>
<input type="button" value="插入節點" onclick="insertNode()"/>
<script>
	var pArr = document.getElementsByTagName("p");
	var h1 = document.createElement("h1");
	h1.innerHTML = "h1";
	var div1 = document.getElementById("div1");
	
	//替換節點的方法
	function replaceNode(){
		div1.replaceChild(h1,pArr[3]);
	}
	//追加節點的方法
	function appendNode(){
		div1.appendChild(h1);
	}
	//插入節點的方法
	function insertNode(){
		//在old節點前插入new節點
		//div1.insertBefore(h1,pArr[2]);
		//在old節點後插入new節點
		pArr[1].insertBefore(h1,null);
	}
</script>

Java全棧大資料學習筆記NO.11（JavaScript提升2）

.parentNode 查找父節點
.childNodes 查找子節點，數組，且其中的文本、回車換行都會認為是子節點
nodeName 節點名稱
- 元素節點：是标簽名稱
- 屬性節點：是屬性名稱
- 文本節點的：永遠是#text
- 文檔節點的：永遠是#document

nodeType 節點類型

重要的節點類型

元素類型	節點類型
元素element	1
屬性attr	2
文本text	3
注釋comments	8
文檔document	9

nodeValue 節點的值

對于文本節點，nodeValue屬性包含文本
對于屬性節點，nodeValue屬性包含屬性值

//擷取p1的父節點
var p1 = document.getElementById("p1");
//列印p1的父節點
console.log(p1.parentNode);
//列印p1父節點的父節點
console.log(p1.parentNode.parentNode);
//列印p1的子節點，得到的是一個數組
console.log(div1.childNodes);
//列印p1子節點下标為0的節點名稱
console.log(div1.childNodes[0].nodeName);
//列印p1子節點下标為1的節點類型
console.log(div1.childNodes[1].nodeType);
//列印p1子節點下标為0的節點的值
console.log(div1.childNodes[0].nodeValue);

二、事件

事件：滑鼠鍵盤觸發引起的

之前用過的 onclick ：點選按鈕後實作某種功能就是事件，還有許多其他事件（部分）

onclick 點選事件
ondblclick 滑鼠輕按兩下
onload 載入/某個頁面或圖像被完成加載
onchange 内容改變
onblur 失去焦點
onkeypress 某個鍵盤的鍵被按下或按住
onkeyup 某個鍵被松開
onmouseout 滑鼠從某元素移開
onmouseover 滑鼠被移動到元素之上

綁定事件方式：有兩種方式

事件=“函數名”
事件=“函數體”

<!-- 事件="函數名" -->
<button id="btn1" onclick="test1()">按鈕1</button><br>
<!-- 事件="函數體" -->
<button id="btn2" onclick="alert('test2')">按鈕2</button><br>

添加事件：addEventListener(event,function,useCapture);

移除事件：removeEventListener(event,function,useCapture);
- event是事件類型 click mouseover 沒有on
- function 事件執行的函數
- useCapture 布爾值，指定事件是冒泡還是捕獲。此參數可寫可不寫，預設為false
  
  冒泡和捕獲是對于事件的，例如在div元素中有p元素，兩個元素都有點選事件，當點選p元素時先觸發哪個就是由第三個參數決定的，冒泡是首先處理内部的事件再處理外部，捕獲則是先處理最外層再處理内部。
onsubmit 可以實作校驗

如利用onsubmit實作表單的校驗，如果使用者名未被注冊可以送出，否則不可以送出。onsubmit的值是true或false，true則可以送出。

注：要想獲得checkForm的傳回值，得在函數前再加個return。
```
<form action="04-事件的綁定和解除.html" method="get" onsubmit="return checkForm()">
	USERNAME:<input type="text" id="input1"><br>
	<input type="submit" value="送出"/>
</form>
           
```

三、window對象常用方法

之前用的alert、prompt等方法其實就是window的内容，如

window.alert("test"); //javascript中寫
var input = window.prompt("請輸入一個數字");
var flag = window.confirm("是否通過");

定時操作：window.setInterval(函數名,時間間隔) 機關毫秒，循環執行多次，也可以不加前面的window.
```
setInterval(print,1000); //javascript中寫
var num = 1;
function print(){
	console.log(num++);
}
           
```

停止操作：clearInterval(對象); 要先将對象指派給一個變量

var timeid;
timeid = setInterval(setName,100);
clearInterval(timeid);

setTimeout(函數名,時間間隔) 開始執行設定的時間後，調用方法，隻執行一次

四、正規表達式

正規表達式可以對賬号密碼等進行驗證，檢視是否符合規格，下面有幾種表達方式：

[abcde] 表示abcde其中的一個字元
[^abc] 必須不是其中任何一個字元
[a-z] 所有的小寫字母 [A-Z]大寫字母 [A-Za-z]所有字母
[c-f] 從c到f
[0-9] 一個數字
[a-zA-Z0-9] 字母和數字
[^a-z][^A-Z][^0-9] 非字母非數字
[\u4e00-\u9fa5] 漢字

另一種方式

\s 空白(空格，制表符，換行，換頁，回車)
\S 非空白
\d 數字相當于[0-9]
\D 非數字
\w 字母或數字相當于[0-9a-zA-Z]
\W 非字母或數字

表示比對次數的元字元

* 0次到多次
+ 1次到多次
? 0次或1次
{n} 正好n次(n是數字)
{n,} 至少n次
{n,m} n次到m次

練習：

// 1.銀行卡的六位數字密碼校驗
var reg = /^\d{6}$/;
var reg = /^[0-9]{6}$/
// 2.不能為空，多個純小寫字母組成
var reg = /^[a-z]+$/;
// 3.首字母為大寫或小寫，其餘的為數字，總長度在5-8位之間
var reg = /^[a-zA-Z][0-9]{4,7}$/;
// 4.要求隻能輸入331或251，(|)表示或
var reg = /^(33|25)1$/;
// 5.座機号碼前邊為區号3-4位，第一位是0 中間有- 後邊是7-8位數字
var reg = /^0[0-9]{2,3}-[0-9]{7,8}$/;
// 6.手機号，第一位1 第二位 3,4,5,7,8,9 後邊的随意共11位
var reg = /^1[345789][0-9]{9}$/;
// 7.出生年月 19幾幾-月01-12-日01-31 假設每個月都有31天
var reg = /^(19|20)\d\d-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/;
// 8.郵箱 有且僅有一個@和. @在.之前 且@不能使第一位 .也不能是最後一位 @和.不能相鄰
var reg = /^.+@.+[.].+$/;
// 9.身份證号 前6位數字出生年月日8位 151617位随意 最後一位可以是數字或者x X
var reg = /^\d{6}(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|x|X)$/;

五、json對象

JSON：JavaScript Object Notation(JS對象表示法)，JSON 是存儲和交換文本資訊的文法，獨立于語言和平台，前後端分離

文法：名稱/值，如{name:value,name:value…}，name有雙引号，value根據具體的值判斷有無雙引号

一般都是用{}建立對象，如：

var json1 = {"age":12,"bookname":"三國演義","flag":true};
console.log(json1.bookname);
		 	
var json2 = {
	"sites":[
		{"name":"菜鳥教程","url":"www.runoob.com"},
		{"name":"google","url":"www.google.com"},
		{"name":"微網誌","url":"www.weibo.com"}
	]
} 
console.log(json2.sites[2].url);

再實際應用中，背景給前端的資料是json格式的字元串，而不是json對象，是以要把字元串轉換成對象。有兩種方法

JSON.parse

var str = '{"stuname":"小明","age":12,"phone":"13566887777"}';
var jsonObj = JSON.parse(str);
console.log(jsonObj);

Java全棧大資料學習筆記NO.11（JavaScript提升2）

eval 利用eval将字元串轉換為對象 eval(’(’+str+’)’)，

加小括号的原因：eval({json格式的代碼塊}) 大括号會認為是代碼塊，加上小括号才能識别出來，變成對象
```
var str = '{"stuname":"小明","age":12,"phone":"13566887777"}';
var obj2 = eval('('+str+')');
console.log(obj2);
           
```
Java全棧大資料學習筆記NO.11（JavaScript提升2）
eval 還有另一個功能，就是eval将字元串表達式進行運算擷取結果
```
console.log("1+1");
console.log(eval("1+1"));
           
```
Java全棧大資料學習筆記NO.11（JavaScript提升2）

六、附加文法

this 關鍵字：代表目前對象

如下面程式，在點選按鈕後會将整個input标簽都傳過去
```
<input type="button" value="删除" onclick="deleteTr(this)">
<script>
	function deleteTr(obj){
		console.log(obj);
	}
</script>
           
```
Java全棧大資料學習筆記NO.11（JavaScript提升2）
.focus(); 落焦點，焦點保持

如下面程式，即使滑鼠點選其他空白區域，焦點仍然在input文本框内(其他程式不做記錄，這裡隻記用法)

startsWith(); 一個一個比對，直到出現不一緻則false

如下面程式，兩個文本框輸入的密碼直到出現第一個不一緻才進行提示

if(pwd1.startsWith(pwd2)){
	document.getElementById("div1").innerHTML="";
}
else{
	document.getElementById("div1").innerHTML="<font>兩次密碼不一緻</font>";
}

.toString(n) 将變量轉換成n進制，n可以是2-36之間的整數，若不寫則預設是10進制

var num=15; //小數也可以
console.log(num.toString(16)); //列印結果為f

CSS樣式中的 display=“none”; 是令元素徹底消失，會影響布局；

visibility=“hidden”; 使元素隐藏，元素所占位置不變，不會影響布局；

Java全棧大資料學習筆記NO.11（JavaScript提升2）

JavaScript提升2

一、節點操作

二、事件

三、window對象常用方法

四、正規表達式

五、json對象

六、附加文法

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條