DOM对象:通过Js中的getElementsByTagName或者getElementsById来获取元素节点,这样的元素就是DOM对象。
jQuery对象:通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,其可以使用jQuery里的方法。例如:
$("#test").html() //获取ID为test的元素内的html代码。其中.html()是jQuery里的方法
这段代码等同于用:
document.getElementById("test").innerHTML;
在jQuery对象中无法使用DOM对象的任何方法。同样的DOM对象中也不能使用jQuery对象中的方法。
在讨论jQuery对象和DOM对象的相互转换之前,先约定好定义变量的风格。如果获取的是jQuery对象,那么在变量前面加上$,例如:
var $varible = jQuery对象;
如果获取的是DOM对象,则定义如下:
var varible = DOM对象;
jQuery对象转成DOM对象
jQuery对象不能使用DOM中的方法,但如果对jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不使用DOM对象的时候,有两种方法,即[index]和get(index)。
(1)jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象。
jQuery的代码如下:
<body>
<p>my</p>
<p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
<p>my</p>
<p>my</p>
<script>
var $cr = $("p"); //jQuery对象
var cr = $cr[0]; //第一种方法转成DOM对象
var ct = $cr.get(1); //第一种方法转成DOM对象
cr.innerHTML = "tu"; //检测是否转换成功,可以用DOM方法,输出结果为第一个my改成了tu
ct.innerHTML = "tt"; //输出结果为第二个my改成了tt
</script>
</script>
</body>
(2)DOM对象转换为jQuery对象:
对于一个DOM对象,只需要用$()
把DOM对象给包装起来,就可以获得一个jQuery对象了,方式为$(DOM对象)
。
jQuery代码如下:
<body>
<p>my</p>
<p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
<p>my</p>
<p>my</p>
<script>
var cr = document.getElementsByTagName("p"); //DOM对象
var $cr = $(cr); //转成jQuery对象
$cr.eq(0).html("tu"); //检测是否转换成功,可以用jquery方法,输出结果为第一个my改成了tu
</script>
</script>
</body>
最后再次强调,DOM对象才能使用DOM中的方法,jQuery对象不可以使用DOM中的方法,但jQuery对象提供了一套更加完善的工具用于操作DOM。
注意:平时用到的jQuery对象都是通过$()
函数制造出来的,$()
函数就是一个jQuery对象的制造工厂。