jquery 遍历dom对象对象和DOM对象的区别介绍

jQuery(1)
jQuery对象和使用说明,需要的朋友可以参考下。
1.jQuery对象和
第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 ,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.
DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;
复制代码 代码如下:
var domObj = document.getElementById(&id&);
var $obj = $(&#id&);
//jQuery对象;
jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法,例:
$(&#foo&).html(); //获取id为foo的元素内的,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中的方法了.
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:524次
排名:千里之外3745人阅读
初学jQuery,会对jQuery对象和DOM对象心存很大的疑惑,因此有必要明白他们之间的区别和联系。
DOM对象是我们用传统的方法(javascript)获得的对象,jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;
$(&#color&).html();//获取id为color的元素内的html代码,html()是jQuery特有的方法;
document.getElementById(&color&).innerHTML;
DOM对象就是javascript固有的一些对象。DOM对象能使用javascript固有的方法,但是不能使用jQuery里面的方法。
例如$(&#id&).innerHTML 和$(&#id&).checked之类的写法都是错误的,可以用$(&#id&).html()和$(&#id&).attr(&checked&)之类的 jQuery方法来代替。
var domObj =document.getElementById(&id&); //DOM对象
var $obj =$(&#id&); //jQuery对象;
jQuery对象和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对象);
复制代码 代码如下:
varcr=document.getElementById(&cr&); //dom对象
var $cr = $(cr); //转换成jquery对象
转换后可以任意使用jquery中的方法了.
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:388739次
积分:5511
积分:5511
排名:第3365名
原创:109篇
评论:862条
(1)(2)(6)(2)(1)(3)(7)(5)(1)(1)(2)(4)(2)(4)(4)(5)(5)(2)(4)(4)(4)(3)(4)(4)(3)(9)(4)(11)(3)(3)(3)&jquery对象和DOM对象的区别介绍
秒后自动跳转到登录页
(奖励5下载豆)
快捷登录:
举报类型:
不规范:上传重复资源
不规范:标题与实际内容不符
不规范:资源无法下载或使用
其他不规范行为
违规:资源涉及侵权
违规:含有危害国家安全等内容
违规:含有反动/色情等内容
违规:广告内容
详细原因:
任何违反下载中心规定的资源,欢迎Down友监督举报,第一举报人可获5-10下载豆奖励。
124种漂亮jQuery特效
Learning jQuery(4t
JQuery学习笔记(技
jQuery视频1-jQuery
JavaScript+JQuery+
《jQuery 高级编程》
jQuery-EasyUI视频教
jquery对象和DOM对象的区别介绍
上传时间:
技术分类:
资源评价:
(0位用户参与评价)
已被下载&0&次
jquery对象和DOM对象的区别介绍
本资料共包含以下附件:
jquery对象和DOM对象的区别介绍.doc
51CTO下载中心常见问题:
1.如何获得下载豆?
1)上传资料
2)评论资料
3)每天在首页签到领取
4)购买VIP会员服务,无需下载豆下载资源
5)更多途径:点击此处
2.如何删除自己的资料?
下载资料意味着您已同意遵守以下协议:
1.资料的所有权益归上传用户所有
2.未经权益所有人同意,不得将资料中的内容挪作商业或盈利用途
3.51CTO下载中心仅提供资料交流平台,并不对任何资料负责
4.本站资料中如有侵权或不适当内容,请邮件与我们联系()
5.本站不保证资源的准确性、安全性和完整性, 同时也不承担用户因使用这些资料对自己和他人造成任何形式的伤害或损失
下载1084次
下载1039次
下载1475次
下载1163次
下载1546次
相关专题推荐
jQuery的易扩展性吸引了来自全球的开
本专题为jQuery实例教程和jQuery电子
jQuery EasyUI是一组基于jQuery的UI插
jQuery使用户能更方便地处理HTML doc
EasyUI是一个基于jquery的集成了各种
本视频由尚学堂白贺翔老师录制,于20
该系列视频适合没有Ajax和jQuery基础
CSDN ITCAST老师王兴魁主讲的JQuery实
本专题为李炎恢老师的jQuery视频教程
这部分视频是紧接着韩顺平老师ajax部
《精通JavaScript+jQuery》配套视频教
本专题为迅雷看看前端首页设计视频教
佟刚老师讲授,本视频循序渐进地对jQ
本专题为jQuery实例视频教程,共七个
jquery easyui入门在线学习,通过介绍
JQuery是一个优秀的Javascript类库,
本周下载热点
意见或建议:
联系方式:
您已提交成功!感谢您的宝贵意见,我们会尽快处理求大神指导:js获取对象和jquery获取的对象有啥区别??_javascript吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名:今日本吧第个签到,本吧因你更精彩,明天继续来努力!
本吧签到人数:0成为超级会员,使用一键签到本月漏签0次!成为超级会员,赠送8张补签卡连续签到:天&&累计签到:天超级会员单次开通12个月以上,赠送连续签到卡3张
关注:110,506贴子:
求大神指导:js获取对象和jquery获取的对象有啥区别??收藏
问一下js获取对象和jquery获取的对象有啥区别??
千锋javascript线路图「点击获取」,足不出户挑工作,学员&企业零距离,名师传道授业.千锋javascript0基础免费试听2周,拒绝平庸就业,不容错过,让命运的齿轮开始转动!
1 jquery获取的是数组,数组元素是js获取的对象;2 jquery获取对象有自带的方法和属性,js获取的对象带有浏览器内嵌的方法和属性
原生 JS 获取的对象,一般是 DOM 对象自身 (e.g. querySelector),或者 NodeList (DOM 物件,e.g. querySelectorAll)。你可以直接存取它的 style, dataset 等,也可以直接呼叫方法例如 save, reset, appendChild。jQuery 获取的不是矩阵,也不是 NodeList,而是由 jQuery 包装过的物件,藉由这中介物件提供 jQ 的方法和支援。除非直接从中取出 DOM 对象,否则所有操作都隔了一层纱,通常较方便但也较慢。另外,原生矩阵可以用 slice, splice, map 等方法,NodeList 可以用 call 间接调用,而 jQ 物件一般建议你使用 jQ 提供的方法去操作(或者用 get 再将它复制成原生矩阵)。
登录百度帐号推荐应用
为兴趣而生,贴吧更懂你。或jQuery中$this和$(this)的区别介绍(一看就懂)
// this其实是一个Html 元素。
// $this 只是个变量名,加$是为说明其是个jquery对象。
// 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作。
(function($){
$.fn.hilight = function(options){
debug(this);
var defaults = {
foreground: 'red',
background: 'yellow'
var opts = $.extend({}, $.fn.hilight.defaults, options);
return this.each(function() {
// this其实是一个Html 元素。
// $this 只是个变量名,加$是为说明其是个jquery对象。
// 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作。
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) :
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
// define our format function
$.fn.hilight.format = function(txt) {
return '&strong&' + txt + '&/strong&';
// 插件的defaults
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
function debug($obj) {
if (window.console && window.console.log){
window.console.log('hilight selection count: ' + $obj.size());
})(jQuery)
如果本文对您有帮助请分享给您的好友,也可按Ctrl+D收藏本页面,谢谢!
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)}

我要回帖

更多关于 jquery操作dom对象 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信