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. d3.js 共享交换平台demo

    今天在群里遇到一张图  遂来玩一玩,先来上图!! 点击相应按钮,开关线路,此项目的重点是计算相应图形的位置,由于是个性化项目就没有封装布局.好了直接上代码. <!DOCTYPE html> ...

  2. 在命令提示符下，运行Java程序时，提示"找不到或无法加载主类"

    小白:在命令提示符下,运行Java程序时,提示"找不到或无法加载主类". 大神:运行Java程序的作用是让Java解释器装载,检验并运行字节码文件(.class).因此,在运行Ja ...

  3. Python操作MySQL的一些坑

    pip安装库时遇到的问题   我使用ubuntu系统通过pip安装MySQLdb库的时候,报了一堆错,解决了半天,没搞定.然后安装另一个库pymysql一下就OK了,它们的功能都是一样的.这个问题我没 ...

  4. Neo4j安装过程详解

    在安装neo4j之前,需要安装Java JRE,并配置Java开发环境,然后安装neo4j服务. 一.CentOS下安装 1.下载Neo4j 去官网下载最新的neo4j,选择社区版.地址:https: ...

  5. React 组件的生命周期方法

    React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...

  6. 设计模式（含UML、设计原则、各种模式讲解链接）

    一.统一建模语言UML UML是一种开放的方法,用于说明.可视化.构建和编写一个正在开发的.面向对象的.软件密集系统的制品的开放方法 UML展现了一系列最佳工程实践,这些最佳实践在对大规模,复杂系统进 ...

  7. Consul-template+nginx实现自动负载均衡

    前言 consul-template 是 Consul 的一个守护程序,使用 consul-template 可以方便快速的实现对 Consul Key/Value 存储系统的访问,可以从 KV 系统 ...

  8. Selenium(九)：Xpath选择器

    1. Xpath选择器 1.1 Xpath语法简介 前面我们学习了CSS选择元素. 大家可以发现非常灵活.强大. 还有一种灵活.强大的选择元素的方式,就是使用Xpath表达式. XPath (XML ...

  9. alpine制作jdk、jre镜像、自定义镜像上传阿里云

    alpine制作jdk镜像 alpine Linux简介 1.Alpine Linux是一个轻型Linux发行版,它不同于通常的Linux发行版,Alpine采用了musl libc 和 BusyBo ...

  10. angular cli 使用echarts

    1.安装库 npm install typings echarts --global npm install ngx-echarts --save npm install @types/echarts ...