DOM对象与jquery对象之间的关系对比

源程序：

	


解析：
(1)DOM与jquery获取节点对象的体现形式
var divdom = document.getElementById("parent");
alert("dom对象为："+divdom);
 

var divjquery = $("#parent");
alert("jqeury对象："+divjquery);
 

alert("jquery对象转DOM对象通过索引[]方式：" + divjquery[0]);
 

alert("jquery对象转DOM对象通过eq方式：" + divjquery.eq(0));
 

alert("jquery对象转DOM对象通过eq方式和索引方式：" + divjquery.eq(0)[0]);
 

(2)Jquery对象与DOM对象之间的比较

alert('$("#parent")=$("#parent")::'+($("#parent")==$("#parent")).toString());

alert('$("#parent")==divdom::'+($("#parent")==divdom).toString());
 

alert("divdom==divdom::"+(divdom==divdom).toString());
 
alert('$("#parent")[0]==divdom::'+($("#parent")[0]==divdom).toString());
 
alert('$("#parent").eq(0)==divdom::'+($("#parent").eq(0)==divdom).toString());
 

alert('$("#parent").eq(0)==$("#parent").eq(0)::'+($("#parent").eq(0)==$("#parent").eq(0)).toString());

 
alert('$("#parent").eq(0)[0]==divdom::'+($("#parent").eq(0)[0]==divdom).toString());
 
以上结果表示：
只有DOM对象才可以相互比较是否相等，因为通过DOM方式获取的都是DOM节点。
Jquery对象之间是无法进行比较的，因为jquery对象是将DOM对象进行了封装，是一个数组集合。而通过jquery获取对象的方法是通过$()形式获取到的，

$符号是jQuery类的一个别称，$()构造了一个jQuery对象,$()可以叫做jQuery的构造函数。jquery的$()是一个构造方法，生成的是jquery对象实例，类似java中的new，所以哪怕是$(“#parent”)与$(“#parent”)比较也是不想等的，因为他们完全由$()构造器生成的两个新的jquery对象，类似java中的
new Person()==new Person()==>结果为false一样的道理。
总而言之，jquery对象之间不能比较，只有DOM对象之间可以比较，若是jquery对象与DOM对象之间进行比较，则必须将jquery对象转成DOM之后，

然后再与其它DOM对象之间进行比较。

下为应用jquery一个较常见的需求

$(function () {

var lis = $(".li");  // 多个li标签

lis.click(function(){

for (var i = 0;i < lis.length; i++){

if ($(lis[i]) == $(this)){  //错误用法

// if (lis[0] ==this){  // 正确用法

alert("当前li");

} else {

alert("其它li");

);

})

 

代码中$(lis[i]) == $(this)始终为false，原来jquery的$()是一个构造方法，生成的是jquery对象实例，类似java中的new，$(lis[0])和$(this)均会生成一个新的jquery对象，所以不等。

比较 lis[0] == this 就可以了，这两个都是页面内原生的DOM对象。

 

event.target 属性返回哪个 DOM 元素触发了事件，虽然event.target是jquery属性，但是却返回DOM元素。对比较 event.target 和 this 是非常有用的，以便判断事件是否因事件冒泡被处理。

 

$("#parent").click(function(e) {     alert("父：：" + e.target); });