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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
vue中监听返回键问题
Aug 28 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 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
桌面中心(二)数据库写入
2006/10/09 PHP
php实现webservice实例
2014/11/06 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
事件绑定之小测试  onclick && addEventListener
2011/07/31 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python Deque 模块使用详解
2014/07/04 Python
Python实现备份文件实例
2014/09/16 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
python的help函数如何使用
2020/06/11 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
运动会方阵口号
2014/06/07 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
银行转正自我鉴定
2014/09/29 职场文书
单位租房协议范本
2014/12/03 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android