Jquery学习3---关于jQuery对象和Dom对象

 

        Jquery对象和Dom对象是两个不同的概念，因此两者不能相互的调用。dom对象调用的是dom组件和javascript定义的方法和属性，而jquery对象只能调用jquery定义的方法和属性，因此一定要明白对象的类型，然后调用该对象类型所具有的方法和属性。

当然了，虽然两者概念不同，不是同类型的对象，但是可以相互转换。

 

1.       dom对象转换为jquery对象

dom对象转换为jquery对象使用的是jQuery()函数，例如

var domObj = document.getElementsByTagName(“span”)[0];

此时domObj就是一个Dom对象，指向的是网页中第一个span标签这个dom对象。

Var jqueryObj = $(domObj);

或者 var jqueryObj = jQuery(domObj);

此时使用jQuery()；函数就将domObj这个DOM对象转换成了jqueryObj这个jquery对象。此时就可以使用该对象调用jquery定义的方法和属性来定义span这个元素的显示样式了。

 

2.       jquery对象转换为DOM对象

jQuery对象实际上就是一个javascript数据集合，因此要得到Dom对象，那么就可以从jquery对象中选取某一个元素，获得的这个元素就是一个dom对象，然后就可以使用dom对象来操作html了。

方法一：对于上面的jqueryObj，使用 var spanObj =jqueryObj [0];就将jquery对象转化为了dom对象。

例如： 

 

               Body里的内容如下：

<div><span>文本块1</span></div>

<p><span>文本块2</span></p>

 

Javascript代码：

<script language="javascript" type="text/javascript">

       var domObj = document.getElementsByTagName("span")[0];

       var jqueryObj = $(domObj);

       var domobj = jqueryObj[0];

       domobj.style.color='blue';

</script>

效果图如下：

 

方法二：使用jquery对象的get()方法也可以实现同样的效果。

<script language="javascript" type="text/javascript">
	var domObj = document.getElementsByTagName("span")[0];
	var jqueryObj = $(domObj);
	var domobj = jqueryObj.get(0);
	domobj.style.color='blue';
</script>