文档章节

$("#id")与document.getElementById("id")的区别以及相互转化

荆瑶
 荆瑶
发布于 2017/08/17 19:22
字数 411
阅读 47
收藏 1

$("#id")与document.getElementById("id")区别:

1. $("#id")获取到的是jQuery对象,即通过jQuery包装DOM对象后产生的对象,jQuery独有;

2. document.getElementById("id")获取到的是DOM对象;

3. jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法。

区别如下图:

jQuery对象转成DOM对象:[index]或者get(index)

1. jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。 如:

var jq_v = $("#chart");  //jQuery对象 
var v = jq_v[0];         //DOM对象 
alert(v.checked);        //检测这个checkbox是否被选中 

2. jQuery本身提供,通过.get(index)方法,得到相应的DOM对象 。如:

var jq_v = $("#chart"); //jQuery对象 
var v = jq_v.get(0);    //DOM对象 
alert(v.checked);       //检测这个checkbox是否被选中 

使用:

由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。 
如: $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5] 

这些都是Dom对象,可以使用Dom中的方法,但不能再使用jQuery的方法。 
以下几种写法都是正确的: 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML;

DOM对象转成jQuery对象:

只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,即:$(DOM对象) 。
如:

var v = document.getElementById("chart"); //DOM对象 
var jq_v = $(v);                      //jQuery对象 

转换后,就可以任意使用jQuery的方法了。 

需要强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。 

© 著作权归作者所有

荆瑶
粉丝 2
博文 50
码字总数 12210
作品 0
海淀
程序员
私信 提问
js-jQuery对象与dom对象相互转换

核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是jquery对象,它不能使用j...

Carl_
2014/08/26
0
0
jQuery对象与dom对象

初学jQuery,会对jQuery对象和DOM对象心存很大的疑惑,因此有必要明白他们之间的区别和联系。 DOM对象是我们用传统的方法(javascript)获得的对象,jQuery对象就是用jQuery的类库选择器获得...

雍雍_yoyo
2016/03/23
29
0
DOM对象和JQuery对象的区别

1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系. DOM对象,即是我们用传统的方法(javasc...

我叫leo-
2016/03/28
16
0
jQuery对象与dom对象相互转换

什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。 比如: $("#test").html() 意思是指:获取ID为test的元素内的html代...

新新
2014/06/27
0
0
DOM对象与jquery对象的区别

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

zwjjap
2015/07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spark Streaming的优化之路——从Receiver到Direct模式

          作者:个推数据研发工程师 学长 1 业务背景 随着大数据的快速发展,业务场景越来越复杂,离线式的批处理框架MapReduce已经不能满足业务,大量的场景需要实时的数据处理结果来...

个推
今天
3
0
壮丽70年·奋斗新时代|蒸妙集团熏蒸中会阴熏蒸的神奇好处

聚结相合之处为会。会阴居两阴间,为督、任、冲三脉的起点,三脉背出两阴之间,会聚阴部,因名会阴。会阴,经穴名。出《针灸甲乙经》。会阴别名屏翳、下极、金门。属任脉。在会阴部,男性当阴...

公益传承
今天
2
0
pentaho-kettle-8.2.0.0-R源码开发环境搭建

1.从Kettle官网下载源码,本文使用的是pentaho-kettle-8.2.0.0-R 下载地址:https://codeload.github.com/pentaho/pentaho-kettle/zip/8.2.0.0-R 2.打开eclipse,选择一个新的工作空间,然后设...

gq_2010
今天
1
0
lua web快速开发指南(7) - 高效的接口调用 - httpc库

httpc库基于cf框架都内部实现的socket编写的http client库. httpc库内置SSL支持, 在不使用代理的情况下就可以请求第三方接口. httpc支持header、args、body、timeout请求设置, 完美支持各种h...

水果糖的小铺子
今天
5
0
通过四道常问面试题,带你了解什么是数据库分库分表

编者语:为了避免被误解为:「手里有把锤子,看什么都是钉子!」,说明一下不是什么业务都适合分布式数据库,更不是用了分布式数据库性能就一定能得到扩展。 其次:本文为纯干货,建议先转发...

老道士
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部