BOM
1.window的事件
window.onload 滚动条动了就会执行的事件
window.onload = function(){
}
window.onresize 当浏览器大小发生改变就会触发的事件
window.onresize = function(){
}
2.控制窗口
window.open(目标地址) 打开新的窗口
window.close() 关闭当前窗口
window.scrollTo(x,y)
3.定时器
window.setInterval(函数代码,毫秒数 ); 隔一段时间执行一次不且会停止
window.setinterval(function() {
} , 18};
setTimeout(函数代码 ,毫秒) 隔一段时间吃一次,只执行一次
setTimeout(function(){
},18)
clearInterval()清楚定时器
clearTimeout()清楚定时器
DOM
1.获取标签
css选择器:类名、id、标签、后代、子元素、兄弟、伪类、群组、通配、属性
document.querySelector('css选择器');满足css选择器的第一个元素
获取到的标签 - 是一个对象 - console.log只能看到标签 - 想看到对象使用console.dir
document.querySelectorAll('css选择器'); 满足css选择器的所有元素
var oDivs = document.querySelectorAll('div') // oDivs是 伪数组
获取到的集合 - 是一个伪数组,可以遍历、取下标、可以有长度,就是不能使用数组方法
2.操作标签的内容
标签(伪数组).innerText() 只能获取到文本
标签(伪数组).innnerHTML 获取带有标签的内容
表单标签.value
<input type="text" value="请输入的别名">
console.log(oInput.value); //请输入的别名
oInput.value = '内容不能为空'
3.属性操作
标签.getAttribute('属性名') 属性值获取 返回的属性值
标签.setAttribute('属性名','属性值') 设置属性
标签.removeAttribute('属性名') 删除属性
4.样式操作
标签.style.css的键 = 'css的值' 设置样式 (设置在行内)
windeow.getComputedStyle(标签) 获取样式 返回键值对里的所有样式组成的对象
5.类名操作
标签.className = 值 设置类名
标签.className 获取类名
标签.className = ' ' 清空所有类名
标签.classList 包含所有类名操作的对象
标签.classList.remove(被删除的类名) 删除类名
标签.classList.add(新类名) 添加新类名
标签.classList.toggle(类名) 在删除之间切换
6.页面卷去的距离
var t = documentElement.scrollTop || document.body.scrollTop
console.log(t)
7.短路运算
利用逻辑运算符号中的||和&&来判断他左右两边是否能进行到右边,能进行到右边就把右边的值赋值给变量,不能进行到右边,就把左边的值赋值给变量
var a = true || false
a的值是左边的值
var a = false || true
a的值是右边的值
var a = true && false
a的值是右边的值
vafr a = false && true
a的值是左边的值
如果值不是布尔值,就转成布尔值进行
8.获取标签位置
标签.offsetLeft
标签.offsetTop
参考物是设置过定位的祖宗元素
9.获取标签大小
包含边框
标签.offsetWidth
标签.offsetHeight
不包含边框
标签.clientWidth
标签.clientHeight
10.获取标签的边框厚度
标签.clientLeft
标签.clientTop