先执行一下代码

 $(function () {

     var div=$("<div></div>");
console.log(div); });

(注意,div的初始化,这个等价于js里面的

    var div=document.createElement("div");

)

看结果:

从结果可以看出:

    ①:输出的是jQuery对象

    ②:0:div   集合的0位置是div

从第②点也就引出了两者的转换。

在看代码:

 $(function () {

     var div=$("<div></div>");
console.log(div[0]); });

输出结果是

这就使得jQuery对象转换成了DOM标签了

如果在转换回去,可写:

 $(function () {

     var div=$("<div></div>");
console.log($(div[0])); });

效果图:

总结:

  jQuery转换成DOM:加下标,如div[0]

  DOM转换成jQuery:用$()包围

用处:

  事件(如点击事件)的行使对象应该是对象,不应该是标签,

        换句话说应该是jQuery不应该是DOM,

        在换言之,应该是{div}不应该是<div></div>

最后再说一下this,jQuery的this写法是$(this)他指的是对象

    而DOM  this指的是标签,所以有的时候(如Card那篇博客中,应为this._htmlNode添加事件,this添加事件会报错)。

jQuery与DOM相互转换的更多相关文章

  1. jquery和dom之间的转换

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

  2. jQuery和DOM对象之间的转换

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

  3. [jQuery]jQuery和DOM对象互换(四)

    DOM 和 jQuery 相互转换 DOM 转jQuery $(DOM对象) # (1)直接获取 $('video'); # (2)转换 $(DOM对象) var myVideo = document ...

  4. 抛弃jQuery:DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  5. 抛弃jQuery:DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  6. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  7. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  8. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  9. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

随机推荐

  1. redis基本数据类型及方法

    redis支持的数据类型 String redis最基本的类型,可以是任意类型的字符串,也可以是数字 SET 赋值,用法: SET key value GET 取值,用法: GET key INCR  ...

  2. 摩托罗拉SE4500 三星 S3C6410 Wince6.0平台软解码调试记录以及驱动相关问题解释

    虽然S3C6410出来很多年了,甚至于已经停产了,出货的几乎都有依赖于库存,SE4500也出来很多年了,但是网上依旧不会有调试资料帮助你,一切源于自私.希望本文能帮到你,不必感谢.本文来自C.S.D. ...

  3. iOS各版本特性

    iOS1 最大特性是具有其他手机无法比拟的触屏功能,使捏拉缩放和慢性滚动变得近乎完美.从而使应用的体验变得更加自然而即时. 缺点:1.不支持复制/粘贴文本. 2.无法在发邮件时添加附件.        ...

  4. PHP clone

    PHP  clone     定义一个电视类 class Tv{public $width=100;public function setWidth($v){$this->width = $v; ...

  5. Dede CMS 5.5 升级到 5.7 SP1

    Dede CMS 5.5 的漏洞实在是太多了,三天两头被Hacker们挂马.话说挂这些破网址真的能带来丰厚的回报吗?做人要厚道啊.   闲话少说,我按照网上的升级到5.5升级到5.7不出错的方法,升级 ...

  6. 安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案

    安装64位版Oracle11gR2后发现启动SQL Developer时弹出配置java.exe的路径,找到Oracle自带java.exe后产生的路径“C:\app\用户名\product\11.2 ...

  7. [CVE:2013-4810]Apache Tomcat/JBoss远程命令执行

    <?php $host=gethostbyname($argv[1]); $port=$argv[2]; $cmd=$argv[3]; //small jsp shell //change th ...

  8. iOS : 静态库(.framework)合并

    如果写了一个Framework,根据Build时选择的机器类型,会分为模拟器Framework和真机Framework,两者是不能混用的. 此时可以通过配置一个Run Script,在Script中使 ...

  9. 委托、匿名方法、Lambda表达式的演进

    摘自:"http://www.cnblogs.com/eagle1986/archive/2012/01/19/2327358.html 假设给我们一个泛型对象List<T>,T ...

  10. hdu 1568 Fibonacci 快速幂

    Fibonacci Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Proble ...