History对象
history对象是记录用户曾经浏览过的页面(URL),并且可以实现浏览器前进与后退,从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。
如下图所示是History对象的方法:
案例:
<body>
<a href="list.html">点击我去往列表页</a>
<button>前进</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.forward();
history.go(1);
})
</script>
</body>
<body>
<a href="index.html">点击我去往首页</a>
<button>后退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.back();
history.go(-1);
})
</script>
</body>
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 散列值(#后面的内容),如果没有则为空字符串。
设置location属性
location的属性不仅可以获取,也可以设置相关属性,部分属性设置后会导致重新加载新的URL。
这里以https://www.baidu.com为例:
location.hash = "#123"; // url: https://www.baidu.com/#123
// 参数修改
location.search = "?wd=123" // url: https://www.baidu.com/?wd=location 会重新加载
// 修改host
location.hash = "www.bilibili.com"; // url:https://www.bilibili.com/ 页面会重新加载,跳转到bilibili
// 修改href
location.href = "https://www.bilibili.com/"; // url: https://www.bilibili.com 是否会跳转可想而知
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);
表单元素事件
文本框失去焦点事件、获得焦点事件
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>