JavaScript之事件实战

最新推荐文章于 2023-09-20 09:20:10 发布

阿丩正传

最新推荐文章于 2023-09-20 09:20:10 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/YYBDESHIJIE/article/details/106265790

版权

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>

阿丩正传

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之事件实战

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(
复制链接

扫一扫