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. UWP 从创建到发布流程一栏

    # UWP的产品新建到发布流程一览 1,UWP开发特性 U: Universal(通用) W: Windows P: Plantform(平台) 运行在Windows10设备 比WPF更加多样化和完善 ...

  2. TP框架对数据库的操作

    1.添加数据       1.1添加一条数据 $user = new User; $user->name = 'thinkphp'; $user->email = 'thinkphp@qq ...

  3. JavaScript实现动态轮播图效果

    功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...

  4. Java之缓冲流（字节/字符缓冲流）

    概述 缓冲流,也叫高效流,是对4个基本的 FileXxx 流的增强,所以也是4个流,按照数据类型分类: 字节缓冲流: BufferedInputStream , BufferedOutputStrea ...

  5. Java连载60-类之间的六种关系

    一.类之间的关系 1.泛化关系(UML图:实线空心三角形箭头,箭头指向被继承方) 类和类.接口与接口之间的继承称为泛化关系 public class A {} class B extends A{} ...

  6. Java 包(package)的概念及实例

    包的作用 1.把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2.如同文件夹一样,包也采用了树形目录的存储方式.同一个包中的类名字是不同的,不同的包中的类的名字是可以相同的,当同时调 ...

  7. 是时候扔掉 Postman 了，试试 IntelliJ IDEA 自带的高能神器！

    前言 接口调试是每个软件开发从业者必不可少的一项技能,一个项目的的完成,可能接口测试调试的时间比真正开发写代码的时间还要多,几乎是每个开发的日常工作项.所谓工欲善其事必先利其器,在没有尝到 IDEA ...

  8. Your activation code could not be validated (error 1653219)

    很多小伙伴私聊我反应说,完全按照了你的 idea 激活教程走的,可最后还是没能激活成功,提示错误信息为: Your activation code could not be validated (er ...

  9. 关于c# winform 键盘响应右边键盘消息响应事件的上下左右方向键没有反应

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11835642.html 记录一下这个小坑,c# winform 键盘响应右边键盘的上下左右方向 ...

  10. js 淡入淡出的tab选项卡

    代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...