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 相关文章推荐
prototype 1.5 & scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
详解datagrid使用方法(重要)
Nov 06 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过滤危险html代码
2008/08/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php文件下载处理方法分析
2015/04/22 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python list排序的两种方法及实例讲解
2017/03/20 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python IDLE入门简介
2017/12/08 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
django ORM之values和annotate使用详解
2020/05/19 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
建筑工程自我鉴定
2013/10/18 职场文书
实用的简历自我评价
2014/03/06 职场文书
二十年同学聚会感言
2015/07/30 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
如何利用React实现图片识别App
2022/02/18 Javascript