定时器
JS提供的两种异步定时器机制
异步机制代码:在同步机制代码执行后执行的
返回值:不区分定时器类型,表示你是页面中的第几个定时器,number数据类型
返回值的作用:关闭定时器
setTimeout()
语法:setTimeout(函数,时间)
说明:在一段时间后,执行一次函数代码 /延迟定时器
setInterval()
语法:setInterval(函数,时间)
说明:每隔一段时间,执行函数代码 /间隔定时器
关闭定时器方法
-
clearInterval()
语法:clearInterval(要关闭的定时器的返回值)
-
clearTimeout()
语法:clearTimeout(要关闭的定时器的返回值)
BOM(浏览器对象模型)
浏览器顶级对象:window
全局中this、top都指向window
window中默认有name属性,属性值为空的字符串
浏览器尺寸
innerWidth、innerHeight : 获取浏览器可视窗口宽高(含滚动条)
弹出层
alert():提示弹框 没有返回值
confirm(): 询问弹窗 确定返回true,取消返回false
prompt(): 提示输入弹窗 取消返回null,输入并确认返回输入内容
浏览器地址信息
loaction 对象时浏览器用来存储地址信息的
会将地址中的中文转为url编码格式
-
location.href(属性)
获取浏览器地址栏内的url地址
可以给他赋值个地址,打开页面就会跳转
-
location,reload()(方法)
刷新浏览器,当在全局中使用时,浏览器会一直刷新
拓展属性:
-
location.host:访问主机地址
-
search:浏览器(?后面的内容)
-
hash:地址中(#后面的内容)
-
浏览器历史记录
window中的history对象,用作储存浏览器历史记录
history里面的length属性为1的话就是只有一个当前的页面
-
history.back()
返回上一个页面,前提要有上一个页面的记录,否则不会回退
-
history.forword()
进入下一个页面,前提之前要有回退操作,否则就不会进行前进操作
-
history.go()
回到指定位置的页面
浏览器滚动距离
scrollTop
获取的是页面向上滚动的距离
一共有两种获取方式
document.body.scrollTop //1 document.documentElement.scrollTop //2 //区别:有兼容性问题 //声明<!DOCTYPE html>时,第一种不能用
scrollLeft
获取页面向左滚动的距离
两种获取方式
document.body.scrollLeft //1 document.documentElementLeft //2 //区别:有兼容性问题 //声明<!DOCTYPE html>时,第一种不能用
浏览器的onscroll事件
在浏览器中鼠标滚轮滚动时触发的事件
window.onscroll = function () { alert ( '滚动了' ) }
DOM(文档对象模型)
document 是 DOM中的顶级对象模型 上一级是window对象
作用:获取一个元素、移除一个元素、创建一个元素、向页面里面添加一个元素、给元素绑定一些事件、获取元素的属性、 给元素添加一些 css 样式
获取标签元素的方法
伪数组不能使用数组方法
-
通过id获取
语法:document.getElementById(标签的id值)
返回值:对应的标签元素、没有对应id值则返回null
-
通过类名获取(class)
语法:document.getElementsByClassName(类名class)
返回值:对应类名的标签组成的伪数组、没有对应的类型则返回空的伪数组
-
通过标签名获取
语法:document.getElementsByTagName(标签名)
返回值:对应标签组成的伪数组,没有则返回空伪数组
-
通过选择器获取
语法:document.querySelector(选择器)
返回值:返回选择器匹配的第一个元素,没有则null
-
通过选择器获取
语法:document.querySelectorAll(选择器)
返回值:返回选择器匹配的所以元素,没有则null
操作属性
通过获取标签元素之后就可以操作DOM元素的属性,把想要的效果渲染在页面
名称 | 操作 | 作用 | |
---|---|---|---|
innerHTML | 标签名.innerHTML='' | 设置HTML内部结构 | 识别HTML标签 |
innerText | 标签名.innerText=‘’ | 设置标签文本 | 不识别HTML标签 |
getAttribute | getAttribute(属性名) | 获取元素属性值 | |
setAttribute | setAttribute(属性名,属性值) | 给元素添加属性 | |
removeAttirbute | removeAttirbute(属性名) | 移除某个属性 | |
style | 获取的标签.style.属性='属性值' | 给元素添加CSS样式 | |
className | 获取的标签.className | 设置标签的类名 | 覆盖 |