jQuery对象和Dom对象的区分以及之间转换
刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。
一,什么是jQuery对象?
1、就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。
比如:
$("#test").html()
意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码:
document.getElementById("id").innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
比如:
$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转
换。
既然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定:如果一个获取的是 jQuery对象,那么我们在变量
前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab = DOM对象;这么约定只是便于讲解与区别,实际使用中并
不规定。
jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
jQuery对象和Dom对象的区分以及之间转换的更多相关文章
- jquery对象和dom对象的相互转换
更好的学习jquery,要区分好jquery对象和dom对象的区别. 先具体说说dom.举个例子 <html> <head></head> <body> ...
- jQuery对象与DOM对象
jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...
- 关于jQuery对象与DOM对象
今天遇到了关于jQuery对象与dom对象的区分问题.具体如下:对于元素<span id="aa" class="aa">hyz</span& ...
- [JQuery]Jquery对象和dom对象
jquery对象是jquery包装dom对象后产生的对象,它们都只能使用各自的方法. 1.定义变量时,通过$来区分: var $variable = jquery对象: var variable = ...
- 区别jquery对象和dom对象及转换方法
一.jquery对象 由$() 获取,例如 var div = $("#id"); 这个div是jquery对象,它里面没有dom对象自带的方法.常见的dom对象自带的方法, 例如 ...
- 判断一个对象是jQuery对象还是DOM对象
今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...
- jQuery对象和DOM对象的区别
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- jQuery对象与dom对象相互转换
核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...
- JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...
随机推荐
- win7下的vxworks总结
在visualbox下运行vxworks 先来看一张效果图: 在tornado端 成功运行第一个程序,输出了visualbox can run the vxworks ! 在vmware下的速度快多了 ...
- JSP-讲解(生成java类、静态导入与动态导入)
一.JSP技术简介 JSP是Java Server Page的缩写,它是Servlet的扩展,它的作用是简化网站的创建和维护. JSP是HTML代码与Java代码的混合体. JSP文件通常以JSP或J ...
- Sublime Text 2使用心得
一个比较详细的文章:http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html 一. 前言 作为一个前端,有一款好的开发利器是必 ...
- cloudstack安装篇3-SELinux配置、NTP时间同步、配置ClouStack软件库
一.SELinux配置 为了让CloudStack正常工作,我们必须将SELinux设置为permissive.需要在当前系统运行状态下和启动后都能够生效,进行以下配置. 在系统运行状态下的将SELi ...
- IntelliJ 直接编辑国际化文件(properties)方法
IntelliJ 直接编辑国际化文件(properties)方法 settings-File Encodings 右下角 Transparent native-to-ascii conversion的 ...
- Windows 服务 创建 和 安装 -摘自网络
What a Windows Service is Enables you to create long-running executable applications that run in the ...
- unexpected error ConnectionError object has no attribute
unexpected error ConnectionError object has no attribute
- SVN版本控制安装配置说明
版本控制好工具有SVN.CVS.VSS等多种,他们的优劣在此不说明,请网络参阅. SVN支持多种平台,此文仅描述Windows平台下使用说明. SVN客户包含客户端和服务端.Windows平台下客户端 ...
- 【设计模式】单例设计模式的N中Java实现方法
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17359719 特点 单例模式的特点: 1.只能有一个实例: 2.必须自己创建自己的一个实例 ...
- Spring mvc Interceptor 解决Session超时配置流程
最近公司内部框架中对Session超时这一功能未实现,由于采用iframe结构,Session超时后,当点击左侧系统菜单时,会在iframe的右侧再次弹出登陆框. 该问题是由于没有设置拦截器造成. 添 ...