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

需要知道的jQuery对象和DOM对象之间的转换的更多相关文章

  1. 判断一个对象是jQuery对象还是DOM对象

    今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...

  2. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  3. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

  4. JQuery对象与DOM对象的区别与转换

      1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...

  5. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  6. jQuery对象与DOM对象之间的转换方法

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

  7. jQuery jQuery对象与dom对象的转换

    jQuery对象本质上是一个构造函数,主要作用是返回jQuery对象的实例. jQuery选择器返回的是一个类似数组的对象,用下标运算取出的对象如$('body')[0],是dom对象,对此jquer ...

  8. jQuery对象与dom对象的转换

    一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...

  9. jquery对象和dom对象的相互转换

    更好的学习jquery,要区分好jquery对象和dom对象的区别. 先具体说说dom.举个例子 <html> <head></head> <body> ...

随机推荐

  1. Linux服务器部署.Net Core笔记：三、CentOS 7上安装.NetCore运行环境

    1.要开始安装 .NET,您需要注册 Microsoft 签名密钥并添加 Microsoft 产品提要.每台机器只需要做一次. 打开命令提示符并运行以下命令:sudo rpm -Uvh https:/ ...

  2. puppet5.1 安装与配置

    一.Puppet概念 简介 当服务器数量达到一定的规模时,仅依靠人为完成批量部署服务器个资源的配置,运维工作将变得繁琐且容易出错,为了解决这一问题,我们应该怎么办呢?我们可以引入一批工具,这批工具可编 ...

  3. Glide只播放一次Gif以及监听播放完成的实现方案

    需求: 近段时间正好有一个需求,是要实现Gif图只加载播放一次,并且要在Gif播放完毕后回调给系统的需求. 因为Glide 3系列的API与4系列还是有很大差距的,这里我们针对Glide 3.x和Gl ...

  4. How we implemented consistent hashing efficiently

    原文链接https://medium.com/ably-realtime/how-to-implement-consistent-hashing-efficiently-fe038d59fff2 我们 ...

  5. 如何实现一台服务器同时运行两个php版本

    有需要学习交流的友人请加入交流群的咱们一起,有问题一起交流,一起进步!前提是你是学技术的.感谢阅读! 点此加入该群​jq.qq.com 假设您已经安装了Apache,为这两个项目创建了虚拟主机,并添加 ...

  6. 最后的记忆——Spring ApplicationContext

    本文尝试分析一下Spring 的 ApplicationContext体系的 接口设计,尝试理解为什么这么做,为什么接口这么设计.为什么这么去实现,为什么需要有这个方法,为什么 这样命名?接口.类.方 ...

  7. 分布式图数据库 Nebula RC2 发布：增强了 CSV Importer 功能

    Nebula Graph 是开源的分布式图数据库,可应用于知识图谱.社交推荐.风控.IoT 等场景. 本次 RC2 主要新增 GO FROM ... REVERSELY 和 GROUP BY 等语句, ...

  8. 从头学pytorch(一):数据操作

    跟着Dive-into-DL-PyTorch.pdf从头开始学pytorch,夯实基础． Tensor创建 创建未初始化的tensor import torch x = torch.empty(5,3 ...

  9. flex招式心法

    flex布局绝对是我们平常在布局中用的最多的一个属性,我们来看看它在can i use中的浏览器支持度:(截止到2019/11/16) 挖藕,凹森!支持度居然这么好,好到连ie也能支持大部分的flex ...

  10. 【转载】C#中decimal保留2位有效小数

    在C#的数字运算过程中,有时候针对十进制decimal类型的计算需要保留2位有效小数,针对decimal变量保留2位有效小数有多种方法,可以使用Math.Round方法以及ToString先转换为字符 ...