宝哥软件园

javascript入门的窗口对象[初学者必须看到]

编辑:宝哥软件园 来源:互联网 时间:2021-09-11

窗口:窗口对象是BOM中所有对象的核心。除了是BOM中所有对象的父对象外,它还包含一些窗口控制功能。

1.全局窗口对象

JavaScript中的任何全局函数或变量都是窗口的属性。

脚本类型=' text/JavaScript' var name='撼地而神牛';document . write(window . name);/script2,窗口和自身对象

Self对象与window对象完全相同,self通常用于确认其处于当前形式。

脚本类型=' text/JavaScript ' document . write(window==self);//必须相等,始终相等document . write(window . top==window . self);//判断当前帧是否为主帧。/scriptwindow、self和window.self是等价的。3.窗口的子对象

窗口的主要对象如下:

JavaScript文档对象JavaScript框架对象JavaScript历史对象JavaScript位置对象JavaScript导航器对象JavaScript屏幕对象

4.窗口功能索引(仅适用于工业工程)

表单控制功能:

函数作用:从当前位置开始,将窗体水平移动x像素,垂直移动y像素。如果x为负,它会将窗体向左移动,如果y为负,它会将窗体向上移动。

JavaScript moveTo()函数:将窗体左上角相对于屏幕左上角移动到(x,y)点,当使用负数作为参数时,将窗体移出屏幕可见区域。

JavaScript resizeBy()函数:相对于表单当前的大小,宽度调整w像素,高度调整h像素。如果参数为负,则缩小形式,否则放大形式。

函数作用:将窗体的宽度调整为w像素,高度调整为h像素。

正文输入类型=' button' id=' btn1' value='先设置表单的固定大小!'onclick='window.resizeTo(500,500);'/input type=' button ' id=' BTN 2 ' value='再缩小10像素!'onclick='window.resizeBy(-10,-10);'/input type=' button ' id=' BTN 2 ' value=' up!'onclick='window.moveBy(0,-5);'/input type=' button ' id=' BTN 2 ' value=' down!'onclick='window.moveBy(0,5);'/input type=' button ' id=' BTN 2 ' value=' left!'onclick='window.moveBy(-5,0);'/input type=' button ' id=' BTN 2 ' value=' right!'onclick='window.moveBy(5,0);'/input type=' button ' id=' BTN 2 ' value='左上角100像素,左上角200像素' onclick='window.moveTo(100,200);'//形体卷轴控制功能:

JavaScript scrollTo()函数:如果表单中有滚动条,将水平滚动条移动到相对于表单宽度x像素的位置,将垂直滚动条移动到相对于表单高度y像素的位置。

JavaScript scrollBy()函数:如果有滚动条,将水平滚动条移动到X像素相对于当前水平滚动条的位置(即向左移动X像素),将垂直滚动条移动到Y像素相对于当前垂直滚动条的位置(即向下移动Y像素)。

注意区别,一个是相对于当前窗口,另一个相当于当前滚动条位置。

div style=' height :150%;宽度:150%;背景色: # DDD '输入类型='按钮' id=' btn1 '值='移动滚动条!'onclick='window.scrollTo(100,100);'///相当于设置绝对位置输入类型=' button' id=' btn1' value='移动滚动条!'onclick='window.scrollBy(100,100);'///相当于累加/div形式的焦点控制功能:

JavaScript focus()函数:赋予窗体或空间焦点

函数的作用是:使窗体或控件失去焦点

Div输入类型='button '值=' get focus ' onclick=' document . getelementbyid(' testinput ')。focus()'/Input type=' button ' value='失焦' onclick=' document . getelementbyid(' testinput ')。blur()'/input type=' text ' value=' text ' id=' testin put ' on bulr=' alert('我失去了焦点')'//div

JavaScript open()函数:打开(弹出)一个新表单JavaScript close()函数:关闭表单JavaScript opener属性:表单之间的通信可以通过opener实现,但必须在同一个域名下,一个表单必须包含另一个表单的opener。

window.open(url、名称、功能、替换);

打开功能参数描述:

Url -加载表单的URL;Name -新创建表单的名称(也可以是HTML目标属性的值,即目标);特征-表示表单特征的字符串,字符串中的每个特征用逗号分隔;Replace -一个布尔值,指示新加载的页面是否替换当前加载的页面。通常不指定此参数。

打开方法示例:

A href='2.html' target='2 '在新窗口中打开连接/a href=' # ' onclick=' window . open(' http://so . JB 51 . net/',2 ');在连接的页面上打开一个新地址。/a首先,打开一个带有普通HTML链接的页面(目标名称为dreamdu),然后使用open函数打开另一个页面。浏览器应该首先找出是否有一个名为dreamdu的表单,如果有,在这个表单中加载打开的地址。

用设置打开

Window.open ('page.html ',' new window ',' height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no ')

方法1: body onload='openwin()'浏览器读取页面时弹出一个窗口;

方法2:当浏览器离开页面时,body onunload=' openwin()'弹出窗口;

打开功能第三个参数功能描述:

参数名称类型描述高度数字设置表单的高度,不能小于100左数字。它不能是负值。无论位置布尔形式是否显示地址栏,默认值都是可调整大小的布尔形式是否允许通过拖动边缘来调整大小。默认值为当无滚动布尔形式内部超出窗口可视范围时是否允许拖动,工具栏是否以无滚动布尔形式显示,默认值为nottopnumber,表示创建的窗体的上坐标,不能为负数。默认值为无宽度数字,不能小于100。属性字符串中的每个属性都用逗号分隔,每个属性之间不允许有空格。

window.open函数将在新创建窗体后返回新创建窗体的window对象,通过该对象可以控制窗体(移动、调整大小和关闭)。

关闭功能:

输入类型=“按钮”值=“关闭打开的表单!”onclick=' window . close();'/self . close();使用setTimeout(),可以实现定时关闭打开的窗口的效果。

对话框功能:

JavaScript alert()功能:弹出消息对话框(对话框中有一个OK按钮)JavaScript confirm()功能:弹出消息对话框(对话框中包含一个OK按钮和一个Cancel按钮)JavaScript提示符()功能:弹出消息对话框(对话框中包含一个OK按钮、一个Cancel按钮和一个文本输入框)alert();

不说了。

确认(字符串);

confirm()消息对话框是独占的,也就是说,在用户单击对话框的按钮之前,不能执行其他操作。

如果(确认('确定跳跃大小?)){alert('果断跳转');}else{ alert('微不足道的钱');}显示如下:

提示(str1,str 2);

该函数有两个参数

Str1 -无法修改消息对话框中显示的文本。str2 -文本框中的内容可以修改

Var sResult=提示(‘请在下面输入你的名字’,‘摇摇大地和神牛’);if(sResult!=null){ alert(sResult '已经超越了上帝的杀戮');}else{ alert ('Anonymous已经超越了上帝的杀戮');}显示如下:

时间等待和间隔功能:

函数的作用是:函数

1.setTimeout()和clearTimeout()在指定时间后调用函数

语法:

setTimeout(乐趣、时间);Fun:函数体或函数名,time以毫秒为单位指定时间。clear time out(id);取消由指定的setTimeout函数执行的代码

settimeout(function(){ document . write(' 3秒后触发');},3000)//3秒后输出setTimeout(fun1,5000);//输出函数fun1() {document.write('函数名5秒后触发的方式');} 2.setInterval()和clearInterval(value)在间隔指定的事件之后重复调用函数

语法:

SetInterval(fun1,time)fun:函数体或函数名,由time指定的时间,以毫秒为单位。会返回一个值,这个值用来统计函数的个数,第一个是1,第二个是2,说明它是哪个setInterval函数。clear interval(value)value : setInterval()函数返回的值,根据该值可以停止setInterval()的重复。

var I=0;var h=set interval(function(){ document . write('每3秒输出一次br/');我;if(I=3){ clearInterval(h);Document.write('停止输出');}}, 3000);请注意,javascript是单线程的,所以这个定时功能实际上是通过插入执行队列来实现的。

比如下面的代码:

function fn(){ setTimeout(function(){ alert('你能看见我吗?);},1000);while(true){ } } alert();它永远不会执行,因为线程已经被一个循环占用了。

Window.location子对象

解析网址对象位置

位置对象的属性有:href、协议、主机、主机名、端口、路径名、搜索、散列

document . write(location . href ' br/');//http://localhost :4889/JavaScript Test . html document . write(location . protocol ' br/');//http : document . write(location . host ' br/');//localhost :4889 document . write(location . hostname ' br/');//localhost document . write(location . port ' br/');//4889 document . write(location . pathname ' br/');///JavaScript test . html document . write(location . search ' new line br/');//http://localhost :4889/JavaScript TeSt . html?Id=1name=张三如果路径是这样,输出?Id=1name=张三document . write(location . hash);//http ://localhost :4889/JavaScript test . html # kk=hello?Id=1name=张三如果路径是这样,输出#kk=Hello?Id=1name=张三加载新文档

Location.reload()重新加载页面

位置.替换()此窗口加载新文档

Location.assign()此窗口加载新文档

Location='http://so.jb51.net/'//跳转到指定网站

Location='search.html' //相对路径跳转

位置='#top'/跳到页面顶部

浏览历史记录

History()对象的Back()和forward()与浏览器的“back”和“forward”功能相同。

history . go(-2);回溯两个历史

浏览器和屏幕信息

navigator.appNameWeb浏览器的全名

navigator.appVersionWeb浏览器制造商和版本的详细字符串

导航器的大部分信息。用户代理客户端

运行navagator.platform浏览器的操作系统

document . write(navigator . user agent ' br/');//Mozilla/5.0(Windows NT 6.1)applebwebkit/537.11(KHTML,喜欢Gecko)Chrome/23 . 0 . 1271 . 97 Safari/537.11 document . write(navigator . appname ' br/');//网景document . write(navigator . appversion ' br/');//5.0(Windows NT 6.1)applebwebkit/537.11(KHTML,像Gecko)Chrome/23 . 0 . 1271 . 97 Safari/537.11 document . write(navigator . platform);//Win32窗口之间的关系

Parent==self仅顶层窗口返回true

父属性和顶级属性允许脚本引用其表单的祖先,该表单通常是通过iframe元素创建的,可用于获取顶级窗口。

5.事件对象

两个最有用的操作:防止事件冒泡。有时还假;如果没用,这可能有用。

//IE:window . event . cancelubble=true;//停止冒泡window . event . return value=false;//阻塞事件的默认行为///Firefox:event . preventdefault();//取消event.stopPropagation()的默认行为;//防止事件扩散。以上就是本文的全部内容。希望对大家有帮助,支持我们!

更多资讯
游戏推荐
更多+