Javasprite对象

最新推荐文章于 2024-01-02 00:00:57 发布

Hrgge^0^

最新推荐文章于 2024-01-02 00:00:57 发布

阅读量238

点赞数

文章标签： html java 前端

本文链接：https://blog.csdn.net/Hrgge/article/details/127060086

版权

一.对象

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

名称	说明
back()	加载history列表中的上一个URL
forward()	加载history列表中的下一个URL
go("url"ornumber)	加载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()	窗口的大小改变时触发
onblur0/onfocus()	窗口失去/获得焦点时触发
onerror()	遇到执行错误时触发
onunload()	对象被卸载后触发

表单元素-表单

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<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(){
    		//实现用户名验证，用户名只能是英文字母，且长度至少六位
    		var reg=/^[a_zA-Z]{6,}$/
    		//获取文本框中的值
    		var name=document.getElementById("uname").value
    		//判断
    		if(reg.test(name)){
    			document.getElementById("msg1").innerHTML="用户名格式正确"
    			return true;
    		}else{
    			document.getElementById("msg1").innerHTML="用户名格式不正确"
    		
    		}
    	}
    </script>
	</body>
</html>