须要知道的jQuery对象和DOM对象之间的转换

时间 2019-11-25

标签须要知道 jquery 对象 dom 之间转换栏目 JQuery 繁體版

原文原文链接

jQuery对象和DOM对象之间的转换

jQuery对象就是经过jQuery包装DOM对象后产生的对象。javascript

jQuery对象和DOM对象不能互相调用对方的方法或属性，但它们之间能够进行转换。html

二者都没法使用对方的任何方法非要使用也能够（会报错）java

将DOM对象转换为jQuery对象的装换方式：

例如：jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

        $(function(){
            var divDom = document.getElementById("myDiv");//这是一个DOM对象
            var divjQ = $(divDom);//转换为jQuery对象只需套上$()
            console.log(divjQ.html());//在控制台输出转为jQuery对象的DOM对象
        })
        </script>
    </head>
    <body>
        <div id="myDiv">
            这是一句话。
        </div>
    </body>
</html>

成为jQuery对象必需要使用jQuery方法.html()而不是.innerHTML，否则会报错数组

将jQuery对象转换为DOM对象的装换方式有2种：

第一种获取数组中的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

        $(function(){
            //jQuery对象其实是一个数组,这里数组中只包含一个元素
            var divJquery = $("#myDiv");//直接获取到jQuery对象,
            
            var divDom = divJquery[0]//取出后变为DOM对象
            console.log(divDom.innerHTML);//用DOM的方法能够在控制台成功输出,证实已经转换
        })
        </script>
    </head>
    <body>
        <div id="myDiv">
            这是一句话。
        </div>
    </body>
</html>

jQuery对象其实是一个数组,这里数组中只包含一个元素,因此使用[0]取出jQuery对象中的元素spa

第二种经过.get()方法获得相应DOM对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

        $(function(){
            //jQuery对象其实是一个数组,这里数组中只包含一个元素
            var divJquery = $("#myDiv");//和上面同样 获取到jQuery对象
            var divDom = divJquery.get(0);//jQuery自己提供的get()方法,获得相应DOM对象
            console.log(divDom.innerHTML);//DOM方法在控制台输出
        })
        </script>
    </head>
    <body>
        <div id="myDiv">
            这是一句话。
        </div>
    </body>
</html>

转换成功正常输出code