day02：DOM和事件操作

一、点击按钮修改a链接效果

<input type = "button" value = "修改链接" id = "btn">
<a id = "ak" href = "https://www.jiumodiary.com/">鸠摩搜书</a>
<script>
    //获取事件源
    var btn = document.getElementById("btn");
    //事件源.事件=function(){}
    btn.onclick = function(){
        //获取a标签
        var aObj = document.getElementById("ak");
        aObj.href = "http://www.zztion.com";//修改a链接
        aObj.innerText = "中职通教育";
    }
</script>

二、点击按钮修改图片tittle和alt

<input type = "button" value = "显示" id = "btn">
<img src = "images/mm.png" alt = "" title = "美美">
<script>
    //事件源
    var btn = document.getElementById("btn");
    //事件源.事件=function(){}
    btn.onclick = function(){
        //获取图片
        var imgObjs = document.getElementsByTagName("img");
        console.log(imgObjs);
        //注意：一定要加下标[0]
        imgObjs[0].title = "我被修改了";
        imgObjs[0].alt = "我也是可以被修改了";
    }
</script>

三、点击小图变大图

<input type = "button" value = "变大图" id = "btn">
<img src ="images/1-small.jpg" alt = "" id = "small">
<script>
    //事件源
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        document.getElementById("small").src = "images/1.jpg";
    }
</script>

四、点击图片弹出框

<style>
    img{
        width: 200px;
        height: 120px;
    }
</style>
<img src = "images/1.jpg" alt = "" id = "im1">
<img src = "images/2.jpg" alt = "" id = "im2">
<img src = "images/3.jpg" alt = "" id = "im3">
<script>
    var imgObjs = document.getElementsByTagName("img");//图片集合的伪数组
    for(var i = 0; i < imgObjs.length; i++){
        //给每张图片添加点击事件
        imgObjs[i].onclick = function(){
            alert("点击图片弹出框");
        }
    }
</script>

五、点击按钮显示和隐藏

<style>
    #dv{
        width: 300px;
        height: 200px;
        background: hotpink;
    }
</style>
<input type = "button" value = "隐藏" id = "btn1">
<input type = "button" value = "显示" id = "btn2">
<div id = "dv"></div>
<script>
    //获取事件源
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    //事件源.事件=function(){}
    btn1.onclick = function(){
        var dv = document.getElementById("dv");
        dv.style.display = "none";//表示隐藏
    }
    btn2.onclick = function(){
        var dv = document.getElementById("dv");
        dv.style.display = "block";//表示显示
    }
</script>

六、对显示和隐藏的优化

<style>
    #dv{
        width: 300px;
        height: 200px;
        background: hotpink;
    }
</style>
<input type = "button" value = "隐藏" id = "btn1">
<input type = "button" value = "显示" id = "btn2">
<div id = "dv"></div>
<script src = "publick.js"></script>
<script>
    my$("btn1").onclick = function(){
        my$("dv").style.display = "none";//表示隐藏
    }
    my$("btn2").onclick = function(){
        my$("dv").style.display = "block";//表示显示
    }
</script>
// js---publick:封装一个获取获取id的函数
function my$(id){
    return document.getElementById(id)
}

七、点击图片变小

<img src = "images/liuyan.jpg" alt = "" id = "im">
    <script>
        //获取事件源
        var im = document.getElementById("im");
        im.onclick = function(){
            //im.width = "200";不加px
            //im.height = "300";
            this.width = "200";//this指自身
            this.height = "300";
            //总结：this前面是谁就指向谁
        }
    </script>

总结：this前面是谁就指向谁。

八、点击按钮修改value值

<input type ="button" id = "btn" value = "按钮">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        // btn.value = "看我被修改了";
        // btn.type = "text";
        // btn.id = "btn2";
        this.value = "看我被修改了";
        this.type = "text";
        this.id = "btn2";
        // 总结：this指向（看点前面是谁，this就指向谁）
    }
</script>

九、排他思想

<input type="button" value="完美">
<input type="button" value="完美">
<input type="button" value="完美">
<input type="button" value="完美">
<input type="button" value="完美">
<input type="button" value="完美">
<input type="button" value="完美">
<input type="button" value="完美">
<script>
    var btnObjs = document.getElementsByTagName("input");
    //循环遍历
    for(var i = 0; i < btnObjs.length; i++){
    //第一层循环是获取所有的input，为了做点击事件
        //对每个input做点击事件
        btnObjs[i].onclick = function(){
            //循环遍历所有的input,让他变成完美
            for(var j = 0; j < btnObjs.length; j++){
                btnObjs[j].value = "不完美";
            }
            //让自身变成“胡歌”
            this.value = "胡歌";
        }

    }
</script>