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 相关文章推荐
javascript加号"+"的二义性说明
Mar 04 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
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 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
js left,right,mid函数
2008/06/10 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python如何从文件读取数据及解析
2019/09/19 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
详解Python IO编程
2020/07/24 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
文员的职业生涯规划发展方向
2014/02/08 职场文书
市场营销求职信范文
2014/02/21 职场文书
消防工作实施方案
2014/06/09 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
考试作弊检讨
2015/01/27 职场文书
2015毕业寄语大全
2015/02/26 职场文书
个人工作能力自我评价
2015/03/05 职场文书
免职通知
2015/04/23 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS