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