对象
History对象
history对象是记录用户曾经浏览过的页面(URL),并且可以实现浏览器前进与后退,从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。
如下图所示是History对象的方法:
Location对象
location.href: 返回当前页面的完整的URL地址;
location.search: 返回URL后面的参数(类似于"name=lc&age=20");
location.protocol: 返回页面使用的协议(通常是"http:“或"https:”);
location.host: 返回页面的域名及端口号;
location.hostname: 返回页面的域名;
location.port: 返回页面的端口号;
location.pathname: 返回页面中的路径或文件名;
location.origin: 返回URL源地址;
location.hash: 返回URL 散列值(#后面的内容),如果没有则为空字符串。
表单元素事件
文本框失去焦点事件、获得焦点事件
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
Onchange:当文字值改变时,产生该事件
<form action="#" method="post" id="form">
<p>用户名: <input type="text" name="username" /></p>
<p>
<button>注册</button>
<button type="reset">重置</button>
</p>
</form>
<script>
var form = document.getElementById('form');
//给文本框设置聚焦和失焦
//先获取文本框
var input = form.username;
//设置聚焦事件
//元素.onfocus = function(){}
input.onfocus = function () {
this.style.background = "pink";
}
//元素.onblur = function(){}
input.onblur = function () {
this.style.background = "";
}
</script>
location常用方法
location.assign(url): 跳转到url,浏览器会记录历史(可以后退);
location.replace(url): 跳转到url,浏览器不会记录历史(不可以后退);
location.reload(boolean): 重新加载当前显示的页面,不传参数,页面会以最有效的方式重新加载。也就是说,如果页面自上次请求以来没有修改过,浏览器可能会从缓存中加载页面。如果想强制从服务器重新加载,可以给 reload()传个 true。
//以当前页面为百度为例,如下:
location.assign("https://www.bilibili.com");
//可以后退回百度;
location.replace("https://www.bilibili.com");
//无法后退;
// 正常重新加载
location.reload();
// 强制从服务器重新加载
location.reload(true);