jQuery与DOM相互转换
先执行一下代码
$(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相互转换的更多相关文章
- jquery和dom之间的转换
刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...
- jQuery和DOM对象之间的转换
jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是 ...
- [jQuery]jQuery和DOM对象互换(四)
DOM 和 jQuery 相互转换 DOM 转jQuery $(DOM对象) # (1)直接获取 $('video'); # (2)转换 $(DOM对象) var myVideo = document ...
- 抛弃jQuery:DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
- 抛弃jQuery:DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
随机推荐
- android 源码目录介绍
Android 4.0源码目录介绍|-- Makefile|-- bionic (bionic C库)|-- bootable (启动引导相关代码)|-- build (存放系统编译规则及gener ...
- VC++ 工程添加 Unicode Debug和Unicode Release编译支持
转载:http://blog.csdn.net/djhdu/article/details/171766 转载:http://blog.163.com/long_lh/blog/static/2769 ...
- 在WIn32程序中使用MFC的CInternetSession运行异常,主要是因为获取目前应用程序名出错的解决办法
转载:http://group.gimoo.net/review/22564 头文件#include <afxinet.h"> 在非MFC工程中使用CInternetSessio ...
- CodeForces 508C Anya and Ghosts
Anya and Ghosts Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u S ...
- 长链非编码RNA(lncRNA)
长链非编码RNA(lncRNA) 转自:http://blog.sina.com.cn/s/blog_909da11301010bkz.html 长链非编码RNA(lncRNA)是一类转录本长 ...
- Lambda表达式之Python
一.lambda函数 1.lambda函数基础: lambda函数也叫匿名函数,即,函数没有具体的名称,而用def创建的方法是有名称的.如下: """命名的foo函数&q ...
- [HDOJ5952]Counting Cliques(DFS,剪枝)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5952 题意:求图中规模为s的团的个数. DFS+剪枝,姿势不好很容易TLE啊. #include &l ...
- Oracle 分页实现
--分页实现------实行两行一页 --1 先查询按编号排序的所有用户信息 select t.* from T_USER t order by user_id ; --2 查询数据的前四行, ; - ...
- chainOfResponsibility责任链模式
责任链(Chain of Responsibility)模式 : 责任链模式是对象的行为模式.使多个对象都有机会处理请求,从而避免请求的发送者和接受者直接的耦合关系.将这些处理对象连成一条链,沿着这条 ...
- T-SQL利用Case When Then多条件判断
CASE WHEN 条件1 THEN 结果1 WHEN 条件2 THEN 结果2 WHEN 条件3 THEN 结果3 WHEN 条件4 THEN 结果4......... ...