DOM对象和JQuery对象的互换

一.DOM对象和JQuery对象介绍

        1.使用JS中的方法获取页面中的元素返回的对象就是DOM对象。

                 比如使用document.getElement*系列的方法返回的就是DOM对象

        2.JQuery对象就是使用JQuery的方法获取页面中的 元素返回的对象就是jQuery对象

                比如使用$()方法返回对象都是JQuery对象

        JQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合),但是两者不能混用

        DOM对象才能使用DOM对象,JQuery对象才能使用JQuery方法。

以下是错误的用法：

$(function(){     
    alert($("#zh").value;
        //jquery对象不能调用dom方法 （value是DOM方法）				
    a=document.getElementById("zh").val();
        //dom对象不能调用jquery方法  （val()是jQuery方法）
    alert(a);
});

二.DOM对象和JQuery对象的互换

1.DOM对象转JQuery对象:

$(function(){     
			a=document.getElementById("zh");
			var $obj = $(a);   
                // $(document).ready(function(){});就是典型的DOM对象转jQuery对象
			alert($obj.val());
		});

2.jQuery对象转DOM对象：

$(function(){     
			var $li = $('#zh');
                //第一种方法（推荐使用）
                //jQuery对象实际上是一个数据对象，可以通过[index]方法获取得到相应的DOM对象
			alert($li[0].value);
                //第二种方法
                //jQuery对象本身可以通过get(index)方法获取得到相应的DOM对象
			alert($li.get(0).value);
			    //其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。
		});

平时使用过程中,可以在变量面前加$以区分DOM对象和JQuery对象,添加$的为JQuery对象,没有添加的为DOM对象

// 以下方法都是正确的
		// $("#div").html();

		// $("#div")[0].innerTHML;

		// $("#div").eq(0)[0].innerHTML;

		// $("#div").get(0).innerHTML;

		// $(document.getElementById("div")).html();