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 检测浏览器类型和版本的代码
Sep 15 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
node之本地服务器图片上传的方法示例
Mar 26 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php的curl实现get和post的代码
2008/08/23 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
在Javascript中 声明时用"var"与不用"var"的区别
2013/04/15 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
JavaScript实现数值自动增加动画
2017/12/28 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
详解Django框架中用context来解析模板的方法
2015/07/20 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python绘制简单彩虹图
2018/11/19 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
企业宣传口号
2014/06/12 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS