jQuery对象和DOM对象相互转化


Posted in Javascript onApril 24, 2009

DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法,但是不能使用jQuery里的方法。例如:document.getElementById("img").src="test.jpg";这里的document.getElementById("img")就是DOM对象;
$("#img").attr("src","test.jpg"); 和document.getElementById("img").src="test.jpg";是等价的,是正确的,但是$("#img").src="test.jpg";或者document.getElementById("img").attr("src","test.jpg"); 都是错误的。

在说一个例子:就是this,我在写jQuery的时候经常这样写:this.attr("src","test.jpg"); 可是就是出错。其实this是DOM对象,而.attr("src","test.jpg") 是jQuery方法,所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象,例如$(this).attr("src","test.jpg");

 

1.DOM对象转成jQuery对象:

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)

如:var v=document.getElementById("v");  //DOM对象

var $v=$(v);    //jQuery对象

转换后,就可以任意使用jQuery的方法了。
 

2.jQuery对象转成DOM对象:

两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);

(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。

如:var $v =$("#v") ; //jQuery对象

var v=$v[0];    //DOM对象

alert(v.checked)   //检测这个checkbox是否被选中

(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象

如:var $v=$("#v");  //jQuery对象

var v=$v.get(0);   //DOM对象

alert(v.checked)  //检测这个checkbox是否被选中

Javascript 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
数组Array的排序sort方法
Feb 17 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
JavaScript 学习点滴记录
Apr 24 #Javascript
用JavaScript显示随机图像或引用
Apr 21 #Javascript
JavaScript 无符号右移运算符
Apr 17 #Javascript
JavaScript 无符号右移赋值操作
Apr 17 #Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 #Javascript
jQuery autocomplete插件修改
Apr 17 #Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 #Javascript
You might like
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
Python3 max()函数基础用法
2019/02/19 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
浅析python函数式编程
2020/09/26 Python
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
采购求职信
2014/03/17 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
防火标语大全
2014/10/06 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
旷课检讨书500字
2014/10/14 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书