一个DOM

DOM:文档对象模型 --树模型
文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西

一:window:

属性(值或者子对象):
opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口。

方法(函数):
事件(事先设置好的程序,被触发):

1.window.open("第一部分","第二部分","第三部分","第四部分");

特征参数:

第一部分:写要打开的页面地址
第二部分:打开的方式,_blank 是在新窗口打开 _self
第三部分:控制打开的窗口,可以写多个,用空格隔开
toolbar=no新打开的窗口无工具条
menubar=no无菜单栏 status=no无状态栏
width=100 height=100 宽度高度
left=100 打开的窗口距离左边多少距离
resizable=no窗口大小不可调
scrollbars=yes 出现滚动条
location=yes 有地址栏

返回值:新打开的窗口对象

2:最简单的打开窗口
window.open("http://www.baidu.com","_blank","toolbar=no"); 在一个新窗口中打开百度。

3:打开窗口,并保存在一个变量中
var w= window.open();

4:只打开窗口一次,例子如下:

if(w==null)
{
w=window.open("http://www.baidu.com","_blank","toolbar=no");
}

这里用一个if语句,判断w的值是否为空,打开一个窗口之后w的值就不为空了,之后再点击鼠标调用此函数则不执行打开新窗口。

5: close():关闭指定的窗口

window.close():关闭当前窗口
w.close():关闭w窗口
关闭多个子窗口:放在数组中的窗口:w[i].close();
关闭打开当前窗口的源窗口
window.opener.close();

6:间隔和延迟: *******

window.setInterval("要执行的代码",间隔的毫秒数)
window.clearInterval(间隔的id); 循环一次之后用来清除隔几秒执行的代码

window.setTimeout("要执行的代码",延迟的毫秒数)
window.clearTimeout(延迟的id);清除setTimeout,一般延迟执行较为常用。

时间选择器:

延时方法:

window.setTimeout(sto,3000);
		function sto(){
			alert(‘123‘);
			window.setTimeout(sto,3000);
		}

  间隔执行:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<span id="s1"></span><br />
		<span id="s2"></span><br />
		<input type="button" value="在这停住" onclick="stop()" />
	</body>

</html>
<script>
	var c1 = 0;
	var c2 = 0;
	var arr = Array();
	arr.push(window.setInterval("sit1()", 500));
	arr.push(window.setInterval("sit2()", 500));

	function sit1() {
		document.getElementById(‘s1‘).innerText = ++c1;
	}

	function sit2() {
		document.getElementById(‘s2‘).innerText = ++c2;
	}

	function stop() {
		for(var i in arr) {
			window.clearInterval(arr[i]);
		}
	}
</script>

  

7:页面操作

window.navigate("url") ;跳转页面;

window.moveTo(x,y); 移动页面

window.resizeTo(宽,高); 调整页面

window.scrollTo(x,y);滚动页面至哪里

8:模态对话框

window.showModalDialog("url","向目标对话框传的值","窗口特征参数") 打开模态对话框

模态对话框必须关掉才能对后端操作。 模块对话框和窗口的区别是永远置顶。

特征参数:用分号隔开,像素大小用px。dialogHeight,dialogWidth,center,等

window.showModelessDialog("url","向目标对话框传的值","窗口特征参数")打开非模块对话框,不用关闭可以操作后面。

9. window.history对象

历史记录,通过历史记录可以操作页面前进或者后退

window.history.back();后退

window.history.forward();前进

window.history.go(n); n是正数代表前进n个页面,n是负数代表后退n个页面。*

10. window.location对象

location地址栏

var s = window.location.href;获取当前页面的地址

window.location.href="http://www.baidu.com";修改页面地址,会跳转页面 *******

window.location.hostname: 主机名,域名,网站名,可用变量接收

window.location.pathname: 路径名,可用变量接收

11. window.status对象

status状态栏,可以给状态栏添加要显示的文字

window.status="要在状态栏显示的内容";设置状态栏文字

12.创建元素节点createElement():此方法返回一个Element对象。

语法:document.createElement(tagName)     tagname:字符串值,用来指明创建元素的类型。

13.日期时间的操作:var d=new date();当前时间

var d=new date(1999,3,2);定义一个时间,1999年4月2日,3要加1

d.getFullYear():取年份;  d.getMonth():取月份,取出来的少1;  d.getDate():取天   d.getHours():取小时   d.getMinutes():取分钟

d.getSeconds():取秒      d.getFullYear():设置年份,设置月份的时候加1

例:时间选择器

单选框切换

时间: 2024-10-29 19:07:40

一个DOM的相关文章

随笔一个dom节点绑定事件

以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的html内容. button点击事件:会生成一个li节点. 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 </head> 5 <body> 6 <ul class="ul

【转载】W3C下的冒泡和捕获机制。到底是冒泡呢。还是捕获呢。一个DOM元素绑定多个事件时如何执行。

原文  http://blog.csdn.net/u011719449/article/details/23787627 在准备阿里前端面试的时候看到这么一道题. 一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何. 这导致了我对冒泡和捕获又进一步深入的了解.(永远都在发现自己知识匮乏的日子中度过人生真是好抓急啊.) 首先冒泡和捕获是怎么一回事. 简单点说.冒泡就是从下往上,像鱼吐泡,泡泡是从下往上升的,也就是DOM元素被触法事件时(此时的dom元素为目标元素),目

如何判断一个js对象是否一个DOM对象

我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有DOM对象的各种属性或特征,比如是否有nodeType属性,有tagName属性,等等.判断的特征越多,也就越可靠,因为毕竟我们自定义的js对象也可以有那些属性.还有其他方法吗? 在DOM Level2标准中定义了一个HTMLElement对象,它规定所有的DOM对象都是HTMLElement的实例,

检测一个DOM对象是否为空

我们时常要检测一个DOM对象是否为空. var $jObject = $('#btn'); alert($jObject ); 我们会发现,$jObject 永远不会为空.为什么呢?$ 方法查找对象,始终都会返回一个jQuery 对象的. 解决办法: 我们就要把jQuery对象转换成js对象. ①var dom = $jObect[0]; alert(dom); ②if($jObect.length>0) {alert("not null!");}

一个DOM元素绑定多个事件时,先执行冒泡还是捕获

绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 . 一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何. 首先来了解一下冒泡和捕获是怎么回事: 1.冒泡 冒泡是从下向上,DOM元素绑定的事件被触发时,此时该元素为目标元素,目标元素执行后,它的的祖元素绑定的事件会向上顺序执行.如下代码所示,

前端框架对页面的损害+如何判断一个dom是否存在某个属性

目录 进入主题 我的经历 特此记下造福后人 如何判断一个dom是否存在某个属性 进入主题 今天遇到一个问题就是引发了我对各种前端框架的思考. 首先我个人认为前端js+css框架,多数其实原理是这样的: 写页面的时候使用框架提供的css类. 然后框架通过这些预定义样式提供美观的界面. 涉及到功能的则是通过jquery的选择器根据class选择到dom元素,然后对dom元素进行操作. 完毕 如上所述,框架会对页面dom元素进行简单的修改. 我的经历 今天我使用框架,使用了框架的dialog,我的di

jQuary教程5:传递一个dom对象

1 传递一个dom对象 //html <div></div> <p id="p"></p> //js var p = document.getElementById('p'); $('div').append(p); //执行之后的结果 <div> <p></p> </div> //注意:也会有剪切的效果. 2 调用html方法 //html <div> div里面的文本 <

jquery bind 方法一个特点(绑定多个方法到一个dom的某个事件)

目录: [TOC] jquery bind方法介绍 方法声明:bind(type,[data],fn) 方法说明:为每一个匹配元素的特定事件(eg:click)绑定一个事件处理器函数.这个事件处理函数会通过参数方式接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为.如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false. 技巧:多数情况下,可以把事件处理器函数定义为匿名函数. 参数意义 type (String) : 事件类型. data (Object) : (可选

如何优雅的封装一个DOM事件库

1.DOM0级事件和DOM2级事件 DOM 0级事件是元素内的一个私有属性:div.onclick = function () {},对一个私有属性赋值(在该事件上绑定一个方法).由此可知DOM 0级事件只能给元素的某一个行为绑定一次方法,第二次绑定会把前面的覆盖掉. DOM 2级事件是让DOM元素通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法来实现的. DOM 2可以给某一个元素的同一个行为绑定多个不同的方法 //实例 1 obj.addEven