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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
UI Events 用户界面事件
Jun 27 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
javascript实现Table排序的方法
May 15 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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 file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php获取字段名示例分享
2014/03/03 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
毕业生简历自我评价范文
2014/04/09 职场文书
关爱残疾人标语
2014/06/25 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android