JavaScript學習2-BOM

原創 danny1991 2020-07-06 15:19

1.BOM的概述

browser object modal :瀏覽器對象模型。

瀏覽器對象：window對象。

Window 對象會在 <body> 或 <frameset> 每次出現時被自動創建。

BOM Navigator   獲取當前所用的瀏覽器信息

BOM Screen       獲取當前所用的屏幕的信息

2. window的屬性-祖宗對象

innerHeight:

innerWidth:  IE不支持

通用寫法：document.body.clientWidth（window被省略）

document.body.clientHeight


self :等同於window對象

opener：是打開窗口的父窗口對象。（貌似谷歌不支持，害我調了那麼久）

2種情況下使用opener:

1.使用winodw.open()方法打開的頁面

2.超鏈（裏面的target屬性要設置成_blank）

示例：數據子傳父

父親頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>opener屬性</title>
</head>
<script type="text/javascript">
	<!--
	function fun(){
		self.open("sub1.html");
	}
	//-->
</script>
<body>
	傳來的數據：<input type="text" id="txt" /><br />
	<!--<a href="sub1.html" target="_blank">打開子窗口</a>-->
	<input type="button" value="打開子頁面" οnclick="fun()" />
</body>
</html>


sub1頁面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sub1</title>
</head>
<script type="text/javascript">
	<!--
	function fun(){
		var text = document.getElementById("txt").value;
		var hl= window.opener;
		var txt = hl.document.getElementById("txt");
		txt.value = text;
	}
	//-->
</script>

<body>
	要傳遞的數據：<input type="text" id="txt" />
	<input type="button" value="把數據傳遞到父窗口" οnclick="fun()" />
</body>
</html>


parent：是打開窗口的父窗口對象。

2種情況下使用parent:

1.iframe 框架

2.frame 框架

frames[]: 數組類型，代表子窗口的window對象的集合,可以通過frames[索引]拿到子窗口的window對象。

示例：父子窗口相互傳參.

open方法，是打開一個頁面.

示例：數據父子互傳

父親頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent屬性</title>
</head>
<script type="text/javascript">
	<!--
	function fun(){
		var txt = document.getElementById("txt").value;
		var son = window.frames[0];
		var t = son.document.getElementById("txt");
		t.value = txt;
	}
	//-->
</script>

<body>
	數據：<input type="text" id="txt" /><br />
	<input type="button" value="傳給子窗口" οnclick="fun()" /><br />
	<iframe src="sub2.html" ></iframe>
</body>
</html>


sub2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sub2</title>
</head>
<script type="text/javascript">
	<!--
	function fun(){
		var txt = document.getElementById("txt").value;
		var p = window.parent;
		var t = p.document.getElementById("txt");		//此處的t爲引用類型的object，因此可以改變父親文本框的內容
		t.value = txt;
		/*  錯誤示例！！！
		var t = p.document.getElementById("txt").value;  //此處的t僅爲string類型變量不能改變父親文本框內容！！！
		t = txt;
		*/
	}
	//-->
</script>

<body>
	數據：<input type="text" id="txt" /><br />
	<input type="button" value="傳給父窗口" οnclick="fun()" /><br />
</body>
</html>


對話框：

1)消息框 alert() ;                              ----排錯用

2)確認框 confirm() ;                         ----返回boolean型

while(true){
if(confirm("你愛我嗎？") == false)
continue;
break;
}

3)輸入框 prompt() ; (瞭解)               ----返回輸入的字符串
var a = prompt("請輸入年齡",12);
alert(a);


定時器：

setTimeout ,setInterval

定時器：          1.setTimeout() ：只會調用1次     因此一般寫在函數內部，每次調用都產生一個計時器，當跑完了就自動銷燬了

clearTimeout()：銷燬setTimeout()計時器

2.setInterval() ：每隔一段時間調用1次

 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>window對象的計時器</title>
 </head>
	<script type="text/javascript">
	<!--
		/*
			window對象的計時器：1.setTimeout(): 隔一段時間調用某個函數(只調用一次),返回的是一個計時器(理解成一個手錶)
								  clearTimeout() ：銷燬由setTimeout()產生的計時器
								2.setInterval(): 每隔一段時間調用某個函數(多次調用)
								  clearInterval(): 銷燬由setInterval()產生的計時器
		*/
		 var t ; 
		 var t1 ;
		function fun(){
			//拿到p標籤的主體內容
			var p= document.getElementById("p") ;
			var v = p.innerHTML ;
			//將主體內類轉換爲number,轉換後賦值回去
			p.innerHTML = v*1-1 ;
			t = setTimeout("fun()",1000) ;
		}

		function fun1(){
			//拿到p標籤的主體內容
			var p= document.getElementById("p") ;
			var v = p.innerHTML ;
			//將主體內類轉換爲number,轉換後賦值回去
			p.innerHTML = v*1-1 ;
			
		}

		function fun2(){
			clearTimeout(t) ;
		}
		
		t1 = setInterval("fun1()",1000);

		function fun3(){
			clearInterval(t1) ;
		}

		function fun4(){
			t1 = setInterval("fun1()",1000);
		}
	//-->
	</script>
 <body>
	  <p id = "p">10</p><br>
	  <input type="button" value="演示setTimeout方法" οnclick="fun()">
	  <input type="button" value="演示clearTimeout方法" οnclick="fun2()">
	  <input type="button" value="演示setInterval方法" οnclick="fun4()">
	  <input type="button" value="演示clearInterval方法" οnclick="fun3()">

 </body>
</html>


模態窗體：

對話框一般分爲兩種類型：模態類型（modal）與非模態類型（modeless）。

所謂模態對話框，就是指除非採取有效的關閉手段，用戶的鼠標焦點或者輸入光標將一直停留在其上的對話框。

非模態對話框則不會強制此種特性，用戶可以在當前對話框以及其他窗口間進行切換。

window.showModalDialog("你好");
self.showModelessDialog("你好");

區別只是版本不同，第一個舊版本。


3. history對象

存儲了訪問過的對象

a.  forward()前進

b.  back() 後退

c.  go(n) 正數是前進，負數是後退.


4. location對象。

1.href 屬性： 是指要連接到其他的URL

寫法一、window.location.href='demo_window對象的close方法.html' ；

寫法二、window.location='demo_window對象的close方法.html' ；


2.reload方法: 刷新

寫法： window.location.reload() ；




5.常用事件

a、鼠標移動事件

****onmousemove(event) : 鼠標移動事件 event是事件對象。名字固定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標的移動事件</title>
<style type="text/css">
	div{
		width:300px;
		height:300px;
		border:1px solid red;
	}
</style>
</head>
<script type="text/javascript">
	<!--
	function fun(e){
		var x = e.clientX;
		var y = e.clientY;
		var p=document.getElementById("txt");
		p.value = x +":" + y;
	}
	//-->
</script>
<body>
	<input type="text" id= "txt" />
	<div οnmοusemοve="fun(event)">ss</div>
</body>
</html>
 

****onmouseover : 鼠標懸停事件

this: 把this寫在那個標籤裏面就代表那個標籤對象          this是包含它的函數作爲方法被調用時所屬的對象。
this.style.backgroundColor : 當調用樣式表中的屬性的時候，如果屬性中間有橫槓，則應去掉.

動態註冊：
btn.οnclick=function (){
img.style.display="none";
this.disabled="disabled";			
};
function fun(obj){
obj.value="小白";
}
<input type="button" value="搜狐" id="btn2" οnclick="fun(this)" />


****onmouseout : 鼠標移出事件

js調用css的方法：

1、利用對象的style屬性：對於中間有橫槓的屬性，需要去掉-將首字母大寫             background-color    ->backgroudColor

2、利用className連接到類選擇器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標懸停及移出事件</title>
<style type="text/css">
	.one{
		color:red;
		border:6px solid green;
		cursor:pointer;
	}
</style>
</head>
<script type="text/javascript">
	<!--
	function fun(){
		var p = document.getElementById("p");
		//p.style.color = "red";
		//p.style.border = "1px solid green";
		p.className = "one";
		//p.style.backgroundImage="url(images/1.jpg)";
		p.style.backgroundColor="red";
	}
	function fun1(){
		var p = document.getElementById("p");
		p.className = "";            	//選擇器空，去除類選擇器的樣式
		p.style.cssText="";				//去除具體的樣式
		//p.style.backgroundImage="";	//去除圖片
	}
	//-->
</script>
<body>
<p οnmοuseοver="fun()" οnmοuseοut="fun1()" id="p">你好</p>
</body>
</html>


b、鼠標點擊事件

onclick 

調用css利用style屬性，調用html則可以利用innerHTML！！！

html屬於初始化，js動態修改其屬性！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標的單擊事件</title>
<style type="text/css">
	img{
		width:300px;
		height:300px;
	}
</style>
</head>
<script type="text/javascript">
	<!--
	var hb=0;
	var test=0;
	function init(){
		var btn = document.getElementById("btn");
		var btn1 = document.getElementById("btn1");
		var img = document.getElementById("i");
		btn.οnclick=function (){
			img.style.display="none";
			this.disabled="disabled";			
		};
		btn1.οnclick=function(){
			img.style.display="block";
			btn.removeAttribute("disabled");			
		}	
	}
	
	function fun(obj){
		if(hb%2==0)
		obj.value="小白";
		else
		obj.value="小黑";
		hb++;
	}
	
	function fun1(){
		var p = document.getElementById("p");
		p.innerHTML="<img src='images/2.gif' id='i' /><br />";
	}
	
	function fun2(){
		var p = document.getElementById("btn2");
		//p.removeAttribute("onclick");
		if(test==0)
		p.οnclick=function(){};
		else
		fun(p);
		test++;
	}
	//-->
</script>
<body οnlοad="init()">
	<img src="images/1.jpg" id="i" /><br />
	<input type="button" value="圖片不見了" id="btn" /><br />
	<input type="button" value="圖片出見了" id="btn1" /><br />
	<input type="button" value="搜狐" id="btn2" οnclick="fun(this)" /><br />
	<input type="button" value="取消搜狐的單擊事件" id="btn4" οnclick="fun2()" /><br />
	<input type="button" value="添加一幅圖片" id="btn3"  οnclick="fun1()"/><br />
	<p id="p"></p>
</body>
</html>


c、加載與卸載事件 

onload：

body中，或一張圖片，內容加載完畢後調用

可以調用多個函數，用逗號隔開：οnlοad="fun(),fun1()"

onunload：

關閉頁面。

d、聚焦與離焦事件

onfocus, onblur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>聚焦離焦事件</title>
</head>
<script type="text/javascript">
	<!--
	function fun1(obj){
		obj.style.backgroundColor="red";
	}
	function fun2(obj){
		obj.style.backgroundColor="";
		if(obj.value=="")
		{
			alert("內容不能爲空！");
			//obj.focus();
		}
	}
	//-->
</script>
<body>
	名字：<input type="text" οnfοcus="fun1(this)" οnblur="fun2(this)"  />
</body>
</html>

e、鍵盤事件

onkeypress,onkeyup,onkeydown

onkeypress: 按下鍵盤按鍵並鬆開
onkeydown : 按下按鍵發生
onkeyup: 鬆開按鍵

<script type="text/javascript">
<!--
function fun(obj,e){
obj.value=e.keyCode;
}
//-->
</script>

<input type="text" οnkeypress="fun(this,event)" />

f、提交與重置事件

onsubmit,onreset

針對於表單，因此必須寫在form表單中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提交與重置事件</title>
</head>
<script type="text/javascript">
	<!--
	function check(obj){
		var txt = obj.username;
		if(txt.value == "")
		{
			var formation = document.getElementById("p");
			formation.innerHTML="<font color='red'>*  用戶名必須填寫</font>";
			txt.focus();
			return false;
		}
		return true;
	}
	
	function fun(obj){
		alert("進來了");
		return false;
	}
	//-->
</script>
<body>
	<form method="post" action="01-JavaScript與HTML結合.html" οnsubmit="return check(this)" οnreset="return fun(this)">
		用戶名：<input type="text" name="username"  /><span id="p"><font color="red">*</font></span><br />
		<input type="submit" value="提交" />
		<input type="reset" value="重置" />
	</form>
</body>
</html>

g、選擇與改變事件

onselect: 只能用於輸入框. 當選擇輸入框中的文本時發生
onchange: 用於select和文本框.
對於下拉框是在選項發生變化的時候發生
對於文本框是在文本框的內容發生變化並且失去焦點時發生

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>選擇與改變事件</title>
</head>
<script type="text/javascript">
<!--
function fun(object){
alert(object.value);

}

function fun1(v){
alert(v);
}
function fun2(obj,x,y){
obj.options[y].innerText="ll";
}
//-->
</script>
<body>
<input type="text" οnselect="fun(this)" οnchange="fun1(this.value)" /><br />
<select οnchange="fun2(this,this.value,this.selectedIndex)">
<option value="china">中國</option>
<option value="japan">日本</option>
<option value="amarica">美國</option>
</select>
</body>
</html>



去其他頁面的方法：

1、超鏈接

2、window.open

3、refresh

4、表單提交

   
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Netty-爲什麼選擇 Netty

人工智能，零基礎入門！http://www.captainbed.net/inner  API 使用簡單，開發門檻低； 功能強大，預置了多種編解碼功能，支持多種主流協議； 定製能力強，可以通過 ChannelHandler 對通信框架

inner_peace8 2020-07-08 03:10:14

【採坑】innobackupex 遷移db報錯，“open too many files”

一、背景 mysql數據遷移，遷移部分然後報錯“open too many files”。 二、步驟 1.修改/etc/security/limits.conf，追加以下兩行。 * soft nofile 65535 * hard

二黑黑黑 2020-07-06 15:29:04

HTTP協議-telnet，httpwatch

1、什麼是HTTP 客戶端連上web服務器後，若想獲得web服務器中的某個web資源，需遵守一定的通訊格式，HTTP協議用於定義客戶端與web服務器通迅的格式。 HTTP是hypertext transfer protocol（超文本傳

danny1991 2020-07-06 15:19:26

正則表達式--操作字符串a

String 類裏面matches()方法。 正則表達式通過一些特定的符號來體現規則，因此需要掌握其特定的符號。 雖然簡化了代碼，但是閱讀性變差。 1、正則表達式的規則： 字符類 [abc] a、b 或 c（簡單類） [^abc] 任何

danny1991 2020-07-06 15:19:25

EL表達式語言,JSTL,文件的上傳與下載

1、EL表達式簡介 EL 全名爲Expression Language。 EL表達式不能嵌套${${}} EL主要作用：獲取數據： EL表達式主要用於替換JSP頁面中的腳本表達式，以從各種類型的web域 中檢索java對象、獲取數據。

danny1991 2020-07-06 15:19:24

JavaBean——四捨五入(保留一定的小數),MVC設計模式,EL表達式和JSTL標籤快速入門,軟件三層架構設計

1、什麼是JavaBean JavaBean是一個遵循特定寫法的Java類，它通常具有如下特點：這個Java類必須具有一個無參的構造函數屬性必須私有化。私有化的屬性必須通過public類型的方法暴露給其它程序，並且方法的命名也必須遵守一定

danny1991 2020-07-06 15:19:23

軟件三層設計入門-表單校驗，購物車

1.搭建開發環境         1.1 導入項目所需的開發包                 dom4j-1.6.1.jar          

danny1991 2020-07-06 15:19:23

自定義標籤庫的開發——傳統標籤tag、IterationTag接口(TagSupport)，簡單標籤，轉義標籤，打包標籤，java打爲exe

1、自定義標籤簡介(web層) (1)、自定義標籤主要用於移除Jsp頁面中的java代碼。 (2)、使用自定義標籤移除jsp頁面中的java代碼，只需要完成以下兩個步驟： 編寫一個實現Tag接口的Java類(標籤處理器類)。編寫標籤庫描述

danny1991 2020-07-06 15:19:22

什麼？你還在用構造器構建對象？這裏有更好的方法---Builder模式

  在讀一篇關於開發技巧的文章的時候，突然看到了之前沒有接觸過的一個東西，Java Builder模式，於是在好奇心的驅使下，去了解了一下。   本文屬於個人理解，如有錯誤，歡迎指正。 通過構造器構建對象有什麼不好   有過開發經

H_Ystar 2020-07-06 06:47:17

我的算法學習指南

學習網站 LeetCode: https://leetcode-cn.com/ Teach Yourself Computer Science: https://teachyourselfcs.com 牛客網: https://w

CWJ的博客 2020-07-05 15:52:25

JAVA UDP聊天室

      本文爲使用UDP 進行數據傳輸的一個聊天室應用，使用JAVA語言開發的聊天室在目前的實際中應用很少，寫這個例子的原因的進一步理解CS模式編程，掌握這種思想。   本例子分爲客戶端和服務器兩個部分，客戶端輸入想要發送給的對象（I

fulunyong 2020-07-05 02:55:10

關於操作系統和網絡編程的一些小面試題目~

1.作業、進程、線程和管道之間的關係： 作業：用戶在一次解題或一個事務處理中要求計算機系統所做工作的集合。它包含了用戶程序、所需要的數據及控制命令等；作業是由一系列有序的步驟組成的； 進程：一個程序在一個數據集合上的一次運行過程。

listen666 2020-07-04 16:23:54

cocos2dx3.1 texturepacker播放動畫

先使用texturepacker把所需要使用的幀動畫打包成一張圖片和一個plist文件。使用大圖的好處就是可以一次性載入圖片，然後通過plist文件確定圖片的位置，在內存中尋找圖片數據，這就減少了I/O操作，使效率大大提高。但是相對來說圖

yangzhengqui 2020-07-03 13:21:09

C++釋放內存的問題

在完成某一個遊戲的架構的時候，在釋放內存的時候，忽律了一個問題，那就是如果類中存在有指針成員函數的時候，應該要先釋放指針成員函數，然後在釋放整個類的實例，才能保證內存不會泄露和可能出現的野指針問題。。寫下來防止以後在次出現這種低級錯誤。。

yangzhengqui 2020-07-03 13:21:09

cocos3.1源碼分析（1）-------cocos的啓動分析（Win32平臺）

先把上一篇忘記分析的autorelease說一下，在CCDirector.cpp的主循環有 void DisplayLinkDirector::mainLoop() {     if (_purgeDirectorInNextLoop)

yangzhengqui 2020-07-03 13:21:09