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 ...
随机推荐
- 【Linux】用grep在文档中查找内容
有时候,我们需要在文档中查找一些内容,常用grep.它在文档查找相关内容并输出匹配行. > 查找某关键字 在system.log中,查找包含keyword的行 grep 'keyword' sy ...
- mysq 安装时候进行生成数据库系统时候执行语句 ./scripts/mysql_install_db --user=mysql --basedir=/usr/local/mysql --datadir=/data/mysql 时候报错
我在安装数据库时候在系统进行生成数据库时候出现下面问题,就是在 scripts里面mysql_install_db没有执行权限, 进入到scripts目录下,执行chmod 777 mysql_ins ...
- SqlSever基础 一个条件group by 一列有两个内容,分组并查看每个内容有多少行,并用as起名
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- BZOJ 3546 Life of the Party (二分图匹配-最大流)
题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3546 题意:给定一个二分图.(AB两个集合的点为n,m),边有K个.问去掉哪些点后 ...
- Java IO流整理Rick
Java 流IO部分: Console 控制台信息读取// ----------- Console Begin // ------------ 部分代码 Console cons ; char[] ...
- css做的后台管理页面,不考虑ie8一下的
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- ManualResetEvent & AutoResetEvent
参考资料: 1. https://msdn.microsoft.com/en-us/library/system.threading.manualresetevent.aspx 2. https: ...
- CSS笔记(九)轮廓
参考:http://www.w3school.com.cn/css/css_outline.asp CSS 边框属性 "CSS" 列中的数字指示哪个 CSS 版本定义了该属性. 属 ...
- 查看perl及其模块
Perl本身自带了很丰富的文档,如果把它们都打印出来,恐怕要耗费大量纸墨.我们试图清点过,但数到2000页左右的时候就数不清了(不用担心,我们用虚拟打印机计算页面数量,这样不会对树木造成威胁,挺环保的 ...
- SQL查询语句 group by后, 字符串合并
合并列值 --******************************************************************************************* 表 ...