一、表单
提交数据
form表单
- action 表单提交的地址(服务器地址/目标地址)
- method GET/POST 表单的提交方式
1.表单的属性:
在表单中,通过为input输入类型添加name属性,可以直接通过表单来获取到目标节点对象。
<form action="http://www.baidu.com" method="GET" id="form">
<label for="">用户:</label><input type="text" name="username">
<label for="">密码:</label><input type="password" name="pwd">
<!-- 提交 -->
<input type="submit" value="登录">
var myForm = document.querySelector("#form");;
console.log(myForm.username);//用户名输入框
console.log(myForm.pwd);//密码输入框
2.表单的方法/事件
- onsubmit 表单的提交事件
- 注意:在表单提交事件中,可以通过return false拦截表单的提交(return其它内容,或者没有return都会提交表单)
- onfocus 获取焦点事件
- onblur 失去焦点事件
- onreset 表单重置事件
方法:
- focus() 获取焦点
- submit() 提交表单
- reset() 重置表单
- blur() 失去焦点
二、BOM
BOM:浏览器对象模型
1.window对象
常见属性:
- document 文档对象
- name 窗口名称
常见方法:
-
alert() 警告框
-
prompt() 输入框
-
confirm() 确认框 返回值布尔类型 true 确定 false 取消
-
setTimeout()
-
setInterval()
-
clearTimeout()
-
clearInterval()
-
open() 打开新窗口
- open() 打开一个空白窗口
- open(地址) 在窗口中打开指定地址
- open(地址,打开方式) _self _target _blank
- open(地址,打开方式,窗口样式 )
open("http://www.baidu.com","_target","width=400,height=400,left=300,top=300");
-
close() 关闭当前窗口
2.Navigator对象
Navigator对象用来描述浏览器信息
3.History对象
获取历史记录信息
- back()
- forward()
- go()
4.Location对象
Location 对象包含有关当前 URL 的信息。
// console.log(location.href);
// location.href="http://localhost:3000/login?username=jack&pwd=123#main"
console.log(location.protocol);//协议
console.log(location.host);//主机名+端口号
console.log(location.hostname);//主机名
console.log(location.port);//端口
console.log(location.pathname);//路径
console.log(location.search);//查询字符串 ?后面的内容
console.log(location.hash);//哈希
三、body的位置
1.client系列
1) 可视宽高
- clientWidth 节点对象.clientWidth width+padding
- clientHeight 节点对象.clientHeight height+padding
2)边框
- clientTop 上边框
- clientLeft 左边框
3)屏幕可视宽高
- document.documentElement.clientWidth
- document.documentElement.clientHeight
2.offset系列
1)占位的宽高
- offsetWidth width+border+padding
- offsetHeight height+border+padding
2)与定位距离
- offsetLeft
- offsetTop
若没有定位,则offsetLeft和offsetTop是相对于body的left和top值
若定位,则offsetLeft和offsetTop是相对于定位的元素的left值和top值
3.scroll系列
- scrollTop 元素被卷去的高
- scrollLeft 元素被卷去的宽
- scrollWidth 元素真实/实际宽度
- scrollHeight 元素的真实/实际高度
获取页面被卷去的高度:
document.documentElement.scrollTop||document.body.scrollTop
示例:
1.回到顶部
2.懒加载
4.BOM事件
scroll 滚动事件
resize 尺寸改变事件