JavaScript的DOM操作(一)
DOM:文档对象模型 --树模型
文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西
一:window:
属性(值或者子对象):
opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口。
方法(函数):
事件(事先设置好的程序,被触发):
1.window.open("第一部分","第二部分","第三部分","第四部分");
特征参数:
第一部分:写要打开的页面地址
第二部分:打开的方式,_blank 是在新窗口打开
第三部分:控制打开的窗口,可以写多个,用空格隔开
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:保存所有打开的窗口,将每个打开的窗口值存入一个数组之中。
function openW()
{
w[i++]=window.open();
}
6: close():关闭指定的窗口
window.close():关闭当前窗口
w.close():关闭w窗口
关闭多个子窗口:放在数组中的窗口:w[i].close();
关闭打开当前窗口的源窗口
window.opener.close();
7:综合实例
(1)只打开一个窗口,并且关闭子窗口
首先在body中定义两个div,用onclick="openW()" 或者onclick="closeW()"来设置为鼠标单击后触发,调用函数openW和closeW;
<div style="margin:10px;padding:10px;border:1px solid blue; cursor:pointer;float:left" onclick="openW()" >
打开一个窗口
</div>
<div style="margin:10px;padding:10px;border:1px solid blue; cursor:pointer;float:left" onclick="closeW()" >
关闭窗口
</div>
在JavaScript语句中写如下代码:
<script language="javascript">
var w;
function openW()
{
if(w==null)
{
w=window.open("http://www.baidu.com","_blank","toolbar=no");
}
} function closeW()
{
w.close();
} </script>
效果如下图:
点击打开窗口,弹出了一个新的窗口,再次点击打开窗口由于w中的值不为空了,所以无法再打开一个窗口:
点击关闭窗口之后,则将子窗口关闭。
(2)打开一组窗口,点击关闭窗口的时候将全部的子窗口关掉
利用数组w存储每个打开的窗口,在关闭的时候用w[i]关掉所有的子窗口,在JavaScript语句中写如下代码:
var w = new Array();
var i=0;
function openW()
{ w[i]=window.open("http://www.baidu.com","_blank","toolbar=no");
i++; } function closeW()
{
for(var n=0;n<w.length;n++)
{
w[n].close();
}
}
打开了多个窗口:
点击关闭所有窗口,则一键关闭了所有打开的子窗口。
(3)在子窗口中关闭源窗口:
在子窗口的文件中定义两个函数,一个是关闭自己窗口,一个是关闭源窗口即上一级窗口,在body中用onclick设置为点击关闭当前窗口的时候调用c()函数,点击关闭打开当前窗口的源时候调用cc()函数:
function c()
{
window.close();
}
function cc()
{
window.opener.close();
}
效果如下图:
8:间隔和延迟:
window.setInterval("要执行的代码",间隔的毫秒数)
window.clearInterval(间隔的id); 循环一次之后用来清除隔几秒执行的代码
window.setTimeout("要执行的代码",延迟的毫秒数)
window.clearTimeout(延迟的id);清除setTimeout,一般延迟执行较为常用。
(1)间隔执行的例子,其作用是间隔5秒弹出三个窗口,再经过10秒将其关闭。
将window.setInterval("ok()",5000)用一个id来接收,将window.setInterval("cc()",10000)用id2来接收,在程序调用ok()的时候打开三个网页,之后用window.clearInterval(id);来清除id的循环,之后调用函数cc()来关闭三个窗口,之后也是清除:
var id,id2;
var sina,qq,xinhua
function cc()
{
sina.close();
qq.close();
xinhua.close();
window.clearInterval(id2);
}
function ok()
{
sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");
qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");
xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200"); window.clearInterval(id); id2 = window.setInterval("cc()",10000);
}
id = window.setInterval("ok()",5000);
(2)延迟执行的例子,其作用也是间隔5秒弹出三个窗口,再经过10秒将其关闭。
这里用了延迟执行就不用清除了,所以一般常用延迟执行。
function cc()
{
sina.close();
qq.close();
xinhua.close();
}
function ok()
{
sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");
qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");
xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200"); window.setTimeout("cc()",10000); }
window.setTimeout("ok()",5000);
(3)延迟执行,每隔5秒打开三个窗口,打开4次之后停止。
用的是在循环里面调用自己,这种使用方式要注意条件的设置,否则可能会导致窗口一直在打开,最后死机。
var sina,qq,xinhua;
var i=0;
var id;
function cc()
{
sina.close();
qq.close();
xinhua.close();
}
function ok()
{
sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");
qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");
xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200"); i++;
if(i >= 4)
{
return;
}
else
{
//window.setTimeout("cc()",10000);
id = window.setTimeout("ok()",5000);
} }
window.setTimeout("ok()",5000);
9:页面操作
window.navigate("url") ;跳转页面;
window.moveTo(x,y); 移动页面
window.resizeTo(宽,高); 调整页面
window.scrollTo(x,y);滚动页面至哪里
(1)例子:用navigate随机打开三个页面中的一个
在body中定义一个div:
<div onclick="r()">单击跳转网页</div>
在Script中添加如下代码:
function r()
{
var a= parseInt(Math.random()*10000)%3;
if(a==0)
{
window.navigate("http://www.baidu.com");
}
else if(a==1)
{
window.navigate("http://www.sina.com.cn");
}
else
{
window.navigate("http://www.qq.com");
}
}
(2)移动调整页面,移动到窗口的左上角,页面的宽和高都是200:
function m()
{
window.moveTo(0,0);
window.resizeTo(200,200);
}
效果如下图:
10:模态对话框
window.showModalDialog("url","向目标对话框传的值","窗口特征参数") 打开模态对话框
模态对话框必须关掉才能对后端操作。 模块对话框和窗口的区别是永远置顶。
特征参数:用分号隔开,像素大小用px。dialogHeight,dialogWidth,center,等
var a = window.dialogArgument:在模态对话框中获得传过来的值,dialogArgument也是一个属性,可以接收。
window.showModelessDialog("url","向目标对话框传的值","窗口特征参数")打开非模块对话框,不用关闭可以操作后面。
(1)例子:打开页面3作为一个模态对话框打开,打开页面3作为一个非模态对话框打开
function openModel()
{
window.showModalDialog("Untitled-3.html","haha","dialogWidth=300px;dialogHeight=200px;center=yes");
}
function openModeless()
{
window.showModelessDialog("Untitled-3.html"); }
页面3里面写如下代码,让打开窗口每隔0.5秒滚动到最下端
function s()
{
window.scrollTo(0,10000);
window.setTimeout("s()",500);
}
window.setTimeout("s()",500);
打开模态对话框,这个对话框只有关掉才可以操作后面的界面:
打开非模态对话框,不用关掉也可以选中下面的界面,但它还是会置顶:
JavaScript的DOM操作(一)的更多相关文章
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- 第一百一十五节,JavaScript,DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
- Python之路day13 web 前端(JavaScript,DOM操作)
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- Javascript的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
- (转)Javascript的DOM操作 - 性能优化
转载:https://my.oschina.net/blogshi/blog/198910 摘要: 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维 ...
- JavaScript:DOM操作
一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...
- JavaScript之DOM操作,事件操作,节点操作
1,DOM操作 1.1 概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
- JavaScript 的DOM操作详解
内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...
- HTML JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
随机推荐
- OA学习笔记-004-Spring2.5配置
一.jar包 (1)spring.jar (2)Aop包 aspectjrt.jaraspectjweaver.jar (3)动态代理 cglib-nodep-2.1_3.jar (4)日志 comm ...
- Android事件分发详解(三)——ViewGroup的dispatchTouchEvent()源码学习
package cc.aa; import android.os.Environment; import android.view.MotionEvent; import android.view.V ...
- linux解压cpio.gz类型文件
1. gunzip XXX.cpio.gz –> 得到 XXX.cpio 文件 2. cpio -idmv <XXX.cpio –> 得到 XXX 文件夹
- Oracle core02_数据块
数据更改 oracle core完成了oracle的核心功能,recovery,读一致性等. 深入的了解oracle的机制,就从一个最简单的更新开始.对于oracle来说,最大的一个特性就是写了两次数 ...
- WordPress Complete Gallery Manager插件‘upload-images.php’任意文件上传漏洞
漏洞名称: WordPress Complete Gallery Manager插件‘upload-images.php’任意文件上传漏洞 CNNVD编号: CNNVD-201309-377 发布时间 ...
- Cookies和Session理论总结
今天主要学习了Cookies和Session,网络上关于这方面的知识可谓很多,让人眼花缭乱,在此作一个小结.本文不讲多,不讲什么高大上的,只是抛出一块砖,讲三个问题:①什么是Cookies和Sessi ...
- HDJ -- 1022
#include<iostream> #include<cstdio> #include<string> #define MAXN 10 using namespa ...
- ZOJ --- 3516 Tree of Three
Tree of Three Time Limit: 2 Seconds Memory Limit: 65536 KB Now we have a tree and some queries ...
- 监控Tomcat并启动
#!/bin/sh export _JAVA_SR_SIGNUM= export JAVA_HOME=/usr/java/jdk1..0_11 export CATALINA_BASE=/home/c ...
- ARM学习笔记10——GNU ARM命令行工具
一.编译器arm-linux-gcc 1.用arm-linux-gcc编译一个程序,一般它是要经过如下步骤的: 1.1.预处理阶段 编译器把上述代码中stdio.h编译进来,使用GCC的选项-E可以使 ...