day7-知识

1、添加事件

添加事件方式，见代码

显示隐藏图片
操作div的display属性，在block和none之间切换即可

this使用
在匿名函数中的this就是当前对象
在onclick=demo(this) 就是当前节点
修改内容
this.innerHTML = 'xxx'

切换背景色

    切换div的背景色

表单内容控制

2、onload函数

window的事件，windows.onload = function () {} 是在整个文档加载完毕之后执行，但是自己写的onclick的点击函数不能写到onload里面，因为内部函数只能在内部使用，不能再外部使用
如果实在是想用，
window.lala = function () {}

3、选项卡

方法一

    


    
    
    
    
    菊花台、千里之外、七里香、霍元甲、听妈妈的话、稻香、双节棍、简单爱
    花田错、龙的传人、唯一
    慢慢、吻别、一千个伤心的理由
    谢谢你的爱、冰雨、天意、忘情水


方法二
    


    
    
    
    
    王宝强、王宝强、王宝强、王宝强、王宝强、王宝强
    马蓉、马蓉、马蓉、马蓉、马蓉、马蓉
    王助理、王助理、王助理、王助理、王助理、王助理
    啤教授、啤教授、啤教授、啤教授




4、定时器
 定时器：分为两种，一种是周期性定时器，一种是一次性定时器
 周期性：每隔5s执行一次函数
    周期性定时器


    




一次性：几秒之后执行一次函数，执行完毕定时器结束
 var timer = setTimeout(fn, 5000)
 5000ms之后执行fn一次。然后结束
    凤姐消失


    
        
    
    




例子
    一闪一闪亮晶晶


    




销毁定时器
 clearTimeout(timer)

计数器
    计数器
    


    0




图片消失

5、获取非行内样式
IE浏览器获取非行内样式方式
    obj.currentStyle['name']
火狐和谷歌获取方式
    getComputedStyle(odiv, null)['width']
获取非行内样式的兼容性写法
function getStyle(obj, name) {
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}

    获取非行内
    


    
    
    




6、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() : 刷新整个页面
    BOM操作


    
    
    
    




7、DOM操作
 children
 parentNode
 firstElementChild
 lastElementChild
 previousElementSibling
 nextElementSibling
firstChild
lastChild
previousSibling
nextSibling

tagName
createElement
removeChild
appendChild
insertBefore 

setAttribute  getAttribute

8、select下拉框和oninput事件
 onchange : 事件，用户点击下拉框触发
 selectedIndex : 用户点击的option的下标，下标从0开始
 options : osel.options 可以得到所有的option对象，这是一个数组
input框的oninput事件，只要内容改变，就会触发

    select下拉框

day7-知识

1、添加事件

2、onload函数

3、选项卡

5、获取非行内样式

你可能感兴趣的:(day7-知识)