源程序:
<div id="parent" class="parent">
<div id="child" class="child"></div>
</div>
解析:
(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);
});