先执行一下代码

 $(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. 模板页显示Excel数据Gridview增删改查

    <%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" Au ...

  2. Python串口编程

    python的串口网上有很多例子,这里了只是把认为好的整理到一起. 首先,应该安装serial模块,还能开始后续的操作.我用的python2.6,serial模块可以在这里下载安装serial模块下载 ...

  3. jquery之 off()方法

    off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...

  4. 卡尔曼滤波— Constant Velocity Model

    假设你开车进入隧道,GPS信号丢失,现在我们要确定汽车在隧道内的位置.汽车的绝对速度可以通过车轮转速计算得到,汽车朝向可以通过yaw rate sensor(A yaw-rate sensor is ...

  5. SQL生成包含年月日的流水号

    --************************************************************************************************** ...

  6. HDU 5833 Zhu and 772002

    HDU 5833 Zhu and 772002 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  7. 微博传播数量和传播深度的预测--基于pyspark和某个回归算法

    8-28决定参加一下这个千万条的数据处理任务,因为场景和自己做过的一个回归分析预测差不多,第一天开始在小规模的数据上做准备工作. 第二次大修改版本 date 20160829 星期一¶ 原始数据处理, ...

  8. .net 常用Response.ContentType

    来源:http://blog.csdn.net/navy235/article/details/5982319 不同的ContentType 会影响客户端所看到的效果.默认的ContentType为 ...

  9. FLASH CC 2015 CANVAS 中 gotoAndStop、gotoAndPlay() 不起作用

    哎 话不多说先看我的代码: //舞台上 放着sp0.sp1....sp8,9个mc,每个mc都有几帧, //帧上有如下代码 var S=this; S.stop() inIt1();//not wor ...

  10. WdatePicker.js 日历点击时,触发自定义方法 ,可以调用自己的函数。

    问题: 在选择日期后,没有提交按钮,得到日期后,就可以把日期传到后台,然后就可以得到数据. 方法: 在input 标签中加入onfocus ,就可以了. wdatePicker();可以自定义事件函数 ...