jQuery开关灯

知识点

  1. dom对象 和 jQuery对象 相互转换
  2. dom对象 调用 dom方法
    jQuery对象 调用 jQuery方法

代码部分

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/07/31/ 22:29-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            display: block;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <button>开灯</button>
    <button>关灯</button>
    <img src="images/coder.jpg" />

    <script src="jquery-1.12.4.js"></script>
    <script>
        // 方式1
        // $(function () {
        //     // 给按钮们, 添加事件, 设置 body 的 背景色
        //     // 1.获取到 按钮们
        //     var btns = $('button');
        //     var myBody = $('body');
        //
        //     // console.log(btns);
        //
        //     // 2.给 开灯按钮 设置点击事件
        //     btns[0].onclick = function () {
        //         myBody.css('backgroundColor', 'white');
        //     };
        //
               // 给 关灯按钮, 设置点击事件
        //     btns[1].onclick = function () {
        //         myBody.css('backgroundColor', 'gray');
        //     };
        // });

        // // 方式2
        // $(function () {
        //     // 1.获取按钮们
        //     var $btns = $('button');
        //
        //     // 2.给 开灯按钮 设置点击事件
        //     $btns[0].onclick = function () {
        //         $('body').css('backgroundColor', 'white');
        //     }
        //
        //     // 3.给 关灯按钮, 设置点击事件
        //     $btns[1].onclick = function () {
        //         // 知识点复习: 从 $('body')伪数组, 获取 dom对象, 然后调用 dom对象 支持的方法
        //         $('body')[0].style.backgroundColor  = 'gray';
        //     }
        // });

        // 方式3
        $(function () {
            // 1.获取按钮们, 这里使用了普通的 dom对象 调用 dom方法
            var btns = document.getElementsByTagName('button');

            /**
             * 2. 给 关灯按钮  设置 点击事件
             * btns[1]: 获取 dom对象
             * onlick: dom对象的 方法
             */
            btns[1].onclick = function () {
              $('body').css('backgroundColor', 'black')
            };

            /**
             * 3. 给开灯按钮, 设置一个 点击事件
             * $(btns[0]): 将 btns[0]这个dom对象,作为$()的参数, 将 dom对象 转化为 jQuery对象
             * click: jQuery对象的 方法; 而不是 dom对象的 onclick方法
             * $('body')[0]: 从 $('body')伪数组 中, 获取 $('body')[0]这个dom对象, 然后调用dom 对象的 style.backgroundColor
             */
            $(btns[0]).click(function () {
                $('body')[0].style.backgroundColor = 'white';
            });
        });

    </script>
</body>
</html>

posted on 2022-07-31 23:13  beyondx  阅读(173)  评论(0)  编辑  收藏  举报

导航