当对文档中的元素进行操作的时候或者文档的状态发生改变的时候就会产生一个事件
通过id获取元素 返回的是单个对象
document.getElementById();
通过类名获取元素 返回的是数组对象 class=‘cur’
document.getElementsByClassName(‘cur’) [div,div,div] //循环 for(var i =o; i <= length; i++) for(var j in dvs)
通过标签名. 返回的是数组对象
d1ocument.getElementsByTagName(‘div’)
通过name属性 返回的是数组对象
document.getElementsByName li name = ‘cur’
通过选择器方式 返回的是单个对象
document.querySelector(’#’)
document.querySelector(’.’)
document.querySelector(‘tag’)
通过选择器方式多个 返回的是数组对象
document.querySelectorAll
style
只能对行内样式进行操作
既可以设置 也可以获取
dvs.style.background=‘pink’ ;
dvs.style.width = ‘200px’;
.backgroundColor 有横杠的css样式要使用驼峰命名法\
// 字符串
div.style.width
获取元素信息
//数值
dvs.offsetWidth 获取元素的宽
dvs.offsetHeight 获取元素的高
dvs.offsetTop 当前元素距离顶部的偏移量
dvs.offsetLeft 当前元素距离左部的偏移量
设置 px
20 + 30
dvs.style.width = 20+ ‘px’;
绑定事件
onclick 单击事件
dvs.onclick =fuction(){}
事件监听
3.addEventListener(‘click’,function(){})
onload 文档事件
window.οnlοad=
鼠标事件
onclick 单击事件
ondblclick 双击事件
oncontextmenu 右键事件
onmouseover 鼠标放上去的事件
onmouseout 鼠标离开的事件
onmousemove 鼠标移动的事件
onmousedown 鼠标按下事件
onmouseup 鼠标抬起事件
阻止默认行为
return false
鼠标事件对象
function(e){
鼠标的坐标
e.pageX
e.pageY
}
键盘事件
onkeydown 键盘按下
onkeyup 键盘抬起
表单事件
onfocus 获取焦点
onblur 丧失焦点
onchange 值在发生改变的时候
onselect 只能选中input输入框或者textarea文本域内容的时候触发
onsubmit 提交事件
BOM
alert() 提示框
confirm() 确认框
prompt() 获取用户输入的信息
setTimeout() 按照指定的毫秒数后调用 只调用一次 clearTimeout( ) 停止
setInterval() 按照指定的周期调用 定时循环 clearInterval( ) 停止
window对象的子对象
location地址栏对象
属性 href 设置或返回完整的 URL
location.href=‘http://www.baidu.com’
方法 页面跳转 location.replace(‘http://www.baidu.com’)
页面刷新 reload() reload(true)
事件 onresize()
onscroll()