Java學習筆記-Day48 JavaScript（三）

金海湖底有寶藏發表於2020-12-15
筆記JavaScript

Java學習筆記-Day48 JavaScript（三）


 
 

一、JavaScript 自定義物件

 

1、Javascript中物件的定義和使用

 
在JavaScript中，除了Array、Date、Number等內建物件外，可以通過JavaScript程式碼建立自己的物件。
 
JavaScript中建立物件的方式：
 
（1）直接通過 屬性名:值 來建立物件。

		var user = {
			"name":"小明",
			"age":25,
			showinfo:function(){
				console.log(this.name+","+this.age);
			}
		};
		//輸出屬性
		console.log(user.name);
		// 呼叫方法
		user.showinfo();

 
（2）使用 Object 物件的構造方法建立物件。

		var student = new Object();
		student.name="小紅";
		console.log(student.name);

 
（3）建構函式模式：先定義函式，通過new來建立物件。

		function Person(name,age){
			this.name=name;
			this.age=age;
			this.showinfo = function(){
				console.log(this.name+","+this.age);
			}
		}
		var p = new Person("小何",25);
		console.log(p.name+","+p.age);
		p.showinfo();

 
（4）建構函式模式+原型模式。

		function Pig(name){
			this.name = name;
		}
		Pig.prototype.name = "";
		Pig.prototype.show = function(){
			console.log("name:"+this.name);
		}
		var p = new Pig("八戒");
		p.show();

 
（5）工廠模式：用函式來封裝以特定介面建立物件的細節。

			function createPerson(name,age){
				var o = new Object();
				o.name = name;
				o.age = age;
				o.showinfo = function(){
					console.log(o.name+","+o.age);
				}
				return o;
			}
			var p = createPerson("小黑",26);
			console.log(p.name+","+p.age);
			p.showinfo();

 
（6）使用 ES6 的類定義寫法建立物件。

		class Student{
			constructor(name,age){
				this.name =name;
				this.age = age;
			}
			showinfo(){
				console.log(this.name+","+this.age);
			}
			toString(){
				return this.name+","+this.age;
			}
			static go(){
				console.log(this.name+","+this.age+",static go");
			}
		}
		var s = new Student("小雷",25);
		s.showinfo();
		console.log(s.toString());
		Student.go();

 

二、閉包

 
變數 fun 指定了函式自我呼叫的返回值。函式的自我呼叫函式只執行一次，用於設定計數器為 0，並返回函式表示式。變數 fun 可以作為一個函式使用，它可以訪問函式上一層作用域的計數器，這個叫作 JavaScript 閉包，它使得函式擁有私有變數變成可能，計數器受匿名函式的作用域保護，只能通過 fun 函式修改。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">		
			//只能通過這個函式來控制變數c的變化,每次c+1			
			let fun = (function(){
				//定義並初始化,只執行一次
				let c = 0;
				//返回一個函式
				return function(){
					return ++c;
				}
				
			})();//函式自呼叫					
			console.log(fun());
			console.log(fun());
			console.log(fun());
		</script>
	</body>
</html>

 

三、BOM

 
BOM（Browser Object Model）：瀏覽器物件模型，用於操作瀏覽器視窗的一組介面。

BOM的主要物件：

（1）window：物件表示瀏覽器中開啟的視窗。Window物件也封裝了Dom標準中Global物件涵蓋的全部內容，是js、DOM、HTMLDOM的執行環境。

（2）navigator： 物件包含有關瀏覽器的資訊。獲取方式為 window.navigator。

（3）screen：物件包含有關客戶端顯示螢幕的資訊。獲取方式為 window.screen。

（4）history： 物件包含使用者（在瀏覽器視窗中）訪問過的 URL。獲取方式為 window.history。

（5）location：物件包含有關當前位址列 URL 的資訊，主要的作用是網頁跳轉。獲取方式為 window.location。

注意：navigator、screen、history、location都是window物件的一個屬性物件。
 

1、Window 物件

 
Window 物件表示一個瀏覽器視窗或一個框架。在客戶端 JavaScript 中，Window 物件是全域性物件，所有的表示式都在當前的環境中計算。也就是說，要引用當前視窗根本不需要特殊的語法，可以把那個視窗的屬性作為全域性變數來使用。例如，可以只寫 document，而不必寫 window.document。同樣，可以把當前視窗物件的方法當作函式來使用，如只寫 alert()，而不必寫 Window.alert()。

（1）Window 物件的屬性

屬性描述
closed返回視窗是否已被關閉。
defaultStatus設定或返回視窗狀態列中的預設文字。
document對 Document 物件的只讀引用。請參閱 Document 物件。
history對 History 物件的只讀引用。請引數 History 物件。
innerheight返回視窗的文件顯示區的高度。
innerwidth返回視窗的文件顯示區的寬度。
length設定或返回視窗中的框架數量。
location用於視窗或框架的 Location 物件。請參閱 Location 物件。
name設定或返回視窗的名稱。
Navigator對 Navigator 物件的只讀引用。請引數 Navigator 物件。
opener返回對建立此視窗的視窗的引用。
outerheight返回視窗的外部高度。
outerwidth返回視窗的外部寬度。
pageXOffset設定或返回當前頁面相對於視窗顯示區左上角的 X 位置。
pageYOffset設定或返回當前頁面相對於視窗顯示區左上角的 Y 位置。
parent返回父視窗。
Screen對 Screen 物件的只讀引用。請引數 Screen 物件。
self返回對當前視窗的引用。等價於 Window 屬性。
status設定視窗狀態列的文字。
top返回最頂層的先輩視窗。
windowwindow 屬性等價於 self 屬性，它包含了對視窗自身的引用。

（2）Window 物件的方法

方法描述
alert()顯示帶有一段訊息和一個確認按鈕的警告框。
blur()把鍵盤焦點從頂層視窗移開。
clearInterval()取消由 setInterval() 設定的 timeout。
clearTimeout()取消由 setTimeout() 方法設定的 timeout。
close()關閉瀏覽器視窗。
confirm()顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。
createPopup()建立一個 pop-up 視窗。
focus()把鍵盤焦點給予一個視窗。
moveBy()可相對視窗的當前座標把它移動指定的畫素。
moveTo()把視窗的左上角移動到一個指定的座標。
open()開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。
print()列印當前視窗的內容。
prompt()顯示可提示使用者輸入的對話方塊。
resizeBy()按照指定的畫素調整視窗的大小。
resizeTo()把視窗的大小調整到指定的寬度和高度。
scrollBy()按照指定的畫素值來滾動內容。
scrollTo()把內容滾動到指定的座標。
setInterval()按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
setTimeout()在指定的毫秒數後呼叫函式或計算表示式。

注意：setTimeout() 只執行程式碼一次，如果要多次呼叫，可以使用setInterval() 或者 讓程式碼自身再次呼叫setTimeout()，也就是遞迴呼叫。
 

2、Location 物件

 
location物件：物件表示視窗的地址物件，作為一個屬性封裝在 Window 物件中。

（1）Location 物件的屬性

屬性描述
host設定或獲取當前視窗地址的域名及埠。格式為127.0.0.1:8020。
hostname設定或獲取當前視窗地址的域名。格式為127.0.0.1。
protocol設定或獲取當前視窗地址的請求方式。格式為http:
port設定或獲取當前視窗地址的埠。 格式為8020。
href設定或獲取當前視窗地址的全路徑。最常用，一般用於網頁重新整理、網頁跳轉、網頁引數的解析。
search設定或返回從問號 (?) 開始的 URL（查詢部分），也就是get請求的引數和值
pathname設定或返回當前 URL 的路徑部分。

（2）Location 物件的方法

屬性描述
assign()跳轉到新地址
reload()重新載入當前地址
replace()跳轉到新地址，不會保留歷史記錄

 

3、History 物件

 
History 物件表示視窗的歷史記錄，包含使用者（在瀏覽器視窗中）訪問過的 URL。History 物件是 Window 物件的一部分，可通過 window.history 屬性對其進行訪問。

（1）History 物件的屬性

屬性描述
length返回瀏覽器歷史列表中的 URL 數量。

（2）History 物件的方法

方法描述
back()載入 history 列表中的前一個地址。
forward()載入 history 列表中的下一個地址。
go()載入 history 列表中的某個具體頁面。
引數為1代表前進，引數為 -1代表後退，無引數的話表示最開始頁面

 

四、DOM

 

HTML DOM文件物件模型在DOM的基礎上擴充套件了每一個專有標籤的方法和屬性。

（1）Html屬性：

屬性描述
innerHTML設定或獲取當前元素內的html。
innerText設定或獲取當前元素內的文字內容。
outerHTML獲取元素的外部html。

（2）獲取大小的屬性

屬性描述
offsetHeight/offsetWidth獲取使用者可見的當前物件的高度和寬度，包含邊線。
scrollHeight/scrollWidth獲取當前物件的實際寬度和高度，包含需要滾動的部分。

（3）位置屬性

屬性描述
offsetParent獲取當前元素距離最近的使用相對定位獲取絕對定位的祖元素。
offsetLeft/offsetTop獲取當前元素的左上角與其offsetParent的左上角的水平/垂直方向的偏移量。

當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。

+HTML DOM 模型被構造為物件的樹。

在這裡插入圖片描述
 

1、Document 物件

 
每個載入瀏覽器的 HTML 文件都會成為 Document 物件。Document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。Document 物件是 Window 物件的一部分，可通過 window.document 屬性對其進行訪問。
 

1.1、獲取 DOM 元素物件的方法

 
（1）getElementById()：返回對擁有指定 id 的第一個物件的引用。

	let a = document.getElementById("btnforward").value;

（2）getElementsByName()：返回帶有指定名稱的物件集合。

	let b = document.getElementsByName("hist");

（3）getElementsByTagName()：返回帶有指定標籤名的物件集合。

	let c = document.getElementsByTagName("a");

（4）getElementsByClassName()：返回帶有指定類名的物件集合。

	let d = document.getElementsByClassName("classname");

 

1.2、改變 HTML 內容

 
（1）改變 HTML 元素的內容，能解析HTML標籤。

document.getElementById(標籤的ID).innerHTML = 內容;

（2）改變 HTML 元素的內容，能解析HTML標籤。

document.getElementById(標籤的ID).innerText = 內容;

 

1.3、改變 HTML 屬性

 
改變 HTML 元素的屬性

document.getElementById(標籤的ID).屬性 = 值;

 

1.4、改變 HTML 樣式

 

document.getElementById(標籤的ID).style.屬性 = 值;

 

2、Event 物件

 
Event 物件代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。事件通常與函式結合使用，函式不會在事件發生前被執行。
 

2.1、滑鼠事件

 

屬性描述
onclick當使用者點選某個物件時呼叫的事件控制程式碼。
oncontextmenu在使用者點選滑鼠右鍵開啟上下文選單時觸發。
ondblclick當使用者雙擊某個物件時呼叫的事件控制程式碼。
onmousedown滑鼠按鈕被按下。
onmouseenter當滑鼠指標移動到元素上時觸發。
onmouseleave當滑鼠指標移出元素時觸發。
onmousemove滑鼠被移動。
onmouseover滑鼠移到某元素之上。
onmouseout滑鼠從某元素移開。
onmouseup滑鼠按鍵被鬆開。

 

  • 案例：隨著滑鼠移動的時間
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="flytime" style="position: absolute;">flytime</div>
		<script type="text/javascript">
			document.onmousemove = function(){
				//改變層的位置
				document.getElementById("flytime").style.top=event.clientY+"px";
				document.getElementById("flytime").style.left=event.clientX+"px";
			}
			
			function showtime(){
				document.getElementById("flytime").style.color="red";
				//設定flytime為當前時間
				document.getElementById("flytime").innerHTML = new Date().toLocaleString();
			}		
			setInterval("showtime()",1000);
		</script>
	</body>
</html>

 

2.2、鍵盤事件

 

屬性描述
onkeydown某個鍵盤按鍵被按下（不區分字母大小寫）。
onkeypress某個鍵盤按鍵被按下並鬆開（區分字母大小寫）。
onkeyup某個鍵盤按鍵被鬆開。

 

2.3、表單事件

 

屬性描述
onblur元素失去焦點時觸發。
onchange該事件在表單元素的內容改變時觸發。
onfocus元素獲取焦點時觸發。
onfocusin元素即將獲取焦點時觸發。
onfocusout元素即將失去焦點時觸發。
oninput元素獲取使用者輸入時觸發。
onreset表單重置時觸發。
onsearch使用者向搜尋域輸入文字時觸發 。
onselect使用者選取文字時觸發 。
onsubmit表單提交時觸發 ，在form標籤中。

 

2.4、事件操作

 
onclick：三個相同事件,繫結在同一個按鈕上,點選按鈕時，只觸發最後一個事件(覆蓋了前面的事件)。

addEventListener的click：三個相同事件,繫結在同一個按鈕上,點選按鈕時，將會觸發三個事件。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>	
		<button type="button" id="btn1">觸發事件1</button>
		<button type="button" id="btn2">觸發事件2</button>
		<script type="text/javascript">
			//onclick:三個相同事件,繫結在同一個按鈕上,點選按鈕時，只觸發最後一個事件(覆蓋了前面的事件)。
			document.getElementById("btn1").onclick = function  () {
				console.log("btn1 觸發事件 1");
			}
			document.getElementById("btn1").onclick = function  () {
				console.log("btn1 觸發事件 2");
			}
			document.getElementById("btn1").onclick = function  () {
				console.log("btn1 觸發事件 3");
			}
			//addEventListener的click:三個相同事件,繫結在同一個按鈕上,點選按鈕時，將會觸發三個事件。
			document.getElementById("btn2").addEventListener("click",function () {
				console.log("btn2 觸發事件 1");
			});
			document.getElementById("btn2").addEventListener("click",function () {
				console.log("btn2 觸發事件 2");
			})
			document.getElementById("btn2").addEventListener("click",function () {
				console.log("btn2 觸發事件 3");
			})		
		</script>
	</body>
</html>

 

2.4、事件的冒泡和捕獲

 
事件冒泡：事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的節點。也就是說，事件會從最內層的元素開始發生，一直向上傳播，直到document物件。

事件捕獲：事件從最不精確的物件（document 物件）開始觸發，然後到最精確，與事件冒泡相反，事件會從最外層開始發生，直到最具體的元素。

addEventListener方法用來為一個特定的元素繫結一個事件處理函式，是JavaScript中的常用方法，其傳入三個引數，分別是 沒有on的事件型別（例如click） ，事件處理函式，控制事件階段，第三個引數是boolean型別，預設是false，表示在事件冒泡的階段呼叫事件處理函式，如果傳入true，就表示在事件捕獲的階段呼叫事件處理函式。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			div1
			<p id="p1">p1</p>
		</div>
		
		<button type="button" id="btn">事件</button>
		<script type="text/javascript">		
			//冒泡事件和捕獲事件
			document.getElementById("div1").addEventListener("click",function () {
				console.log("點選div1");
			},true);
			document.getElementById("p1").addEventListener("click",function () {
				console.log("點選p1");
			})
		</script>
	</body>
</html>

 

2、全選和反選案例

 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="Checkbox" value="全部" id="selectAll">全部
		<input type="button" name="" id="reverse" value="反選" />
		<hr>
		<input type="Checkbox" name="enjoy" value="吃">吃
		<input type="Checkbox" name="enjoy" value="喝">喝
		<input type="Checkbox" name="enjoy" value="玩">玩
		<input type="Checkbox" name="enjoy" value="樂">樂
		
		<script type="text/javascript">
			//全選
			document.getElementById("selectAll").onclick = function(){
				//獲取name為enjoy的所有標籤
				let array = document.getElementsByName("enjoy");
				for (let s of array) {
					s.checked = this.checked;
				}
			}
			//反選
			document.getElementById("reverse").onclick = function(){
				//獲取name為enjoy的所有標籤
				let array = document.getElementsByName("enjoy");
				for (let s of array) {
					s.checked = !(s.checked);
				}
			}		
		</script>
	</body>
</html>

相關文章