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 相关文章推荐
extjs 如何给column 加上提示
Jul 29 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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中chdir()函数用法实例
2014/11/13 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
js表头排序实现方法
2015/01/16 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
Angular实现响应式表单
2017/08/04 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
深入浅析python 中的匿名函数
2018/05/21 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
自荐信范文
2013/12/10 职场文书
思想专业自荐信范文
2013/12/25 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
入党积极分子个人总结
2015/03/02 职场文书
详解Python函数print用法
2021/06/18 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
Python如何将list中的string转换为int
2022/07/15 Ruby