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 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
js new Date()实例测试
Oct 31 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
js断点调试经验分享
2017/12/08 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
十八届三中全会个人学习材料
2014/02/13 职场文书
个人借款担保书
2014/04/02 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
Python基础之pandas数据合并
2021/04/27 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
Django中celery的使用项目实例
2022/07/07 Python