jQuery对象和DOM对象互转问题(案例之网页的开关灯)_关于jquery对象与dom对象相互转化,转换之后会影响浏览器之间的兼容性-CSDN博客

本文链接：https://blog.csdn.net/dwjdj/article/details/105325131

    * jQuery对象和DOM对象的互转:
    * DOM操作太麻烦(实现兼容代码太多),转jQuery对象操作简单，不需要写兼容代码
    * jQuery操作中,有一些兼容没有封装在jQuery中,转DOM对象。通过原生js代码实现该功能;如果后面jQuery代码解决了兼容性问题，还可以在转回来
    * 如果对象是通过DOM方式获取的，那么就是DOM对象
    * 如果对象是通过jQuery方式获取的，那么就是jQuery对象
    * 如何把DOM对象转jQuery对象:
    * $(DOM对象)--->jQuery对象
    * 如何把jQuery对象转DOM对象:
    * jQuery对象[0]--->DOM对象；或者是$().get(0)也可以

DOM版本的网页开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            background-color: blue;
        }
    </style>
</head>
<body>
<input type="button" value="关灯" id="btn"/>
<script>
    document.getElementById("btn").onclick=function () {
        var body=document.body;
        if(body.className=="cls"){
            body.className="";
            this.value="关灯";
        }else{
            body.className="cls";
            this.value="开灯";
        }
    };
</script>
</body>
</html>

jQuery版本的网页开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            background-color: blue;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
</head>
<body>
<script>
    /*
    * DOM中
    * 表单标签DOM操作中设置和获取value属性的值---->对象.value
    * jQuery中:
    * jQuery对象.val();-------表示的是获取该元素的value属性值
    * jQuery对象.val("值");----表示的是设置该元素的value属性值
    * jQuery对象.css("css的属性名字","属性的值");---->设置元素的样式属性值
    * 注意:
    * .css("属性","值");属性的写法可以是DOM操作中的js写法,也可以是css中的写法
    * */
</script>
<input type="button" value="关灯" id="btn"/>
<script>
    $("#btn").click(function () {
        //判断body标签是否应用了cls类样式
        if ($("body").hasClass("cls")){
            $("body").removeClass("cls");
            $("#btn").val("关灯");
        }else{
            $("body").addClass("cls");
            $("#btn").val("开灯");
        }
    });
</script>
<script>
    // $("#btn").click(function () {
    //     //this是DOM对象，需要转化为jQuery对象
    //     if($(this).val()=="关灯"){
    //         $("body").css("backgroundColor","black");
    //         $(this).val("开灯");
    //     }else{
    //         $("body").css("backgroundColor","");
    //         $(this).val("关灯");
    //     }
    // });
</script>
</body>
</html>