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. Canal学习笔记（客户端）

    前言 最近公司用到Canal来做从MySQL到Tidb的数据同步,用到HA模式Canal,记录一下HA模式的工作原理. Canal的架构模式 Canal是利用binlog日志来做数据同步,canal伪 ...

  2. 吴恩达机器学习笔记16-决策边界(decision boundary)

    现在讲下决策边界(decision boundary)的概念.这个概念能更好地帮助我们理解逻辑回归的假设函数在计算什么. 在逻辑回归中,我们预测:当ℎ

  3. Kali学习笔记8：四层发现

    1.基于TCP协议 优点: 1.可路由且结果可靠 2.不太可能会被防火墙过滤 3.甚至可以发现端口 缺点: 速度较慢(三次握手) 利用Scapy发送ACK数据包: 配置数据包: 发送数据包: 看一下收 ...

  4. 来啊踩fastjson打印入参导致业务跑偏的坑

    线上代码对日志的记录,重要性自不必说.但是怎样记录日志也是有讲究的! 日志可以直接在每个方法中进行日志记录,优点是想怎么记就怎么记,缺点是记日志的代码可能会超过你的业务代码,可读性急剧下降,这也是日志 ...

  5. 如何编写JQuery 插件详解

    转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq ...

  6. linux查看系统32位还是64位

    1. 从系统查看 1.1 uname -a 命令 [root@qs-dmm-rh2 ~]# uname -a Linux qs-dmm-rh2 2.6.18-194.el5 #1 SMP Tue Ma ...

  7. pyengine介绍及使用

    一个可以通过HTTP请求动态执行Python 代码的HTTP服务器,还自带一个装饰器来执行时间较长的任务. 使用方法 1  pip install pyengine 2 pyengine run -d ...

  8. react-create-app 构建react项目的流程以及需要注意的地方

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 React 系列文章代码地址 一 目录 不折腾的前端,和咸鱼有什么区别 ...

  9. Zookeeper-watcher机制源码分析（二）

    服务端接收请求处理流程 服务端有一个NettyServerCnxn类,用来处理客户端发送过来的请求 NettyServerCnxn public void receiveMessage(Channel ...

  10. js对象按某个字段排序

    var arr = [ {name:'zopp',age:0}, {name:'gpp',age:18}, {name:'yjj',age:8} ]; function compare(propert ...