JavaScript筆記(七)

demo7.html

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

    <style>
        table{
            border-collapse:collapse;
            width:90%;
        }
        tr{
            border-bottom-style:solid;
            border-bottom-width:1px;
            border-bottom-color:lightgray;
            height:35px;
        }
        td{
            width:25%;
            text-align:center;
        }
    </style>


</head>
<body>

<button onclick = "hide()">隱藏div</button>
<button onclick = "show()">顯示div</button>
<br>
<br>
<div id = "d">
    這是一個div
</div>
<br>
<div id = "d1" style = "background-color:pink">Hello Html DOM</div>
<button onclick = "change()">改變div的背景色</button>
<br>
<br>
<table id = "t">
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>年齡</td>
        <td>身高</td>
    </tr>
    <tr>
        <td>1</td>
        <td>張三</td>
        <td>22</td>
        <td>177</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>33</td>
        <td>188</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>24</td>
        <td>166</td>
    </tr>
    <tr>
        <td>4</td>
        <td>趙柳</td>
        <td>14</td>
        <td>145</td>
    </tr>
</table>

<br>
<br>

<div>
    <input type = "text" onfocus = "a()" onblur = "b()" id = "input1" placeholder = "輸入框1">
    <br>
    <br>
    <input type = "text" id = "input2" placeholder = "輸入框2">
    <br>
    <br>
</div>
<div id = "message"></div>
<br>
<br>
<input type = "button" onmousedown = "down()" onmouseup = "up()" value = "用於演示按下和彈起">
<br>
<br>
<input type = "button" onmousemove = "move()" value = "用於演示鼠標經過">
<br>
<br>
<input type = "button" onmouseover = "over()" value = "用於演示鼠標經過">
<br>
<br>
<input type = "button" onmouseout = "out()" value = "用於演示鼠標退出">
<br>
<br>
<div id = "message1"></div>


</body>
<!--樣式-->
<script>
    function hide() {
        var d = document.getElementById("d");
        d.style.display = "none";
    }
    function show(){
        var d = document.getElementById("d");
        d.style.display = "block";
    }
</script>

<script>
//     通過給元素的style.backgroundColor 賦值,修改樣式
//     style.backgroundColor 這裏的backgroundColor和css中的背景色background-color 是有所不同的
//     換句話說,通過DOM的style去修改樣式,需要重新記憶另一套樣式名稱,這是很累贅的事情。
//     最好能夠通過CSS的屬性名,直接就進行修改了。比如通過這樣的方式:
//     d1.css("background-color","green");
//     這樣就僅僅需要使用CSS原本的屬性名即可了。
//     Javascript並不提供這樣的解決方案,但是到了JQuery就提供了這樣的解決方案
    function change(){
        var d1 = document.getElementById("d1");
        d1.style.backgroundColor = "green";
    }
</script>

<script>
    //使用JavaScript來實現表格斑馬線
    var trs = document.getElementsByTagName("tr");
    for(i = 0;i < trs.length;i++){
        if(1 == i % 2)
            trs[i].style.backgroundColor = "#f8f8f8";
    }
</script>

<!--DOM的事件-->
<script>
    //焦點事件
    // 當組件獲取焦點的時候,會觸發onfocus事件
    // 當組件失去焦點的時候,會觸發onblur事件
    function a(){
        document.getElementById("message").innerHTML = "輸入框1獲取了焦點";
    }
    function b(){
        document.getElementById("message").innerHTML = "輸入框1失去了焦點";
    }
</script>
<script>
    //鼠標事件
    // 鼠標事件,由鼠標按下,鼠標彈起,鼠標經過,鼠標進入,鼠標退出幾個事件組成
    // 當在組件上鼠標按下的時候,會觸發onmousedown事件
    // 當在組件上鼠標彈起的時候,會觸發onmouseup事件
    // 當在組件上鼠標經過的時候,會觸發onmousemove事件
    // 當在組件上鼠標進入的時候,會觸發onmouseover事件
    // 當在組件上鼠標退出的時候,會觸發onmouseout事件
    // 當鼠標進入一個組件的時候,onmousemove和onmouseover都會被觸發,
    // 區別在於無論鼠標在組件上如何移動,onmouseover只會觸發一次,onmousemove每次移動都會觸發
    var number = 0;
    function down(){
        document.getElementById("message1").innerHTML = "按下了鼠標";
    }
    function up(){
        document.getElementById("message1").innerHTML = "彈起了鼠標";
    }
    function move(){
        document.getElementById("message1").innerHTML = "鼠標經過次數:" + (++number);
    }
    function over(){
        document.getElementById("message1").innerHTML = "鼠標進入次數:" + (++number);
    }
    function out(){
        document.getElementById("message1").innerHTML = "鼠標退出";
        number = 0;
    }
</script>



</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章