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 Event学习第三章 早期的事件处理程序
Feb 07 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 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提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP多例模式介绍
2013/06/24 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python 中如何写注释
2020/08/28 Python
Python如何获取文件路径/目录
2020/09/22 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
淘宝店策划方案
2014/06/07 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
质量保证书
2015/01/17 职场文书
停电放假通知
2015/04/14 职场文书
开票证明
2015/06/23 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python