jquery对象和javascript对象即DOM对象相互转换


Posted in Javascript onAugust 07, 2014

jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法;例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。

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是定义变量

如: 

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对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

通过以上方法,可以任意的相互转换 jQuery 对象和 DOM 对象,需要再强调的是: DOM 对象才能使用DOM 中的方法,jQuery 对象是不可以使用DOM中的方法。

Javascript 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
React实现轮播效果
Aug 25 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 #Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 #Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 #Javascript
谷歌地图打不开的解决办法
Aug 07 #Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 #Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 #Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 #Javascript
You might like
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
php查询操作实现投票功能
2016/05/09 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
Python random模块常用方法
2014/11/03 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
使用Python更换外网IP的方法
2018/07/09 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python中pass的作用与使用教程
2020/11/13 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
警察先进个人事迹材料
2014/05/16 职场文书
校园文化标语
2014/06/18 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python