jQuery技术

jQuery对象和DOM对象小结

字号+ 作者:H5之家 来源:H5之家 2015-11-12 11:36 我要评论( )

在使用jQuery的时候经常会将jQuery对象和DOM对象弄混,在搞不清楚关系的时候,经常会将两者的方法混用、乱用。 1、DOM对象和jQuery对象的关系 DOM即文档对象模型,每一份DOM都可以表示成一棵树,可以通过javascript中的getElementByTagName或者getElementByI

在使用jQuery的时候经常会将jQuery对象和DOM对象弄混,在搞不清楚关系的时候,经常会将两者的方法混用、乱用。

1、DOM对象和jQuery对象的关系

DOM即文档对象模型,每一份DOM都可以表示成一棵树,可以通过javascript中的getElementByTagName或者getElementById来获取元素节点,像这样得到的DOM元素就是DOM对象,DOM对象可以使用javascript中的方法。

jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。

$('#foo').html(); // 获取id为foo的元素内的html代码,html()是jQuery的方法。 document.getElementById('foo').innerHTML; // 这是DOM对象的方法,与上面的代码等价。

2、jQuery对象和DOM对象的相互转换

(1)jQuery对象转为DOM对象

jQuery对象是一个类似数组的对象,可以通过[index]的方法来得到相应的DOM对象,同时jQuery本身也提供了一个get(index)方法来获取DOM对象。所以,jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)。

var $cr = $('#cr'); // 变量$cr表示一个jQuery对象 var cr = $cr[0]; // 变量cr表示一个DOM对象, 利用[index]方法 cr = $cr.get(0); // 利用jQuery提供的get(index)方法

(2)DOM对象转为jQuery对象

对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,平时用到的jQuery对象都是通过$()函数制造出来的。

var cr = document.getElementById('cr'); var $cr = $(cr); // $cr表示一个jQuery对象

通过以上方法就可以任意的转换jQuery对象和DOM对象,只有转换为了相应的对象,才能使用相应对象中的方法。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
d