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 ...
随机推荐
- android开发之生命周期
android开发之生命周期 一:Activity的生命周期: 这几天了了解了安卓Activity的生命周期,对于生命周期有了大概的理解: 一个Activity的生命周期也就是Activity从生成到 ...
- git 笔记1
代码 kamil@ubuntu:~/github/xzdz$ git init Initialized empty Git repository in /home/kamil/github/xzdz/ ...
- Linux安装后的基本配置
1.换源 http://mirrors.zju.edu.cn http://mirrors.aliyun.com http://mirrors.ustc.edu.cn ubuntu替换/etc/apt ...
- springMVC-JSR303数据效验
JSR 303 是java为Bean数据合法性校验提供的标准框架, 它已经包含在javaEE6.0中 JSR 303 通过Bean属性上标注类似于@NotNull.@Max等标准的注解指定校验规则, ...
- D1
第一天
- Bzoj4300 绝世好题
Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 1325 Solved: 722 Description 给定一个长度为n的数列ai,求ai的子序列bi ...
- ClassCastException 导致程序一运行就强制退出
程序显示是类型转换异常,原因是 ic—launcher 不是layerlist图形,而是bmp类型(此处不是指格式)图片,因此取出来后经过红框内强制类型转换导致出错. 为什么我当时要把他强制转换? ...
- ANDROID版本号和版本名称的重要性介绍
当我们在刚开始学习ANDROID的时候,可能不会过多的关注这个位于manifest.xml文件中的versionCode和versionName. 但是其实一个好的版本控制,对于我们有至关重要的作用. ...
- jQuery ajax - serialize() 方法-输出序列化表单值
定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生 ...
- 执行查询报: Incorrect key file for table ‘test’; try to repair it
报错信息如下:程序没有错误,但执行会报错,错误定在执行语句上 查了一下资料 网上的解决办法,亲试可用: mysql> use news;Database changedmysql> rep ...