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实现焦点滚动图效果 具体方法
Jun 24 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
JS 控制CSS样式表
2009/08/20 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
VUE实现一个分页组件的示例
2017/09/13 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
Django 解决由save方法引发的错误
2020/05/21 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
学习退步检讨书
2014/09/28 职场文书
专家推荐信范文
2015/03/26 职场文书
上课迟到检讨书
2015/05/06 职场文书
大学入学感言
2015/08/01 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
浅谈克隆 JavaScript
2021/11/02 Javascript