第8天：javascriptDOM小案例、onmouseover 、onmouseout

時間 2019-12-09

標籤 8天 javascriptdom 案例 onmouseover onmouseout 欄目 JavaScript 简体版

原文原文鏈接

案例

爲元素註冊點擊事件，彈出對話框

<input type="button" id="btn" value="開發分離">
    <input type="button" id="btn2" value="最終版">
    <script>
    //定義函數
    function f1(){
        alert("開發分離的html和js代碼");
    }
    //根據id獲取這個標籤(元素)
    var btnObj = document.getElementById("btn");
    //爲按鈕註冊點擊事件
    //注意f1不加括號 否則f1()，頁面加載時就執行了
    //該註冊方式不是最好的
    btnObj.onclick =f1;
    //根據id屬性的值，從整個文檔中獲取這個標籤(元素)
    var btnObj2 = document.getElementById("btn2");
    //爲當前的這個按鈕元素(對象)，註冊點擊事件，添加事件處理函數（匿命函數）
    btnObj2.onclick = function(){
        alert("我要變帥");
    }
    </script>

點擊按鈕顯示、隱藏圖片

<script>
    //頁面加載後執行
    window.onload = function(){
        //根據id獲取按鈕
        var btnObj = document.getElementById("btn");
        //爲按鈕註冊點擊事件，添加事件處理函數
        btnObj.onclick = function(){
            imgObj.src = "迪麗熱巴.jpg";
            //設置圖片的大小 不用加px width=「」
             imgObj.width = "300";
        }
        //根據id獲取圖片標籤，設置圖片的src屬性值
        var imgObj = document.getElementById("img");
        //隱藏圖片
        var  hiddenObj = document.getElementById("hidden");
        hiddenObj.onclick = function(){
            //清空圖片src屬性
            imgObj.src = "";
        }
    }
    </script>
</head>
<body>
    <input type="button" value="顯示圖片"  id="btn">
    <input type="button" value="隱藏圖片" id="hidden">

    <img src="" alt="" id="img">
</body>

點擊按鈕改變p標籤顯示內容

<script>
    window.onload = function(){
        //根據id獲取元素，爲元素測試點擊事件
        var btnObj = document.getElementById("btn");
        btnObj.onclick = function(){
            var p = document.getElementById("p1");
            //p 標籤文本內容設置時，使用innerText這個屬性的方式
            //凡成對出現的標籤，中間的文本內容，設置的使用都使用innerText這個屬性
            p.innerText = "p改變後的內容:我仍是一個p標記";
        }
    }
    </script>
</head>
<body>
    <input type="button" id="btn" value="設置p標籤內容">
    <p id="p1">我是p標籤</p>
</body>

案例點擊按鈕改變a標籤的熱點文字和標籤地址

<script>
    //頁面加載後執行
    window.onload = function(){
        //根據id獲取文檔中btn按鈕元素
        var btnObj = document.getElementById("btn");
        //爲btn元素註冊點擊事件
        btnObj.onclick = function(){
            //根據id獲取文檔中a標籤元素
            var aObj = document.getElementById("google");
            //設置a標籤改變後的地址和熱點文字
            aObj.href = "www.baidu.com";
            aObj.innerText = "百度";
        }
    }
    </script>
</head>
<body>
    <input type="button" id="btn" value="點擊改變a標籤的地址和熱點文字">
    <a href="www.google.com" id="google">谷歌</a>
</body>

點擊按鈕修改多個p標籤的文字的內容html

<script>
    //頁面加載後執行
    window.onload = function(){
      //根據id獲取元素
      var btnObj = document.getElementById("btn");
      //爲btnObj對象註冊點擊事件
      btnObj.onclick = function(){
        //根據標籤名字獲取標籤
        var pList = document.getElementsByTagName("p");
        //遍歷獲取的到的標籤僞數組
        for(var i = 0; i < pList.length; i++){
            pList[i].innerText = "好煩，帥不能當飯吃!"
        }
      }
    }
    </script>
</head>
<body>
    <input type="button" id="btn" value="點擊改變">
    <p>哈哈，你最帥！！！</p>
    <p>哈哈，你最帥！！！</p>
    <p>哈哈，你最帥！！！</p>
    <p>哈哈，你最帥！！！</p>
    <p>哈哈，你最帥！！！</p>
</body>

點擊按鈕修改圖片的alt和title

<!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>11案例點擊按鈕修改圖片的alt和title</title>
    <style>
    img{
        width: 100px;
        height: 100px;
    }
    </style>
</head>
<body>
    <input type="button" value="顯示效果" id="btn">
    <img src="迪麗熱巴.jpg" alt="哈哈" title="imgtitle">
    <script>
    document.getElementById("btn").onclick = function(){
        //返回一個僞數組
      var imgObj = document.getElementsByTagName("img");
      console.log(imgObj);
      imgObj[0].title = "圖片標題";
      imgObj[0].alt = "圖片的alt";
    }
    </script>
</body>

點擊按鈕修改文本框的值

<!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>
</head>
<body>
    <input type="button" value="修改文本框的值" id="btn"><br/>
    <input type="text" value=""><br/>
    <input type="text" value=""><br/>
    <input type="text" value=""><br/>
    <input type="text" value=""><br/>
    <input type="text" value=""><br/>
    <input type="text" value=""><br/>
    <input type="text" value=""><br/>
    <script>
    document.getElementById("btn").onclick = function(){
        //獲取全部的文本框
        var inputs = document.getElementsByTagName("input")
       
        for(var i = 0; i < inputs.length; i++){
            if(inputs[i].type !="button"){
                inputs[i].value = "哈哈真的改了！";
            }
        }
    }
    </script>                

</body>
</html>

點擊每一個圖片彈出一個對話框

<!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>Document</title>
    <style>
    img{
        width: 100px;
        height: 100px;
    }
    </style>
</head>
<body>
    <img src="迪麗熱巴.jpg" alt=""id="img1">
    <img src="迪麗熱巴.jpg" alt=""id="img2">
    <img src="迪麗熱巴.jpg" alt=""id="img3">
    <script>
        //根據標籤名字獲取圖片標籤 ，分別註冊點擊事件
    var imgObjs = document.getElementsByTagName("img");
    //循環遍歷數組，獲取每一個圖片標籤，註冊點擊事件，添加事件處理函數
    for(var i = 0; i < imgObjs.length; i++){
        imgObjs[i].onclick = function (){
            alert("被點擊了");
        }
    }
    </script>
</body>
</html>

點擊按鈕修改按鈕的屬性

<!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>Document</title>
</head>
<body>
    <input type="button" value="按鈕" id="btn">
    <script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        //修改按鈕的value
        this.value = "我是按鈕，哈哈哈";
        this.type = "text";
        this.id = "nnn";
    }
    </script>
</body>
</html>

點擊改變圖片自身的寬和高

<!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>
    
    </style>
</head>
<body>
    <img src="迪麗熱巴.jpg" alt=""id="img1">
    
    <script>
    //若是style中定義了寬高沒法改變、、、能改變了在告訴你
     var imgObj = document.getElementById("img1");
     imgObj.onclick = function(){
         this.width ="200";
     }
    </script>
</body>
</html>

16按鈕中點擊自身值改變

<!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>Document</title>
</head>
<body>
    <input type="button"value="咱們都沒變">
    <input type="button"value="咱們都沒變">
    <input type="button"value="咱們都沒變">
    <input type="button"value="咱們都沒變">
    <input type="button"value="咱們都沒變">
    <script>
    var inputs = document.getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++){
        //爲每一個按鈕添加點擊事件
        inputs[i].onclick = function(){
            //先將全部的賦值爲一樣
           for(var j = 0; j<inputs.length; j++){
               inputs[j].value= "咱們都沒變"
           }
           //單獨賦值當前變了
           this.value="變了"
        }
    }
    </script>
</body>
</html>

onmouseover 屬性在鼠標指針移動到元素上時觸發
onmouseout 屬性在鼠標指針移出元素上時觸發數組

鼠標移入變色移出正常

<ul id="ul">
        <li>娃哈哈</li>
        <li>農夫山泉</li>
        <li>雪碧</li>
        <li>可樂</li>
        <li>江小白</li>
    </ul>
    <script src="common.js"></script>
    <script>
    //鼠標移入移出事件
    //獲取全部標籤
    var list = my$("ul").getElementsByTagName("li");
    for(var i = 0 ; i < list.length; i++){
        //鼠標移入事件onmouseover
        list[i].onmouseover =function(){
            this.style.backgroundColor = "red";
        }
        //鼠標移出事件onmouseout
        list[i].onmouseout = function(){
            this.style.backgroundColor = "";
        }
        
    }

    </script>

隔行變色

<input type="button" value="隔行變色" id="btn">
    <ul id="ul">
        <li>奧迪</li>
        <li>五菱宏光</li>
        <li>奔馳</li>
        <li>馬自達</li>
        <li>本田</li>
        <li>瑪莎拉蒂</li>
        <li>悍馬</li>
        <li>雪佛蘭</li>
        <li>紅旗</li>
        <li>現代</li>
    </ul>
    <script src="common.js"></script>
    <script>
     //點擊按鈕
     my$("btn").onclick = function(){
       var liObjs =  my$("ul").getElementsByTagName("li");
       for(var i = 0; i < liObjs.length; i++){
        //    if(i%2==0){
        //        //偶數
        //        liObjs[i].style.background="red";
        //    }else{
        //        //偶數
        //        liObjs[i].style.background="yellow";
        //    }
        //簡結寫法
           liObjs[i].style.backgroundColor = i%2==0 ? "red": "yellow";
       }
     }
    </script>

鼠標移入移出案例2

<div class="div1">
                <img id="img1" src="images/5_small.png" alt="">
        </div>
        
        <img id="img2" class="div2" src="images/5.png" alt="">
        <script src="common.js"></script>
        <script>  
        //鼠標移出 onmouseover
         my$("img1").onmouseover = function(){
            my$("img2").style.display = "block";
         }
         my$("img1").onmouseout = function(){
             my$("img2").style.display = "none";
         }
         
        </script>