文档章节

jQuery对象与DOM对象的相互转换

S
 Sandy_wu
发布于 2013/03/27 01:14
字数 4568
阅读 1650
收藏 13

    下面介绍jquery对象和DOM对象的相互转换:          

        在使用jquery框架进行处理时,当我们使用$(expression)方法时,如:获取id="jquery_a"的div元素对象时,实际上获取到的值不是DOM对象,而是jquery对象。

        一、jquery对象向DOM对象的转变

        需要用到jquery对象访问的方法:

        1、each()方法——执行each()方法就相当于是循环处理;

        如$("div").each(function(){//TODO......});当获取到页面中的所有的div对象数组,在遍历$("div")这个jquery对象,每一次的循环处理中this都指向一个新的DOM对象。

        2、get()方法——执行get(index)方法获取下标为index的DOM对象;

         使用“开发人员工具”获取到的值查看两者的关系。如下图

 

        注:其中$("#jquery_a")方法获取到的是jquery对象;而[0]中包含的就是id=“jquery_a”的DOM对象;

               获取到[0]的DOM对象的语句如下:var DOMObject = $("#jquery_a").get(0);

        二、DOM对象向jquery对象的转变

          将DOM对象转变为jQuery对象,直接使用$()方法进行一下封装即可;

        如:获取到了div的DOM对象为:dom,在进行一下$(dom),就变成了jQuery对象。

具体例子如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <script type="text/javascript" src="jquery-1.7.2.js"></script>

  <script type="text/javascript">

 

//ready的作用是页面中的dom加载完成后,即执行传参的函数

//相当于页面的window.onload事件。但是这个onload是当整个页面加载完成后才执行window.onload方法。

//ready则是dom树加载完成后,即可执行

$(document).ready(function(){

//jquery对象和DOM对象的相互转换

/*

//将DOM对象转换为jquery对象。

var pElement = document.getElementsByTagName("p")[0];

var pElementJquery = $(pElement);

 

alert("DOM对象获取的内容:" + pElement.innerHTML);

alert("jquery对象获取的内容:" + pElementJquery.html());

*/

/*

//将jquery对象转换为DOM对象

var jqueryObj = $("#xchange");

//第一种方法

var jqueryObjDOM = jqueryObj[0];

alert(jqueryObjDOM.innerHTML);

 

//第二种方法

var jqueryObjectDOMget = jqueryObj.get(0);

alert(jqueryObjectDOMget.innerHTML);

});

*/

  </script>

 </head>

 <body>

  <p id="xchange">jquery对象和DOM对象的相互转换</p>

 </body>

</html>


1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
$("div").eq(2).html();     //调用jquery对象的方法
$("div").get(2).innerHTML;   //调用dom的方法属性

4、同一函数实现set和get
  Jquery中的很多方法都是如此,主要包括如下几个:
$("#msg").html();     //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");  
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text();     //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");  
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>
$("#msg").height();     //返回id为msg的元素的高度
$("#msg").height("300");   //将id为msg的元素的高度设为300
$("#msg").width();     //返回id为msg的元素的宽度
$("#msg").width("300");   //将id为msg的元素的宽度设为300

$("input").val(");   //返回表单输入框的value值
$("input").val("test");   //将表单输入框的value值设为test

$("#msg").click();   //触发id为msg的元素的单击事件
$("#msg").click(fn);   //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})  
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})  
//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})    
//为每个p元素增加了click事件,单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
   min: function(a, b){return a < b?a:b; },
   max: function(a, b){return a > b?a:b; } 
});   //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

8、操作元素的样式
主要包括以下几种方式:

语法总结和注意事项

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
$("div").eq(2).html();     //调用jquery对象的方法
$("div").get(2).innerHTML;   //调用dom的方法属性

4、同一函数实现set和get
  Jquery中的很多方法都是如此,主要包括如下几个:
$("#msg").html();     //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");  
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text();     //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");  
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

$("#msg").height();     //返回id为msg的元素的高度
$("#msg").height("300");   //将id为msg的元素的高度设为300
$("#msg").width();     //返回id为msg的元素的宽度
$("#msg").width("300");   //将id为msg的元素的宽度设为300

$("input").val(");   //返回表单输入框的value值
$("input").val("test");   //将表单输入框的value值设为test

$("#msg").click();   //触发id为msg的元素的单击事件
$("#msg").click(fn);   //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})  
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})  
//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})    
//为每个p元素增加了click事件,单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
   min: function(a, b){return a < b?a:b; },
   max: function(a, b){return a > b?a:b; } 
});   //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

8、操作元素的样式
主要包括以下几种方式:
$("#msg").css("background");     //返回元素的背景颜色
$("#msg").css("background","#ccc")   //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");   //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select");   //为元素增加名称为select的class
$("#msg").removeClass("select");   //删除元素名称为select的class
$("#msg").toggleClass("select");   //如果存在(不存在)就删除(添加)名称为select的class

9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
如:
$("#msg").click(function(){alert("good")})   //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件:
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
   function(){
   $(this).addClass("out"); 
});
(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
   //每次点击时轮换添加和删除名为selected的class。
   $("p").toggle(function(){
     $(this).addClass("selected");   
   },function(){
     $(this).removeClass("selected"); 
   });
(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如:
   $("p").trigger("click");     //触发所有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
例如:
$("p").bind("click", function(){alert($(this).text());});   //为每个p元素添加单击事件
$("p").unbind();   //删除所有p元素上的所有事件
$("p").unbind("click")   //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 
等价于:
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
   alert("Item #"+i+": "+tempArr[i]);
}
也可以处理json数据,如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为:
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
如:
$.extend(settings, options);  
//合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数(合并多项并返回)
$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
如:
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为:[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为:[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如:$.merge( [0,1,2], [2,3,4] )   //返回[0,1,2,3,4]
$.trim(str):删除字符串两端的空白字符。 
如:$.trim("   hello, how are you?   ");   //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。
如:
jQuery.noConflict(); 
// 开始使用jQuery
jQuery("div   p").hide();
// 使用其他库的 $() 
$("content").style.display = 'none';

1、DOM对象转jQuery对象 
普通的Dom对象一般可以通过$()转换成jQuery对象。

如:$(document.getElementById("msg")) 
返回的就是jQuery对象,可以使用jQuery的方法。

2、jQuery对象转DOM对象 
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。 
如: $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]

这些都是Dom对象,可以使用Dom中的方法,但不能再使用jQuery的方法。

以下几种写法都是正确的: 
$("#msg").html(); 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML;  
 

jQuery对象与DOM对象之间的转换重解

2009-05-31 10:45

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

什么是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中的方法。



© 著作权归作者所有

S
粉丝 9
博文 76
码字总数 156530
作品 0
海淀
私信 提问
加载中

评论(2)

aijquery
aijquery
jquery对象和dom对象间的转换,看这里 很简单:
http://www.aijquery.cn/Html/jqueryjiqiao/11.html
遥远的碎碎
遥远的碎碎
学习
jQuery对象和DOM对象之间的转换实现

本文主要向大家介绍了jQuery对象和DOM对象之间互相转换的方法,其实转换过程十分简单,一起来看看吧。 在讨论jQuery对象和DOM对象的相互交换之前,先约定好定义变量的风格。如果获取的对象是...

IanSun
2015/03/14
50
1
jQuery对象与dom对象相互转换

什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。 比如: $("#test").html() 意思是指:获取ID为test的元素内的html代...

新新
2014/06/27
174
0
js-jQuery对象与dom对象相互转换

核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是jquery对象,它不能使用j...

Carl_
2014/08/26
37
0
jquery对象与Dom对象互转方法

jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。 如:var $v =$...

真座山雕
2012/11/02
142
0
jquery和dom对象之间的转换

jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。 如:var $v =$...

攀爬的小瓜牛
2014/06/19
11
0

没有更多内容

加载失败,请刷新页面

加载更多

快速排序与冒泡排序

快速排序与冒泡排序 比较基础,特准备写博客记录和思考一下

T型人才追梦者
21分钟前
2
0
OSChina 周三乱弹 —— 调查人员问狗 那你在做什么啊?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《Let It Be》- John Denver 《Let It Be》- John Denver 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :每天看一遍,...

小小编辑
今天
6
0
高效程序员的45个习惯总结版-文末脑图

1 做事 一个重大的错误应该被当做一次学习而不是指责他人的机会,团队成员一起工作,应该互相帮助,而不是互相指责 2 欲速则不达 不要为了修复问题而去修复,要投入时间和精力保持代码整洁 ...

阿提说说
今天
18
0
带南海九段线分位数地图可视化(R语言版)

今天带来一篇承诺虾神的可视化博客。内容是使用R语言进行带南海九段线分位数地图可视化。虾神的原博文地址如下(Python版)。 Python实现带南海九段线分位数地图完整可视化版本(附代码及数据...

胖胖雕
今天
12
0
Nginx 的进程结构,你明白吗?

Nginx 进程结构 这篇文章我们来看下 Nginx 的进程结构,Nginx 其实有两种进程结构: 单进程结构 多进程结构 单进程结构实际上不适用于生产环境,只适合我们做开发调试使用。因为在生产环境中...

武培轩
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部