JavaScript之事件实战

系统管理员 2021-05-03 05:48 462阅读 0赞

## 1、通过document定位或者选取文档中的元素方式： ##

1、**`document.getElementById("id");`**//根据ID选取一个元素，返回一个对象  
2、**`var trs=document.getElementsByTagName("tr");`**//根据标签选择读个元素，返回多个 类似于数组对象  
3、`var trs=document.getElementsByClassName("row");`根据class的名称，返回类数组对象  
4、`var trs=document.querySelectorAll("tbody tr");按照CSS选择器的模式。返回多个元素，类数组对象`

var trs=document.querySelector("css选择器");只返回一个或者第一个

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件</title>
        <style type="text/css">
           table{ 
               border: 1px solid springgreen;
               width: 500px;
               border-collapse: collapse;
           }
           table th,td{ 
            border: 1px solid springgreen;
            text-align: center;
           }
        </style>
        <script type="text/javascript">
           //事件？事件是JavaScript和HTML交互式触发的一个动作
           //鼠标移动的时候，表格的行颜色改变这样一个效果
           window.onload=function(){ 
               //通过标签名称获得元素
               //var trs=document.getElementsByTagName("tr");//返回多个 类似于数组对象
               //var trs=document.getElementsByClassName("row");
               //var trs=document.querySelectorAll(".row");//css选择器
               //document.getElementById("id");//根据ID选取一个元素，返回一个对象
               var trs=document.querySelectorAll("tbody tr");
               for(let i=0;i<trs.length;i++){ 
                 trs[i].onmouseover=function(e){ 
                    this.style.backgroundColor="violet";
                  }
                  trs[i].onmouseout=function(e){ 
                    this.style.backgroundColor="white";
                  }
               }
    
               //实现一个全选功能
               //第一个参数是事件名称，第二个是事件函数，第三个是触发阶段（冒泡还是捕获）
               document.getElementById("all").addEventListener("click",function(){ 
                  var cks=document.querySelectorAll("input[name='ck']");
                  for(let i=0;i<cks.length;i++){ 
                      cks[i].checked=this.checked;
                  }
               },false);
           };
        </script>
    </head>
    <body>
        <table id="tbl">
            <thead>
                <tr>
                    <th>
                        全选
                        <input type="checkbox" name="all" id="all" />
                    </th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>邮箱</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbaody>
                <tr class="row">
                    <td>
                        <input type="checkbox" name="ck"/ >
                    </td>
                    <td>002</td>
                    <td>李四</td>
                    <td>25</td>
                    <td>521@qq.com</td>
                    <td>定西</td>
                </tr>
                <tr class="row">
                    <td>
                        <input type="checkbox" name="ck"/ >
                    </td>
                    <td>003</td>
                    <td>王五</td>
                    <td>26</td>
                    <td>522@qq.com</td>
                    <td>临洮</td>
                </tr>
                <tr class="row">
                    <td>
                        <input type="checkbox" name="ck"/ >
                    </td>
                    <td>003</td>
                    <td>张三</td>
                    <td>27</td>
                    <td>523@qq.com</td>
                    <td>玉井</td>
                </tr>
            </tbaody>
        </table>
    </body>
    </html>