jquery对象和DOM对象的相互转换

在讨论jquery对象和DOM对象的相互转换之前，先约定好定义变量的风格如果获取的是jquery对象，那么在变量前面加上$,例如

var $varible = jquery对象；

如果获取的是DOM对象，则定义如下：

var varible = DOM对象；

1.jquery对象转成DOM对象：

jquery对象不能使用DOM中的方法，但如果对jquery对象所提供的方法不熟悉，或者没有jquery想封装的方法，不得不使用DOM对象，即【index】和get[index].

(1)jquery对象是一个数组对象，可以通过【index】的方法得到相应的DOM对象。

jquery的代码如下

<body>

  <p>my</p>

  <p>my</p>

<script src="jquery-2.1.4.min.js"></script>

<script>

  var $cr = $("p");  //jquery对象

  var cr = $cr[1];  //dom对象

  var ct = $cr.get(0)  //第二种转换为DOM对象的方式

  cr.innerHTML = "you"  //检测是否转换成功，可以用DOM方法 输出结果为第二个my改成了you

  ct.innerHTML = 'fuck'  //输出结果第一个my改成了fuck

</script>

</body>

　　

(2).DOM对象转换为jquery对象：

对于一个DOM对象,只需要用$()把DOM对象给包装起来，就可以获得一个jquery对象了，方式为$(DOM对象)。

jquery代码如下：

<body>

  <p>my</p>

  <p>my</p>

<script src="jquery-2.1.4.min.js"></script>

<script>

  var cr = document.getElementsByTagName("p") //DOM对象

  var $cr = $(cr);   //jquery对象

  $cr.eq(0).("fuck"); //检测是否转换成功，可以用jquery方法 输出结果为第二个my改成了fuck

  $cr.eq(1).html("you"); //输出结果为my改成you

</script>

</body>

　　

转换后，可以任意使用jquery方法。

通过以上方法，可以任意的相互转换jquery对象和DOM对象网页特效。

最后再次强调,DOM对象才能使用DOM方法，jquery对象不能使用DOM中的方法，但jquery对象提供了一套更加完善的工具用于操作DOM。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

jquery对象和DOM对象的相互转换详解的更多相关文章

  1. 【Jquery系列】详解Jquery对象和Dom对象

    问题描述 本篇文章主要讲解Jquery对象和DOM对象,主要围绕如下五个方面来介绍: Jquery对象和dom对象定义 Jquery对象与dom对象区别 Jquery对象及运用举例 dom对象及运用举 ...

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

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

  3. jQuery对象和DOM对象之间的相互转换

    DOM对象:DOM(Document Object Model,文档对象模型),每一份DOM都可以表示成为一棵树,DOM对象可以使用javascript中的方法. jQuery对象:jQuery对象就 ...

  4. Jquery 对象与 DOM对象的相互转换

    在做 web 开发时,经常会用到 jquery 和 dom 对象, 有时候需要在这两个对象间进行切换. Jquery 对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuer ...

  5. jQuery对象与Dom对象的相互转换

    1.jQuery对象转换为Dom对象 [index] var $d = $("#id"); ]; get(index) var $d = $("#id"); ) ...

  6. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

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

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

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

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

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

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

随机推荐

  1. 如何将自己的jar包发布到mavan中央仓库

    最近自己写了一个关于网关限流的插件,然后想着肯定会有很多兄弟也需要使用到,所以就想着把jar包上传到Maven的中央仓库上让大家可以更方便的使用 现在咱们来看一下这个流程是什么样的呢. 首先呢,你得去 ...

  2. prompt的工作原理

    浏览器提供了一个内置函数,可以用来获取用户输入:这个函数就是prompt.函数prompt与你使用过的函数alert很像(它也显示一个对话框,其中包含你指定的字符串),但它还提供了让用户输入响应的区域 ...

  3. springbean的生命周期

    1.Spring对Bean进行实例化(相当于程序中的new Xx())2.Spring将值和Bean的引用注入进Bean对应的属性中3.如果Bean实现了BeanNameAware接口,Spring将 ...

  4. 产品经理聊产品－－mac book pro 2018 初体验

    工作前几年,使用电脑,基本上都是微软的操作系统,自从从大厂出来之后,才逐渐熟悉使用linux,到现在基本上都是基本上一个月windows平台基本不需要开机就可以,可以说基本上被ubuntu的简洁和实用 ...

  5. Ubuntu下OpenCV版本切换

    1.假如安装了opencv以下两个版本: opencv-2.4.13 opencv-3.2.0 2.安装目录分别为: /usr/local/opencv-2.4.13 /usr/local/openc ...

  6. Python - IPython

    1- IPython简介 HomePage:http://ipython.org/ IPython(interactive Python) provides a rich architecture f ...

  7. mysql 开发基础系列2 整型数据类型

    Mysql 的数据类型 1. 对整数类型, Mysql 还支持类型名称后面的小括号内指定的显示宽度,例如int(5) 表示宽度小于5位时填满宽度,如果不显示指定宽度默认是int(11),一般配合zer ...

  8. spark最新源码下载并导入到开发环境下助推高质量代码(Scala IDEA for Eclipse和IntelliJ IDEA皆适用）（以spark2.2.0源码包为例）（图文详解）

    不多说,直接上干货! 前言   其实啊,无论你是初学者还是具备了有一定spark编程经验,都需要对spark源码足够重视起来. 本人,肺腑之己见,想要成为大数据的大牛和顶尖专家,多结合源码和操练编程. ...

  9. java设定一个日期时间，加几分钟（小时或者天）后得到新的日期

    //返回的是字符串型的时间,输入的 //是String day, int x public static String addDateMinut(String day, int x){ SimpleD ...

  10. Eureka客户端注册多网卡下IP选择问题

    在使用Spring Cloud多人协作开发时有一个场景:我本机启动了Eureka注册中心,其他人机器需要将服务注册到我本机的Eureka.(服务端和客户端在不同机器上) 这时出现了一个问题:服务成功注 ...