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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
详解vue express启动数据服务
Jul 05 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
Preload基础使用方法详解
Feb 03 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 adodb连接不同数据库
2009/03/19 PHP
PHP 文件上传全攻略
2010/04/28 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php简单获取目录列表的方法
2015/03/24 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python多线程threading.Lock锁用法实例
2014/11/01 Python
python常见数制转换实例分析
2015/05/09 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
python在协程中增加任务实例操作
2021/02/28 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
高级运动鞋:GREATS
2019/07/19 全球购物
参观考察邀请函范文
2014/01/29 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
停车位租赁协议书
2014/09/24 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
焦点访谈观后感
2015/06/11 职场文书
色戒观后感
2015/06/12 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android