开关灯案例体会jQuery和DOM，还有click和onclick

鸣龙少年176

于 2022-09-05 21:12:39 发布

阅读量379

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_64512346/article/details/126713589

版权

这篇博客通过一个简单的开关灯案例展示了HTML和jQuery的交互应用。代码中利用

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

做了一个小案例用作复习练习时使用

<!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>
    <style>
        img {
            display: block;
            margin: 0 auto;
        }
    </style>

</head>

<body>
    <button>开灯</button>
    <button>关灯</button>
    <img src="images/python.列表切片.png" alt="">
</body>

</html>
<script src="jquery-3.6.1.js"></script>
<script>
    $(function () {
        //显示得有立即执行函数
        //添加按钮事件，设置body的背景
        //获取按钮，可以知道jQuery和DOM是可以串着用的
        var btns = document.getElementsByTagName('button');
        console.log(btns);
        //设置关灯事件
        btns[1].onclick = function () {
            //因为都能获取的标签的元素最后会出现的是数组的形式，我们为了获取到准确的元素，所以我们要做到霍去病索引号的，然后安排点击时间函数
            $('body').css('backgroundColor', 'black');
            //可以发现jQuery和DOM修改CSS样式的方式是不同的，我们jQuery采取的是CSS相当于键值对的方式
        }
        $(btns[0]).click(function () {
            $('body')[0].style.backgroundColor = 'white';
        //此时采用不同的将jQuery转换为DOM来修改，DOM秀海样式是才去的是style链式的
        //jQuery出来的是封的是包装集的格式如果想要转化为DOM那就一壶水族的形式来提取。
        //click和onclick 的关系
        //onclick是绑定时间当鼠标触发之后会执行是触发的事件，本身就是一个函数，点击直接触发
       //click是一个方法需要来封装一个函数才能触发，click更高级但是多了一个封装函数的步骤//具有告诉唤醒的作用
            })
    })
</script>