js操作高级

1.对象使用的高级

1.对象的key为字符串类型, value为任意类型

var obj = {
    name: "name",
    "person-age": 18
}
// 访问
obj.name | obj["name"]
obj["person-age"]
View Code

2.对象的属性可以任意添加与删除

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    var obj={
        name:'obj'
    };
    console.log(obj.name);
    // 删除
    delete obj.name;
    // 添加
    obj.age=18;// 如果age的key已存在就是修改值, 不存在就是添加键值对, 添加的key任意
    console.log(obj.age)
    // 注: 获取的页面元素(标签对象)也可以任意添加/删除属性
</script>
</html>
View Code

2.页面标签全局属性操作

<body>
    <div class="ele" alert="OK">div div div</div>
</body>
<script>
    var ele = document.querySelector('.ele');
    var info = ele.getAttribute('alert');
    console.log(info);
    ele.setAttribute('alert', 'no ok');
    ele.setAttribute('key', 'value');
    console.log(ele);
</script>
View Code

3.事件

1.小练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 350px;
            height: 350px;
            margin: 100px auto 0;
        }
        .box div{
            width: 70px;
            height: 70px;
            background-color: black;
            float: left;
            border-radius: 25%;
        }
    </style>
</head>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
<script>
    var divs=document.querySelectorAll('.box div');
    //重置颜色
    for (let i=0;i<divs.length;i++){
        divs[i].style.backgroundColor='yellow';
    }
    //游戏实现
    for (let i=0;i<divs.length;i++){
        divs[i].onclick=function () {
            //修改自身
            toggleBGColor(this);
            //修改上
            if (i>4){
                var topEle=divs[i-5];
                toggleBGColor(topEle);
            }
            //下
            if (i<20){
                var btnEle=divs[i+5];
                toggleBGColor(btnEle);
            }
            //右
            if (i%5!=4) {
                var rightEle=divs[i+1];
                toggleBGColor(rightEle);
            }
            //右
            if (i%5!=0) {
                var leftEle=divs[i-1];
                toggleBGColor(leftEle);
            }
        }
    }
    //单击改变颜色
    function toggleBGColor(ele) {
        var bgColor=ele.style.backgroundColor;
        if (bgColor=='yellow'){
            ele.style.backgroundColor='black';
        } else {
            ele.style.backgroundColor='yellow';
        }
    }
</script>
</html>
View Code

2.事件的绑定

<div class="event_on1">事件的绑定1</div>
<div class="event_on2">事件的绑定2</div>
<script>
    var event_on1 = document.querySelector('.event_on1');
    // 事件绑定的第一种方式
    event_on1.onclick = function () {
        console.log(1)
    };
    event_on1.onclick = function () {
        console.log(2)
    }

    // 事件绑定的第二种方式
    var event_on2 = document.querySelector('.event_on2');
    // 可以为一个元素绑定多个事件, 按绑定顺序依次执行
    event_on2.addEventListener('click', function () {
        console.log("a")
    });
    var action = function () {
        console.log("b")
    }
    event_on2.addEventListener('click', action);

    // 如何取消事件
    event_on2.removeEventListener('click', action)


</script>
View Code

3.事件对象

// 系统回调事件函数时, 传递了一个 事件(event) 实参
// 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可
box.onclick = function(ev){
    // 使用事件对象
    // 特殊按键 eg: ev.altKey: true | false
    // 鼠标触发点: ev.clientX | ev.clientY
    
    // 取消冒泡
    ev.cancelBubber = true;
    
    // 取消默认事件
    return false;
}
View Code

 

posted @ 2018-12-20 21:12  葛洪  阅读(155)  评论(0)    收藏  举报