day7_JavaScript(2)
- 1、添加事件 添加事件方式
var odiv = document.getElementById('div')
odiv.onclick = function () {}
- 显示隐藏图片 操作div的display属性,在block和none之间切换即可
- this使用 在匿名函数中的this就是当前对象
在onclick=demo(this) 就是当前节点
修改内容
this.innerHTML = 'xxx' - 切换背景色 表单内容控制
var odiv = document.getElementById('bai')
odiv.onclick = function () {
// 先获取div的背景色
color = this.style.backgroundColor
if (color == 'red') {
this.style.backgroundColor = 'yellow'
} else {
this.style.backgroundColor = 'red'
}
}
- 2、onload函数
- 3、定时器 定时器:分为两种,一种是周期性定时器,一种是一次性定时器
周期性:每隔5s执行一次函数
一次性:几秒之后执行一次函数,执行完毕定时器结束
var timer = setTimeout(fn, 5000)
5000ms之后执行fn一次。然后结束
销毁定时器 clearTimeout(timer)
计数器
图片消失 - 4、获取非行内样式
obj.currentStyle['name']
火狐和谷歌获取方式
getComputedStyle(odiv, null)['width']
获取非行内样式的兼容性写法
function getStyle(obj, name) {
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}
- 5、BOM操作 window.setTimeout,window.setInterval
window.alert\window.confirm
window.open
window.history(back、go)
history.go(1) 去往前一个网址
history.go(2) 去往后一个网址
history.back() 倒退一个网址
location
href : 读取得到当前的url,设置跳转到指定的url
reload() : 刷新整个页面
- 6、DOM操作 children
parentNode
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
firstChild
lastChild
previousSibling
nextSibling
tagName
createElement
removeChild
appendChild
insertBefore
setAttribute getAttribute
- 7、select下拉框和oninput事件 onchange : 事件,用户点击下拉框触发
selectedIndex : 用户点击的option的下标,下标从0开始
options : osel.options 可以得到所有的option对象,这是一个数组
【day7_JavaScript(2)】input框的oninput事件,只要内容改变,就会触发
推荐阅读
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- Shell-Bash变量与运算符
- 清明,是追思、是传承、是感恩。
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- 七老修复好敏感、角质层薄、红血丝
- 华为旁!大社区、地铁新盘,佳兆业城市广场五期!
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 事件代理
- 螃蟹和这些食物同吃,轻则腹泻、重则中毒!要小心哦~