window 对象

清风冉起

已于 2022-11-23 10:07:38 修改

阅读量158

点赞数 2

文章标签： javascript 前端 html

于 2022-09-26 18:45:30 首次发布

本文链接：https://blog.csdn.net/m0_73671382/article/details/127056690

版权

window 对象的属性

window 对象的属性

属性名称	说明
closed	一个布尔值，只有当窗口被关闭时，它才为 true
status	在浏览器状态栏中显示的文本
document	对Document对象的引用，该对象代表在窗口中显示的HTML文档
frames	Window对象的数组，代表窗口中的各个框架(如果存在)
history	对History对象的引用，该对象代表用户浏览窗口的历史
location	对Location 对象的引用。该对象代表在窗口中显示的文档的 URL。设置这个属性会引发浏览器装载一个新文档
name	窗口的名称。可被 HTML 标记的 target 性质使用
opener	对打开当前窗口的Window对象的引用。如果当前窗口被用户打开，则它的值为null
parent	如果当前窗口是框架，它就是对窗口中包含这个框架的引用
self	自引用属性，是对当前 Window 对象的引用，与 window属性同义
top	如果当前窗口是框架，它就是对包含这个框架的顶级窗口的 Window 对象的引用。注意，对于嵌套在其他框架中的框架，top 不等于 parent
window	自引用属性，是对当前 Window 对象的引用，与 self 属性同义

History对象

History 对象：有关客户访问过的URL的信息

名称	说明
back()	加载History列表中的上一个URL
forward()	加载History列表中的下一个URL
go("url" or number)	加载History列表中的下一个URL或要求浏览器移动指定的页面数

back()方法相当于后退按钮；
forward()方法相当于前进按钮；
go(1)代表前进1页，等价于forward()方法;
go(-1)代表后退1页，等价于back()方法;

示例：

<body>
		<input type="button" id="btn" value="打开02.html" />
		<script type="text/javascript">
			btn.onclick=function(){
				location.href="02.html"
			}
		</script>
	</body>

<body>
		<input type="button" id="btn1" value="back" />
		<input type="button" id="btn2" value="打开03.html" />
		<input type="button" id="btn3" value="forward" />
		
		<input type="button" id="btn4" value="go" />
		<script type="text/javascript">
			btn1.onclick=function(){
				history.back()//返回到上一页
			}
			btn2.onclick=function(){
				history.href="03.html"
			}
			btn3.onclick=function(){
				history.forward()//跳转到history列表中的下一个页面
			}
			btn4.onclick=function(){
				history.go(1)//相当于forward
			}
		</script>
	</body>

<body>
		<input type="button" id="btn1" value="返回02.html" />
		<input type="button" id="btn2" value="go" />
		<script type="text/javascript">
			btn1.onclick=function(){
				history.back()//返回到上一页
			}
		</script>
	</body>

Location对象

Location 对象：有关当前URL的信息。

属性	说明
host	设置或检索位置或URL的主机名和端口号
hostname	设置或检索位置或URL的主机名部分
href	设置或检索完整的URL字符串

方法	说明
assign("url)	加载URL指定的新的HTML文档。
reload()	重新加载当前页
replace("url")	通过加载URL指定的文档来替换当前文档

示例：

<body>
		<input type="button" name="btn1" id="btn1" value="assign()" />
		<input type="button" name="btn1" id="btn2" value="reload()" />
		<input type="button" name="btn1" id="btn3" value="replace()" />
		<script type="text/javascript">
			console.log(location.host)
			console.log(location.hostname)
			console.log(location.href)
			btn1.onclick=function(){
				location.assign("http://www.baidu.com")//可以后退
			}
			btn2.onclick=function(){
				location.reload("http://www.baidu.com")//页面刷新
			}
			btn3.onclick=function(){
				location.replace("http://www.baidu.com")//没有后退功能
			}
		</script>
	</body>

属性、方法和事件

属性

属性是指对象包含的值，使用'对象名.属性名'的方式进行操作，如document.myfrom.first.value

方法

在代码里，使用'对象名.方法名()'来调用该对象的方法。
alter(")=Windows.alter(")

事件

响应用户操作、完成交互、如OnClick、OnKeyDown
一般可以分为鼠标事件、键盘事件及其他事件

事件注册方式

将事件绑定到元素属性
将事件绑定到对象属性

	<title></title>
		<script type="text/javascript">
			function show(){
				alert("行间事件");
			}
		</script>
	</head>
	<body>
		<input type="button" value="确定" onclick="show()" />
	</body>

示例：

<body>
		<input type="button" name="btn1" id="btn1" value="点击1" onclick="test()" />
	    <input type="button" name="btn2" id="btn2" value="点击2" />
	    <script type="text/javascript">
	    	function test(){
				alert("aa")
			}
			document.getElementById("btn2").onclick=function(){
				alert("bb")
			}
	    </script>
	</body>

属性、方法和事件

鼠标事件	意义
onmousedown	按下鼠标键
onmousemove	移动鼠标键
onmouseout	鼠标离开某一个网页对象
onmouseover	鼠标移动到某一个网页对象上
onmouseup	松开鼠标键
onclick	单击鼠标键
ondblclick	双击鼠标键

键盘事件	意义
onkeydown	按下一个键
onkeyup	松开一个键
onkeypress	按下然后松开一个键

Window对象常用事件

事件	说明
onload()	对象装载完成后触发
onscroll()	窗口的滚动条被拖动是时触发
onresize()	窗口的大小改变时触发
onblur()/onfocus()	窗口失去/获得焦点时触发
onerror()	遇到执行错误时触发
onunload()	对象被卸载后触发

表单元素-表单

属性	action	表单数据将被提交的页面
属性	method	提交表单的方法，get/post
方法	submit()	提交表单
事件	onsubmit	提交表单时触发，返回false时取消提交

示例：

<form action="PostURL.htm" method="post">
			<input type="reset" value="重置" />
			<input type="submit" value="提交" />
		</form>

post的数据不会在URL中显示，而get则会显示；所以建议使用post，安全！

表单元素-文本框

文本框对象的常用属性，方法和事件

属性	value	文本框的内容
属性	readonly	只读，只允许后台修改
方法	focus()	使文本框获得焦点
方法	select()	选中文本框内容
事件	onblur	文本框失去焦点时触发
	onfocus	文本框获得焦点时触发
	onchange	文本框内容改变且失去焦点时触发

按钮对象

按钮对象包括普通按钮、提交按钮和重置按钮，常用的属性如下：

按钮对象的常用属性和事件

属性	Value	显示在按钮表面的文字
属性	Disabled	在代码中设置按钮是否能使用，取值true或false
事件	onclick	鼠标单击按钮使触发

示例：

<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<td>账户：</td>
				<td>
					<input type="text" name="uname" id="uname" value="" onblur="checkUname()" />
				</td>
				<td>
					<label id="msg1"></label>
				</td>
			</tr>
			<tr>
				<td>密码：</td>
				<td>
					<input type="password" name="pwd1" id="pwd1" value="" onblur="checkPwd(1)" />
				</td>
				<td>
					<label id="msg2"></label>
				</td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td>
					<input type="password" name="pwd2" id="pwd2" value="" onblur="checkEquals()" />
				</td>
				<td>
					<label id="msg3"></label>
				</td>
			</tr>
			<tr>
				<td>家庭住址：</td>
				<td>
					<select name="province" id="province" onchange="changeOpt()">
						<option value="请选择省份">--请选择省份--</option>
						<option value="河南省">--河南省--</option>
						<option value="四川省">--四川省--</option>
						<lect>
							<select name="cities" id="cities">
								<option value="请选择城市">--请选择城市--</option>
								<lect>
				</td>
				<td>

				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<input type="button" id="btn" value="提交" />
				</td>
			</tr>
		</table>
		<div id="result">

		</div>
		<script type="text/javascript">
			function checkUname(){
				//实现会用户名验证，用户名只能是英文字母，且长度至少6位数
				var reg=/^[a-zA-Z]{6,}$/
				//获取文本框中的值
				var username=document.getElementById("uname").value
				if(reg.test(username)){
					document.getElementById("msg1").innerHTML="用户名格式正确"
					return true
				}else{
					document.getElementById("msg1").innerHTML="用户名格式不正确"
					return false
				}
			}
		</script>
	</body>

清风冉起

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window 对象

window 对象的属性。按钮对象的常用属性和事件。文本框对象的常用属性，方法和事件。post的数据不会在URL中显示，而get则会显示；所以建议使用post，安全！History对象：有关客户访问过的URL的信息。Location对象：有关当前URL的信息。提交表单时触发，返回false时取消提交。文本框内容改变且失去焦点时触发。窗口的滚动条被拖动是时触发。将事件绑定到元素属性。将事件绑定到对象属性。窗口的大小改变时触发。
复制链接

扫一扫