先执行一下代码

 $(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. Windows7下安装搭建Ngnix教程

    简介: Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 服务器. Nginx 是由 Igor Syso ...

  2. 调用REST接口获取数据

    /// <summary> /// 根据机构代码本机构下报警用户列表: /// </summary> /// <param name="org_code&quo ...

  3. 如何重置CentOS/RHEL 7中遗忘的根用户帐户密码

    你有没有遇到过这种情况:想不起来Linux系统上的用户帐户密码?要是你忘了根用户密码,情况就更为糟糕.你无法执行任何面向整个系统的变更.要是你忘了用户密码,很容易使用根帐户来重置密码. 可要是你忘了根 ...

  4. Java中使用BASE64加密&解密

    package com.bao.tools.encryption; import java.io.IOException; import org.junit.Test; import sun.misc ...

  5. 对 strcpy_s 若干测试

    今天发现如果strcpy这函数,目标buffer太小,会有意想不到的崩溃.而且不容易调试.以后尽量要用strcpy_s了. strcpy_s是strcpy的更安全的版本 1.当目标字符串参数是一个字符 ...

  6. 最大熵模型(Maximum Etropy)—— 熵,条件熵,联合熵,相对熵,互信息及其关系,最大熵模型。。

    引入1:随机变量函数的分布 给定X的概率密度函数为fX(x), 若Y = aX, a是某正实数,求Y得概率密度函数fY(y). 解:令X的累积概率为FX(x), Y的累积概率为FY(y). 则 FY( ...

  7. Create,Insert

    创建表 create table people ( id int ,name ) ) create table toys ( id int ,name ) ,people_id int ) CREAT ...

  8. 【原创】pads2007 Layout 电气连接性检查过孔显示错误

    如图所示的电源铜皮过孔,勾选stiching选项,连接性检查会报错误: 去掉stiching选项,连接错误消失.

  9. JavaScript语法(一)

    JavaScript 用法 HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 & ...

  10. python基础字符串操作

    去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sS ...