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. 程序员offer沟通的4个基本原则

     常柱 架构未来  你需要就一份新工作进行沟通时:比如你的薪水.福利,或者我个人最喜欢的每周工作时间缩短等,当公司问你“你想要多少?”或者“这是我们的报价,你说呢?” 最后关于薪资的谈话可能是最伤脑筋 ...

  2. d3.js 共享交换平台demo

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

  3. 松软科技Web课堂:JavaScript 正则表达式

    正则表达式是构成搜索模式的字符序列. 该搜索模式可用于文本搜索和文本替换操作. 什么是正则表达式? 正则表达式是构成搜索模式(search pattern)的字符序列. 当您搜索文本中的数据时,您可使 ...

  4. SAP QM 检验批里样品数量的确定

    SAP QM 检验批里样品数量的确定 如下的检验批890000045939, 样品数量是50 PC. 检查该检验批对应的检验计划, 这些检验特性都有自己的取样策略,相关的取样数量,体现在结果录入界面, ...

  5. 深入理解 Java 枚举

  6. Spring Boot 2.X 国际化

    国际化文件的编写 messages.properties init project 7月前 messages_en_US.properties init project 7月前 messages_zh ...

  7. python3实现栈的逻辑

    python的队列中本身有很多方法 大家可以看下我的这篇博客,对python的队列的常用方法有简单的介绍 https://www.cnblogs.com/bainianminguo/p/7420685 ...

  8. rsync高级同步工具

    1.什么是rsync rsync 是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份的优秀工具,rsync软件使用于 unix/linux/windows等多种操作系统平台. 2 ...

  9. Ligg.EasyWinApp-100-Ligg.EasyWinForm：一款Winform应用编程框架和UI库介绍

        本项目是一个Winform应用编程框架和UI库.通过这个该框架,不需任何代码,通过XML配置文件,搭建任意复杂的Windows应用界面,以类似Execel公式的方式实现基本的过程控制(赋值.条 ...

  10. vue中计算属性的get与set方法

    计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...