jQuery对象和DOM对象使用说明


Posted in Javascript onJune 25, 2010

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

var domObj = document.getElementById("id"); //DOM对象 
var $obj = $("#id"); //jQuery对象;

jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法,例:
$("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法;
上面的那段代码等同于:
document.getElementById("foo").innerHTML;

注意:在jQuery对象中无法使用DOM对象的任何方法。
例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的,可以用$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。同样,DOM对象也不能使用jQuery方法。学习jQuery开始就应当树立正确的观念,分清jQuery对象和DOM对象之间的区别,之后学习 jQuery就会轻松很多的。

2.jQuery对象和DOM对象的互相转换

在上面第一点说了,jquery对象和dom对象是不一样的!比如jquery对象不能使用dom的方法,dom对象不能使用jquery方法,那假如我jquery没有封装我要的方法,那能怎么办呢?
这时我们可以将jquer对象转换成dom对象

jquery对象转换成dom对象
jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index)。可能有人会觉得奇怪,怎么是用下标呢,没错,jquery对象就是一个数组对象.
下面代码将演示一个jquery对象转换成dom对象,再使用dom对象的方法

var $cr=$("#cr"); //jquery对象 
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0); 
alert(cr.checked); //检测这个checkbox是否给选中

dom对象转换成jquery对象
对于一个dom对象,只需要用$()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象);
var cr=document.getElementById("cr"); //dom对象 
var $cr = $(cr); //转换成jquery对象

转换后可以任意使用jquery中的方法了.

通过以上的方法,可以任意的相互转换jquery对象和dom对象.
最后再次强调,dom对象才能使用dom中的方法,jquery对象不可以使用dom中的方法,但jquery对象提供了一套更加完善的工具用于操作dom,关于jquery的dom操作将在后面的文章进行详细讲解.

ps:平时用到的jquery对象都是通过$()函数制造出来的,$()函数就是一个jquery对象的制造工厂.
建议:如果获取的对象是jquery对象,那么在变量前面加上$,这样方便容易识别出哪些是jquery对象,例如:
var $variable = jquery对象;
如果获取的是dom对象,则定义如下:
var variable = dom对象

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 #Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 #Javascript
有道JavaScript监听浏览器的问题
Jun 23 #Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 #Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 #Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 #Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 #Javascript
You might like
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
python 域名分析工具实现代码
2009/07/15 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
初步探究Python程序的执行原理
2015/04/11 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
教师岗位职责
2013/11/17 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
活动总结报告格式
2014/05/09 职场文书
化学专业自荐信
2014/05/28 职场文书
班组拓展活动方案
2014/08/14 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
先进党支部事迹材料
2014/12/24 职场文书
英文升职感谢信
2015/01/23 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
javaScript Array api梳理
2021/03/31 Javascript
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android