先执行一下代码

 $(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. Java CSV操作(导出和导入)

    Java CSV操作(导出和导入)  CSV是逗号分隔文件(Comma Separated Values)的首字母英文缩写,是一种用来存储数据的纯文本格式,通常用于电子表格或数据库软件.在 CSV文件 ...

  2. [转]NSTimer和CADisplayLink的基本用法

    简要区别:NSTimer初始化器接受调用方法逻辑之间的间隔作为它的其中一个参数,预设一秒执行30次.CADisplayLink默认每秒运行60次,通过它的frameInterval属性改变每秒运行帧数 ...

  3. msm8916 lcd 相关调试点指导

    主要代码:LINUX\android\kernel\arch\arm\boot\dts\qcom\dsi-panel-trust-hx8379c-fwvga-video.dtsiLINUX\andro ...

  4. 定义一个“点”(Point)类用来表示三维空间中的点(有三个坐标)。要求如下: (1)可以生成具有特定坐标的点对象。 (2)提供可以设置三个坐标的方法。 (3)提供可以计算该“点”距原点距离平方的方法。 (4)编写主类程序验证。

    package b; public interface ZuoBiao { double zuobiao(); } package b; public class Point implements Z ...

  5. UVA 11404 五 Palindromic Subsequence

     Palindromic Subsequence Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu ...

  6. ToStringBuilder 学习

    一.简介与引入   1.ToStringBuilder.HashCodeBuilder.EqualsBuilder.ToStringStyle.ReflectionToStringBuilder.Co ...

  7. UNC path

    http://www.emailsignature.eu/phpBB2/how-to-get-a-unc-path-name-t341.html In a network, the Universal ...

  8. Android 上千张图片的列表滑动加载

    一般项目中图片加载用的比较多的是ImageLoader 但是需求自己配置一些参数 上手有些复杂 对于手机图库中有上千张图片需要加载时 一个使用性能很好的库Glide可以解决 效果图如下 滑动非常流畅 ...

  9. hdu 5340 Three Palindromes

    前几晚 BC 的第二题,官方给出的题解是: 然后我结合昨天刚看的 Manacher 算法试着写了下,发现 pre.suf 数组挺难构造的,调试了好久,然后就对中间进行枚举了,复杂度应该是 O(n2) ...

  10. hdu 5317 RGCDQ(前缀和)

    题目链接:hdu 5317 这题看数据量就知道需要先预处理,然后对每个询问都需要在 O(logn) 以下的复杂度求出,由数学规律可以推出 1 <= F(x) <= 7,所以对每组(L, R ...