jQuery对象和DOM对象相互转化


Posted in Javascript onApril 24, 2009

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 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对象

alert(v.checked)  //检测这个checkbox是否被选中

Javascript 相关文章推荐
javascript 关于# 和 void的区别分析
Oct 26 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
js正则表达式的使用详解
Jul 09 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
浅谈Express异步进化史
Sep 09 Javascript
VUE长按事件需求详解
Oct 18 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
在webstorm中配置less的方法详解
Sep 25 Javascript
JavaScript 学习点滴记录
Apr 24 #Javascript
用JavaScript显示随机图像或引用
Apr 21 #Javascript
JavaScript 无符号右移运算符
Apr 17 #Javascript
JavaScript 无符号右移赋值操作
Apr 17 #Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 #Javascript
jQuery autocomplete插件修改
Apr 17 #Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 #Javascript
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
详解Python发送邮件实例
2016/01/10 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
春节活动策划方案
2014/01/24 职场文书
旷课检讨书3000字
2014/02/04 职场文书
保险内勤岗位职责
2014/04/05 职场文书
工作分析计划书
2014/04/30 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
社区节水倡议书
2015/04/29 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
python+opencv实现目标跟踪过程
2022/06/21 Python