当前位置： 移动技术网 > IT编程>开发语言>Jquery > 需要知道的jQuery对象和DOM对象之间的转换

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

2019年11月25日  | 移动技术网IT编程  | 我要评论

jquery对象和dom对象之间的转换

jquery对象就是通过jquery包装dom对象后产生的对象。

jquery对象和dom对象不能互相调用对方的方法或属性，但它们之间可以进行转换。

两者都无法使用对方的任何方法 非要使用也可以（会报错）

将dom对象转换为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对象中的元素

第二种通过.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>

转换成功正常输出

 

 

 

 如有错误请指正:d

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网