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 相关文章推荐
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
Three.js学习之网格
Aug 10 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
详解vue中的computed的this指向问题
Dec 05 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 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
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
python多线程扫描端口示例
2014/01/16 Python
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python实现电子词典
2020/03/03 Python
Django中使用Celery的方法步骤
2020/12/07 Python
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
班级安全教育实施方案
2014/02/23 职场文书
给市场的环保建议书
2014/05/14 职场文书
2015年招聘工作总结
2014/12/12 职场文书
贷款承诺书
2015/01/20 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS
Python OpenCV超详细讲解基本功能
2022/04/02 Python