jquery对象和dom对象转换-jQuery对象与DOM对象的相互转换

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在使用js的过程中，你会发现在某些方面，原生js代码相对于jQuery有其特定的优势jquery对象和dom对象转换，并且会变得更加简洁，所以掌握两类对象的相互转化非常重要。

    
    
    
    
    
    
        $(document).ready(
            function () {
                // 给第一个按钮绑定事件
                var btn01 = document.getElementById("dom2dom");
                btn01.onclick = function () {
                    var divEleDom = document.getElementById("testDiv");
                    // 将divEleDom的style.color赋值为red
                    divEleDom.style.color = "red";
                }
                // 给第二个按钮绑定事件  将DOM对象转换为jQuery对象
                // 获取DOM对象
                var btn02Dom = document.getElementById("dom2jQuery");
                // 转换为jQuery对象
                var btn02JQuery = $(btn02Dom);
                // 为jQuery对象绑定事件
                btn02JQuery.click(function () {
                    // 使用jQuery对象.css("AttributeName", "NewAttribute");方法来操作jQuery对象的css属性
                    $("#testDiv").css("color", "red");
                });
                // 给第三个按钮绑定事件，使用jQuery对象操作jQuery方法
                $("#jQuery2jQuery").click(function () {
                    $("#testDiv").css("height", "300px");
                });
                // 给第四个按钮绑定事件，使用jQuery对象操作DOM方法
                // 获取jQuery对象
                var btn4EleJQuery = $("#jQuery2dom");
                // 转化为DOM对象
                var btn04Dom = btn4EleJQuery[0];
                // alert(btn04Dom);
                // 绑定事件
                btn04Dom.onclick = function () {
                    var divEleDom = document.getElementById("testDiv");
                    // alert(divEleDom);
                    // 将divEleDom的style.color赋值为red
                    divEleDom.style.color = "red";
                }
            }
        );
    


    
mTender
    使用DOM对象调用DOM方法
    使用DOM对象调用jQuery方法
    使用jQuery对象调用jQuery方法
    使用jQuery对象调用DOM方法

首先是将DOM对象转换为jQuery对象，可以直接使用jQuery的核心函数进行转换：

// 获取DOM对象
var domEle = document.getElementById("eleId");
// 使用核心函数将DOM对象转换为jQuery对象
var jQueryEle = $(domEle);

之后jquery对象和dom对象转换，jQuery 对象被转换为 DOM 对象。 jQuery对象创建后，就是一个DOM对象字段，所以只需要补全字段值即可：

// 获取jQuery对象
var jQueryEle = &("#eleId");
// 获取DOM对象
var domEle = jQueryEle[0];