day2- js02

2018-08-28 本文已影响0人 PeppaTang

1、添加事件

添加事件方式，见代码

显示隐藏图片

操作div的display属性，在block和none之间切换即可

this使用

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

this.innerHTML = 'xxx'

切换背景色
表单内容控制
见代码

2、onload函数

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

3、选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
    button {
        width: 200px;
        height: 100px;
        font-size: 40px;
        background-color: pink;
        margin-left: 50px;
        display: inline-block;
    }
    div {
        width: 970px;
        height: 600px;
        font-size: 50px;
        background-color: yellow;
        margin-left: 50px;
        margin-top: 50px;
        display: none;
    }
    .active {
        font-size: 50px;
        background-color: blue;
    }
    .show {
        display: block;
    }
    </style>
</head>
<body>
    <button class="active">王宝强</button>
    <button>马蓉</button>
    <button>王助理</button>
    <button>啤教授</button>
    <div class="show">王宝强、王宝强、王宝强、王宝强、王宝强、王宝强</div>
    <div>马蓉、马蓉、马蓉、马蓉、马蓉、马蓉</div>
    <div>王助理、王助理、王助理、王助理、王助理、王助理</div>
    <div>啤教授、啤教授、啤教授、啤教授</div>
</body>
</html>
<script>
// 得到所有的button
var abuttons = document.getElementsByTagName('button')
var adivs = document.getElementsByTagName('div')
// 循环button数组，给里面每一个button添加点击事件
for (var i = 0; i < abuttons.length; i++) {
    // 给指定的button手动添加一个属性，用来保存是第几个button
    abuttons[i].index = i
    abuttons[i].onclick = function () {
        // 首先清掉所有button和div上面的class
        for (var j = 0; j < abuttons.length; j++) {
            abuttons[j].className = ''
            adivs[j].className = ''
        }
        // 给指定的button添加样式
        this.className = 'active'
        // console.log(i)
        // 给指定的div添加样式
        adivs[this.index].className = 'show'
    }
}
</script>

4、定时器

定时器：分为两种，一种是周期性定时器，一种是一次性定时器
周期性：每隔5s执行一次函数
一次性：几秒之后执行一次函数，执行完毕定时器结束

var timer = setTimeout(fn, 5000)

5000ms之后执行fn一次。然后结束
销毁定时器

clearTimeout(timer)

计数器

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() : 刷新整个页面

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事件，只要内容改变，就会触发