JQUERY 对象与DOM对象之两者相互间的转换


Posted in Javascript onApril 27, 2009

刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换

这几天会将jQuery的一些使用方法总结一下,希望能对jQuery初学者起到一定的帮助作用。

今天主要看看jQuery对象和dom对象的相互转换,明白了这个,以后用起jQuery会方便很多。

1、方法名冲突的解决办法 在开始使用jQuery时,我们首先应该避免jQuery与其他类库或自定义js的冲突。 先看一段最简单的代码:

jQuery(document).ready(function() {

    alert("Welcome!");

});

在这里没有使用$(document)这种写法,因为很多时候我们自己定义了$(id)方法用来获得元素,并且在prototype等类库中也定义了$()方法。所以,为了避免冲突,建议大家也使用jQuery("#id")这种写法。

2、jQuery对象与dom对象的相互转换 jQuery对象转dom对象: jQuery("#id")获得的是一个jQuery对象,它和普通的dom对象是不同的,所以不能直接使用dom对象定义的方法。由于jQuery对象本身就是一个集合,所以可以通过索引将jQuery对象转换成dom对象,如jQuery("#id")[0]就是一个dom对象。 看下边一个例子:

<div id="show">

    <span>要显示的内容1</span>

    <span>要显示的内容2</span>

    <span>要显示的内容3</span>

</div>

要获得span中的内容,使用以下方法均正确。

//jQuery方法,获得第一个span内容

jQuery("#show span").html();

//获得第三个span内容

jQuery("#show span")[2].innerHTML;

//eq()返回jQuery对象,从eq(0)开始。获得第二个span内容

jQuery("#show span").eq(1)[0].innerHTML;

//get()直接返回dom对象,从get(0)开始。获得第三个span内容

jQuery("#show span").get(2).innerHTML;

dom对象转jQuery对象: 使用jQuery()就可将dom对象转为jQuery对象。 如:

jQuery(document.getElementById("show")).html();

输出结果为:

<div id="show">

    <span>要显示的内容1</span>

    <span>要显示的内容2</span>

    <span>要显示的内容3</span>

</div>

这样就实现了jQuery对象和dom对象的相互转换,比如想让焦点停留在id为focus的文本框。只需:

jQuery("#focus")[0].focus();

什么是jQuery对象?

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。

比如:

$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码:

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。

还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定:如果一个获取的是 jQuery对象,那么我们在变量前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab = DOM对象;这么约定只是便于讲解与区别,实际使用中并不规定。

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是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)

如:var v=document.getElementById("v"); //DOM对象

var $v=$(v); //jQuery对象

转换后,就可以任意使用jQuery的方法了。

通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。

转换案例:
获取JQUERY对象的方法

var jqueryObject = $("#test"); //jqeuryObject为一个Jquery对象,它可以使用jquery的所有方法但是不能使用
var jqueryObject = $("#test"); //jqeuryObject为一个Jquery对象,它可以使用jquery的所有方法但是不能使用
DOM对象的方法

var DOMObject = document.getElementById("test");//DOMObject为一个DOM对象,它可以使用DOM的所有方法,但是不能使用jquery的方法
var DOMObject = document.getElementById("test");//DOMObject为一个DOM对象,它可以使用DOM的所有方法,但是不能使用jquery的方法
jquery对象->DOM对象

var jqueryObject = $("#test");//获取jquery对象
var DOMObject = jqueryObject[0];//jquery对象转换为DOM对象
var jqueryObject = $("#test");//获取jquery对象
var DOMObject = jqueryObject[0];//jquery对象转换为DOM对象
DOM对象->jquery对象
var DOMObject = document.getElementById("test");//获取DOM对象
var jqueryObject = $(DOMObject);//DOM对象转换为jquery对象

使用jquery时,有时需要使用原始DOM对象的方法,例如调用Activex控件的某些方法时,此时就需要将jquery对象转换为DOM对象,转换方法如下:

方法1: $("xxx")[index]
方法2:$("xxx").get(index)
方法3:$("xxx").eq(index)[0]

Javascript 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
一个选择最快的服务器转向代码
Apr 27 #Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 #Javascript
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 #Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 #Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 #Javascript
jQuery 对象中的类数组操作
Apr 27 #Javascript
jquery遍历input取得input的name
Apr 27 #Javascript
You might like
请php正则走开
2008/03/15 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
php中strtotime函数用法详解
2014/11/15 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
js实现交通灯效果
2017/01/13 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
pyenv命令管理多个Python版本
2017/03/26 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
mac使用python识别图形验证码功能
2020/01/10 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
创业计划书介绍
2019/04/24 职场文书