jquery中的$("#id")与document.getElementById("id")的区别
以前一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天做特效的时候才发现并不是这么一回事,通过测试得到:
1、alert($("#div"))得到的是[object Object]
2、alert(document.getElementById("div"))得到的是[object HTMLDivElement]
3、alert($("#div")[0])或者alert($("#div").get(0))得到的是[object HTMLDivElement]
原因解读:
document.getElementById()返回的是DOM对象,而$()返回的是jQuery对象
什么是jQuery对象?
---就是通过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中的方法。
下面是其它的相关使用方法:
1、DOM对象转jQuery对象
普通的Dom对象一般可以通过$()转换成jQuery对象。
如:$(document.getElementById("msg"))
返回的就是jQuery对象,可以使用jQuery的方法。
2、jQuery对象转DOM对象
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。
如: $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]
这些都是Dom对象,可以使用Dom中的方法,但不能再使用jQuery的方法。
以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3、两种方法获取对象方式: 如有 <form name="formName" id="formid"></form>
通过id:
document.getElementById('formid');
$('#formid')
通过name
document.getElementsByName('formName')[0]
$("form[name='formName']")
jquery固有的方法:
jquery中的$("#id")与document.getElementById("id")的区别的更多相关文章
- jquery 中的 $("#id") 与 document.getElementById("id") 的区别
以前没注意过,认为jquery 中的 $("#air") 与 document.getElementById("air") 是一回事,指的是同一个东西.在今天写 ...
- function $(id) { return typeof id === "string" ? document.getElementById(id) : id; }
function $(id) { return typeof id === "string" ? document.getElementById(id) : id; } 这句代 ...
- function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法。。。。
function $(id){ return document.getElementById(id); } document.getElementById(id) 是获得id这个元素的. 相当于定义了 ...
- jQuery中,$('#main') 与 document.getElementById('main')是什么样的关系-转
$('#main')[0]和document.getElementById('main')两个一模一样.解释:$('#main'):是一个jquery写法,#main是一个过滤器表示方法,表示查找一个 ...
- 封装document.getElementById(id)
CreateTime--2016年12月18日11:42:45Author:Marydon封装document.getElementById(Id)方法 <script type=" ...
- document.getElementById("id").value与$("#id").val()之间的区别
本文链接:https://blog.csdn.net/mottohlm/article/details/78364196....今天在项目中遇到这么一个JS报错:原因是代码中有这么一段:对,就是var ...
- 获得输入框的文本document.getElementById('id').value;
<input id="demo" type="text" value="" > x=document.getElementByI ...
- document.getElementById(“id”)与$("#id")的区别
document.getElementById("id")可以直接获取当前对象, jQuery利用$("#id")获取的是一个[object Object],需 ...
- Id.value与document.getElementById("Id").value的区别
如果标签Id在Form表单里面的话,直接Id.value就不能用了,而是要用Form.Id.value来取值或设置值 所以最好用document.getElementById("Id&quo ...
随机推荐
- js-FCC算法Smallest Common Multiple。找出两个参数和它们之间的连续数字的最小公倍数。
存档. 找出能被两个给定参数和它们之间的连续数字整除的最小公倍数. function smallestCommons(arr) { //分解质因数法,分解为若干个质数相乘 var arrratio=[ ...
- response与文件下载
参考博客: http://www.cnblogs.com/lcpholdon/p/4380980.html http://www.cnblogs.com/mingforyou/p/3281945.ht ...
- 在VS里配置及查看IL
在VS里配置及查看IL 来源:网络 编辑:admin 在之前的版本VS2010中,在Tools下有IL Disassembler(IL中间语言查看器),但是我想直接集成在VS2012里使用,方法如下: ...
- DedeCMS Xss+Csrf Getshell \dede\file_manage_control.php
目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 对这个漏洞的利用方式进行简单的概括 . 这个漏洞的利用前提是需要登录到后台进行操作 ...
- 通过oauth 认证 新浪微博 开发过程中遇到的问题
1 Android之NetworkOnMainThreadException异常 http://blog.csdn.net/mad1989/article/details/25964495 ,从Hon ...
- iOS - 全屏滑动
取经地址 1.使用关联 关联是指把两个对象相互关联起来,使得其中的一个对象作为另一个对象的一部分. 使用关联,是基于关键字的,因此,我们可以为任意对象增加任意多的关联,但是关键字是唯一的.关联可以保证 ...
- centos忘记root密码,重新设置的方法
今天重新装了一个centos6.6,好像root密码没有叫我设置吧,然后用虚拟机开始安装之前的密码登录显示失败,所以有了下面的彩蛋.....Helloween... 在虚拟机安装了Centos,今天要 ...
- 日期String相互转换
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");Date endate = sdf.parse(endDate) ...
- python 基于windows环境的ftp功能
描述: 1.基于备份服务器部署的py程序,将需要备份主机目录下的内容下载至备份服务器(服务端和远端都是windows server 2008) 2.py程序部署在windows服务器,后台运行,基于b ...
- Git删除tag
git tag -d v2016062101 删除本地tag git push origin --delete tag v2016062101 删除远程tag