JavaScript—DOM事件相关案例练习（换肤、隔行变色、全选全不选）

最新推荐文章于 2024-07-30 10:56:44 发布

枕頭說他不想醒

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量174

点赞数 4

分类专栏： JavaScript 文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_52984349/article/details/126503707

版权

JavaScript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

一、点击换肤效果

案例分析：

1、这个案例是给一组元素注册事件

2、给4个小图片利用循环注册点击事件

3、当我们点击了这个图片，让我们页面背景改为当前的图片

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换肤效果</title>
 
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: url(./images/1.jpg) no-repeat center top;
    }
    .baidu{
        overflow: hidden;
        margin: 100px auto;
        background-color: #fff;
        width: 415px;
        padding-top: 3px;
    }
    .baidu img{
        width: 100px;
    }
</style>
<body>
    <ul class="baidu">
        <img src="./images/1.jpg" alt="">
        <img src="./images/2.jpg" alt="">
        <img src="./images/3.jpg" alt="">
        <img src="./images/4.jpg" alt="">
    </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 就是我们图片的路径
               console.log( this.src);
            // 把这个路径this.src给body就好了
            document.body.style.backgroundImage = 'url('+ this.src +')';
            } 
            }
    </script>
</body>
</html>

结果展示：

二、隔行变色

案例分析：

1、用到新的鼠标事件，鼠标经过 onmouseover 鼠标离开 onmouseout

2、核心思路，鼠标经过li，当前变背景色，鼠标离开去掉当前的背景色

代码段：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li.hover{
				background: red;
				color: #fff;
			}
		</style>
	</head>
	<body>
		
		<ul class="nav">
			<li>我是列表1</li>
			<li>我是列表2</li>
			<li>我是列表3</li>
			<li>我是列表4</li>
		</ul>
		
		<script>
			var navs = document.querySelectorAll(".nav li");
			
			for(var i=0;i<navs.length;i++){
				navs[i].onmouseover = function(){
					this.className = "hover";
				}
				navs[i].onmouseout = function(){
					this.className="";
				}
				
			}
		</script>
		
	</body>
</html>

结果展示：

三、全选全不选

案例分析；

1. 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可

2. 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。

3.需要一个变量flag 控制全选按钮是否选中

代码展示：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>HUAWEI MateBook 14s</td>
                    <td>7099</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>HUAWEI WATCH GT 3 </td>
                    <td>1388</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>HUAWEI FreeBuds Pro 2 </td>
                    <td>1299</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>HUAWEI MatePad Pro </td>
                    <td>3399</td>
                </tr>

            </tbody>
        </table>
    </div>
</body>

</html>


   <script>
    // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
    // 获取元素
    var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
    // 注册事件
    j_cbAll.onclick = function() {
            // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
            console.log(this.checked);
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;
            }
        }
        // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function() {
            // flag 控制全选按钮是否选中
            var flag = true;
            // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
            for (var i = 0; i < j_tbs.length; i++) {
                if (!j_tbs[i].checked) {
                    flag = false;
                    break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                }
            }
            j_cbAll.checked = flag;
        }
    }
</script>

结果展示：