一、表单操作
- 变单元素的获取
可以根据name属性获取表单元素
<form action="./2.html" id="myForm">
<label for="">用户名:</label><input type="text" name="myName"><br>
<label for="">密码:</label><input type="password" name="pwd"><br>
<!-- <input type="checkbox" name="love">爬山 -->
<button>登录</button>
</form>
var form=document.getElementById('myForm');
//通过name属性获取表单元素
console.log(form.myName.value);
console.log(form.pwd.value);
- 表单事件
事件名 | 用法 |
---|---|
onchange | 内容改变事件(一般用于checked、radio、select) |
oninput | 输入框内容改变事件 |
onfocus | 获取焦点事件 |
onblur | 失去焦点事件 |
onsubmit | 表单提交事件 |
onreset | 表单重置事件 |
- 表单常见方法
方法名 | 用法 |
---|---|
focus() | 获得焦点 |
blur() | 失去焦点 |
submit() | 提交表单 |
select() | 下拉选择文字 |
- 表单提交
表单提交的几种方式,默认是return true 所以在放在表单内部的button按钮虽然没有任何功能却也可以提交表单
提交表单的方式 | 用法 |
---|---|
onsubmit | 表单提价事件 |
return “” | 返回空字符,提交表单 |
return true | 默认提交 |
return false | 不提交表单 |
注意:只要不是return false,表单均会提交,return不能忘记加
<form action="http://www.baidu.com" onsubmit="return val()" id="myForm">
二、 BOM
- BOM定义
Browser object model 浏览器对象模型 允许通过js操作一部分浏览器的内容
- window对象
- 是一个顶级对象,页面声明的变量和函数都会成为window对象的属性和方法(顶级对象可以省略)
- 常见方法
alert() 警告框
prompt() 提示框
confirm() 确认框
open(url,target,params) 打开一个新的窗口
参数说明:
url 要打开的窗口的地址
target: _self 在当前页面中打开 _blank 在新窗口中打开页面(默认)
params: 窗口样式设置
close() 关闭窗口页面
- History对象
- back() 回退一个页面
- forward() 前进一个页面
- go(url|number) 去指定的页面 ,例如:go(-1) 回退一个页面
- Location对象
保存了与url相关的信息的一个对象
属性 | 描述 |
---|---|
hash | 设置或返回从井号 (#) 开始的 URL(锚)。 |
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名。 |
href | 设置或返回完整的 URL。 |
pathname | 设置或返回当前 URL 的路径部分。 |
port | 设置或返回当前 URL 的端口号。 |
protocol | 设置或返回当前 URL 的协议。 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分)。 |
三、body相关位置属性
- client系列(只读,返回值不带单位)
属性 | 描述 |
---|---|
clientWidth | width+左右padding |
clientHeight | height+上下padding |
clientLeft | 左边框的值 |
clientTop | 上边框的值 |
- offset系列(只读,返回值不带单位)
属性 | 描述 |
---|---|
offsetWidth | 宽度(width+padding+border) |
offsetHeight | 高度(height+padding+border) |
offsetLeft | 左偏移量(当前元素距离父元素的左边距) |
offsetTop | 上偏移量(当前元素距离父元素的上边距) |
offsetParent | 返回元素带有定位的父级元素,如没有定位,返回body |
- scroll系列(非只读,可以赋值)
属性 | 描述 |
---|---|
scrollWidth | 可滚动区域的宽度 |
scrollHeight | 可滚动区域的高度 |
scrollTop | 折叠的不可见的滚动的高度 |
scrollLeftt | 折叠的不可见的滚动的左边距 |
页面被卷去的头部距离:window.pageYoffset
页面被卷去的左部距离:window.pageXoffset
注意:兼容性不好IE9以后才支持
解决兼容问题:
声明DTD,使用document.documentElement.scrollTop
未声明DTD,使用document.body.scrollTop