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. 一种分片更新ubi卷的方式(基于ubiupdatevol，拓展fifo支持）

    ubi卷的更新方式 对于ubi卷,不能像普通块设备一样进行随机读写.每次更新需要从头写入. 具体的,需要在打开对应的设备之后,先执行一个ioctl UBI_IOCVOLUP,同时传入要更新的数据大小. ...

  2. Python爬虫实战：批量下载网站图片

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: GitPython PS:如有需要Python学习资料的小伙伴可以 ...

  3. 医院信息集成平台（ESB）数据集成建设方案

    一.数据资产目录建设 依据卫生部信息化工作领导小组办公室卫生部统计信息中心2011年3月发布的<基于电子病历的医院信息平台建设技术解决方案——业务部分>. 临床服务域 包含12个二级类目: ...

  4. cesium 实现风场图效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  5. 【转】CAP 定理的含义

    原文链接:CAP 定理的含义 作者: 阮一峰 日期: 2018年7月16日 分布式系统(distributed system)正变得越来越重要,大型网站几乎都是分布式的. 分布式系统的最大难点,就是各 ...

  6. Zuul Swagger 整合

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...

  7. ES6 学习之 let

    关于闭包: <html> <body> <div> <div> <button >aaa</button> <button ...

  8. DUBBO: xml文件无法解析

    xml是: <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http:/ ...

  9. vue/cli新旧版本安装方式

    一.老版本安装  Shift+鼠标右键 选择打开命令窗口 1.创建项目之前,需先确保本机已经安装node 在命令窗口中执行node -v npm -v 2.一般情况下用npm安装东西比较慢,可以使用淘 ...

  10. Go学习笔记(持续更中，参考go编程基础，go边看边练)

    使用关键字 var 定义变量,自动初始化为零值.如果提供初始化值,可省略变量类型. 在函数内部,可用更简略的 := 方式定义变量.空白符号_ package main import "fmt ...