9.15学习内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Day1</title>
    <style>
        .on{
            background-color: white;
        }
        .off{
            background-color: black;
        }
    </style>
</head>


<body class="on">
    <input type="button" value="内置js代码" onclick="alert('嘻嘻嘻')" />
    <input type="button" value="分离js代码" id= "btn">
    <script>
        //DOM
        //Document Object Model
        //BOM
        //Browser Object Model
        //
        //HTML文档--对象--标签--对象--元素--节点
        //
        //事件-注册事件-触发事件-响应事件-执行事件代码-事件结束
        //
        var obj = document.getElementById("btn");
        obj.onclick = function(){
            alert("哈哈哈");
        };
        //js代码最好不要写在head标签中，否则可能会因为找不到对象而报错
    </script>
    
    <!-- 案例 点击按钮显示图片-->
    <input type="button" value="显示图片" id="btn2">
    <div >
        <img src="" alt="" id="img" />
    </div>
    <script>
        document.getElementById("btn2").onclick = function(){
            var img = document.getElementById("img");
            // img.width = "500";
            // img.height = "500";            //要注意不能加单位，这样属性值会变成0！原因在于我们所赋值的类型应该为number类型，如果为其他值，会自动转换成0！
            img.style.width = "500px";
            img.style.height = "500px";    //用style方式即CSS方式修改时需要加单位
            img.src = "images/1.jpg";
        
        };
    </script>
    
    <!-- 案例：点击按钮修改p标签的内容 -->
    <p id="p1">这是一个p</p>
    <input type="button" value="修改标签内容" id="btn3">
    <script>
        var p1 = document.getElementById("p1");
        var btn3 = document.getElementById("btn3");
        btn3.onclick = function(){
            p1.innerText = "写入标签用innerText =\"\" "
        };
    </script>

    <!-- 案例    ：点击按钮修改超链接 -->
    <input type="button" id="btn4" value="修改超链接">
    <a href="http://www.baidu.com" id = "a1" target="_black">百度一下</a>
    <script>
        document.getElementById("btn4").onclick = function(){
            var aObj = document.getElementById("a1");
            aObj.href = "http://www.google.com";
            aObj.innerText = "谷歌一下";
        };
    </script>
    <div id="div1">
        <p class="p2" >天王盖地虎</p>
        <p class="p2">天王盖地虎</p>
        <p>天王盖地虎</p>
        <p>天王盖地虎</p>
        <p>天王盖地虎</p>
        <input type="button" value = "修改前两行" id="btn5">
        <input type="button" value = "修改全部" id="btn6">
    </div>
    
    <!--  document.getElementsByClassName("")    根据类名获取元素返回的是伪数组-->
    <script>
        document.getElementById("btn5").onclick = function(){
            var pObj = document.getElementsByClassName("p2");
            for(var i=0; i<pObj.length; i++){
                pObj[i].innerText = "小鸡炖蘑菇";
            }
        };
    </script>

    <!--  document.getElementsByTagName("")    根据标签获取元素返回的是伪数组-->
    <script>
        document.getElementById("btn6").onclick = function(){
            var pObj = document.getElementsByTagName("p");
            for(var i=0; i<pObj.length; i++){
                pObj[i].innerText = "宝塔镇河妖";
            }
        };    
        

            //发现把前面案例的p都改了
            //可以附加更加准确地获取标签
            //getElementsById("div1").getElementsByTagName("p")
    </script>

    
    <!-- 排他功能案例 -->
    <button>我是按钮</button>
    <button>我是按钮</button>
    <button>我是按钮</button>
    <button>我是按钮</button>
    <button>我是按钮</button>
    <button>我是按钮</button>
    <script>
        var btns = document.getElementsByTagName("button");//获取所有按钮
        for(var i = 0; i < btns.length; i++){    //为所有按钮添加事件
            btns[i].onclick = function(){
                //先把所有按钮复原
                for(var j = 0; j < btns.length; j++){
                    btns[j].innerText = "我是按钮";
                }
                //把被点击的按钮改变
                this.innerText = "我被点击了";        //特别注意，这里不能写btns[i].innerText = "";因为for循环实在页面加载结束就执行了，而点击事件被注册了还没有被触发。此时i已经变成了btn.length，以后触发事件的时候执行的是第113-117的代码，此时i还是btn.length，而不是被点击的那个按钮的索引
                //console.log(i);
            };
        }
    </script>

<!-- 案例    ：DOM操作修改CSS样式 -->
    <div id="dv"></div>
    <input type="button" value="修改样式" id="btn7">

    <script>
        document.getElementById("btn7").onclick = function(){
            var dv = document.getElementById("dv");
            dv.style.width = "200px";
            dv.style.height = "200px";                //CSS的要加单位
            dv.style.backgroundColor = "pink";        //DOM操作修改CSS样式中带有-的属性，一律改成去掉-，首字母大写
        };

        //DOM操作中设置标签的类，不用class,而要用className
        //
        //
        //
        
    </script>
        

    <!-- 案例：网页开关灯 -->
    <input type="button" value="开关灯" id="btn8">

    <script>
        document.getElementById("btn8").onclick = function(){
        
            if(document.body.className == "on"){
                document.body.className = "off";
            }else {
                document.body.className = "on";
            }
        };
    </script>
    

        
</body>
</html>
posted on 2018-09-16 21:37 临别一眼阅读(117) 评论(0) 收藏举报
刷新页面返回顶部
9.15学习内容

临别一眼

公告

导航
