WebAPI编程第二天案例：DOM

最新推荐文章于 2022-12-04 15:29:58 发布

库库好困

最新推荐文章于 2022-12-04 15:29:58 发布

阅读量155

点赞数

分类专栏：三：WebAPI编程（看视频）文章标签： javascript

本文链接：https://blog.csdn.net/m0_46597922/article/details/105934730

版权

本文详细介绍了使用JavaScript进行DOM操作的多个实战案例，包括百度换肤、表格隔行变色、表单全选取消全选、tab栏切换、下拉菜单、简单留言发布及删除、动态生成表格等，涵盖了事件处理、元素选择与操作、样式修改等多个核心知识点。

摘要由CSDN通过智能技术生成

案例1：百度换肤

案例分析：
① 这个案例练习的是给一组元素注册事件
② 给4个小图片利用循环注册点击事件
③ 当我们点击了这个图片，让我们页面背景改为当前的图片
④ 核心算法：把当前图片的src 路径取过来，给 body 做为背景即可

    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        
        body {
    
            background: url(images/1.jpg) no-repeat center top;
        }
        
        li {
    
            list-style: none;
        }
        
        .baidu {
    
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .baidu li {
    
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
    
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
    
            imgs[i].onclick = function() {
    
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

案例2：表格隔行变色

在这里插入图片描述
案例分析
① 用到新的鼠标事件鼠标经过 onmouseover 鼠标离开 onmouseout
② 核心思路：鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
③ 注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是 tbody 里面的行

    <style>
        table {
    
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
    
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
    
            height: 30px;
        }
        
        tbody td {
    
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
    
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++

最低0.47元/天解锁文章

库库好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPI编程第二天案例：DOM

案例1：百度换肤案例分析：① 这个案例练习的是给一组元素注册事件② 给4个小图片利用循环注册点击事件③ 当我们点击了这个图片，让我们页面背景改为当前的图片④ 核心算法：把当前图片的src 路径取过来，给 body 做为背景即可 <style> * { margin: 0; padding: 0; ...
复制链接

扫一扫

专栏目录