0基础前端学习---第八天

安ぁ亦

于 2024-09-29 15:07:31 发布

阅读量378

点赞数 14

文章标签：前端学习

本文链接：https://blog.csdn.net/qq_47807509/article/details/142634991

版权

window对象方法-open/close

window对象-location

window对象-history与navigator

DOM补充-接上节

获取表单元素

DOM中通过form表单直接获取：
oForm.表单Name名

<form action="">
请输入用户名: <input type="text" name="user">
</form>
var oForm = document.getElementsByTagName("form")[0];
oForm.user

表单事件

oForm.onsubmit : 提交时调用
return true ：默认允许表单提交
return false：进制表单提交
oForm.onreset : 重置时调用
input.onfocus : 获得焦点
input.onblur 失去焦点

表单方法

oForm.submit() :表单提交方法
oForm.reset()：表单重置方法
input.focus()：获取焦点
input.blur(): 失去焦点
input.select(): 选中输入的文字

BOM介绍

BOM：Browser Object Model 浏览器对象模型

window对象方法-系统对话框

alert()：在页面弹出警告框（window.alert()可以省略window）
console.log()：在控制台打印信息
confirm('是否重置')：带确认的对话框
返回boolean值，true：确定，false：取消
prompt('请输入页面',1)：带输入的对话框
确定：返回输入的内容
取消：返回null

window对象方法-open/close

open(URL,name,features,replace)：打开一个新的浏览器窗口或查找一个已命名的窗口。

<button onclick="window.open('http://www.ujiuye.com')"></button>

close():关闭当前窗口

window对象-location

location是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
window.location='http://www.ujiuye.com/' ：调整页面
window.loaction.reload()：刷新当前页面
location属性：
hash "#contents" 返回URL中的hash（#号后跟零或多个字符），如果URL中不包含散列，则返回空字符串；
host "www.wrox.com:80" 返回服务器名称和端口号（如果有）；
hostname "www.wrox.com" 返回不带端口号的服务器名称；
href "http:/www.wrox.com" 返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值；
pathname "/WileyCDA/" 返回URL中的目录和（或）文件名；
port 返回URL中指定的端口号"8080"。如果URL中不包含端口号，则这个属性返回空字符串；
protocol 返回页面使用的协议"http:"。通常是http:或https:
search 设置或获取网页地址跟在问号后面的部分 "?q=javascript" ,当以get方式在url中传递了请求参数时，可以利用location的search属性提取参数的值。

window对象-history与navigator

history ：对象包含用户（在浏览器窗口中）访问过的 URL。
back()：加载 history 列表中的前一个 URL (来时)
forward()：加载 history 列表中的下一个 URL
go()：加载 history 列表中的某个具体页面（-1上一个(来时)页面，1前进一个页面)
//go(-1):返回上一页，原页面表单中的内容会丢失；back():返回上一页，原页表表单中的内容会保留。
history.go(-1)：后退+刷新
history.back()：后退
navigator：包含有关浏览器的信息

client系列

元素.clientWidth：获取元素的可视宽 (width+左右的padding)
元素.clientHeight：获取元素的可视高 (height+上下的padding)
元素.clientTop：上边框
元素.clientLeft：左边框
document.documentElement.clientWidth：获取屏幕的可视宽
document.documentElement.clientHeight：获取屏幕的可视高

offset系列

元素.offsetWidth : 获取元素的占位宽（width+padding+border）
元素.offsetHeight : 获取元素的占位高（height+padding+border）
元素.offsetTop：当前元素的顶部，到定位父元素的距离，没有定位父元素，到body的距离
元素.offsetLeft：当前元素的左边，到定位父元素的距离，没有定位父元素，到body的距离

scroll系列

元素.scrollTop : 获取元素被卷去的高
元素.scrollLeft：获取元素被卷去的宽
元素.scrollWidth : 获取元素实际内容宽
元素.scrollHeight : 获取元素实际内容高
document.documentElement.scrollTop || document.body.scrollTop：获取页面被卷去的高