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 相关文章推荐
JQuery中serialize()用法实例分析
Feb 06 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
JavaScript中splice与slice的区别
May 09 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
Vue深入理解插槽slot的使用
Aug 05 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 日常开发小技巧
2009/09/23 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
javascript动态创建链接的方法
2015/05/13 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python字符串,数值计算
2016/10/05 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
大学生求职信范文应怎么写
2014/01/01 职场文书
代办委托书怎么写
2014/08/01 职场文书
励志演讲稿500字
2014/08/21 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
个人收入证明格式
2015/06/24 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
Django基础CBV装饰器和中间件
2022/03/22 Python
Android实现图片九宫格
2022/06/28 Java/Android