详谈jQuery中的this和$(this)
网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而论在jQuery调用成员函数时,this就是指向dom对象。
$(this)指向jQuery对象是无可厚非的,但this就是指向dom对象,这个是因为jQuery做了特殊的处理。
在创建dom的jQuery对象时,jQuery不仅仅为dom创建一个jQuery对象,而且还将dom存储在所创建对象的数组中。
elem=document.getElementById(match[2]);
if(elem&&elem.parentNode){
this.length=1;
this[0]=elem;
}
this.context=document;
this.selector=selector;
returnthis;
this[0]=elem这条语句就是实现对象数组。所以javascript是很有意思的语言,使用this访问时,可以访问它所指向的对象的成员函数,而其实this又是一个对象数组。其存放的是dom对象。
先看看$("p").each()--循环
each:function(callback,args){
returnjQuery.each(this,callback,args);
}
看了each函数的调用大家应该明白,jQuery.each(this,callback,args);调用的是对象数组,而对象的数组存储的是dom对象,因此在callback函数中的this自然是dom对象了
再看看$("p").hide()--成员函数
hide:function(){
returnshowHide(this);
},
functionshowHide(elements,show){varelem,display,
values=[],
index=0,
length=elements.length;
for(;index<length;index++){
elem=elements[index];
if(!elem.style){
continue;
}
values[index]=jQuery._data(elem,"olddisplay");
if(show){
//Resettheinlinedisplayofthiselementtolearnifitis
//beinghiddenbycascadedrulesornot
if(!values[index]&&elem.style.display==="none"){
elem.style.display="";
}
//Setelementswhichhavebeenoverriddenwithdisplay:none
//inastylesheettowhateverthedefaultbrowserstyleis
//forsuchanelement
if(elem.style.display===""&&isHidden(elem)){
values[index]=jQuery._data(elem,"olddisplay",css_defaultDisplay(elem.nodeName));
}
}else{
display=curCSS(elem,"display");
if(!values[index]&&display!=="none"){
jQuery._data(elem,"olddisplay",display);
}
}
}
//Setthedisplayofmostoftheelementsinasecondloop
//toavoidtheconstantreflow
for(index=0;index<length;index++){
elem=elements[index];
if(!elem.style){
continue;
}
if(!show||elem.style.display==="none"||elem.style.display===""){
elem.style.display=show?values[index]||"":"none";
}
}
returnelements;
}
从上面的代码可以看出hide行数其实调用的是showHide,而传入的第一个参数this,并不是dom对象,而是jQuery对象数组,因此showHide函数通过循环此对象数组获取每一个dom对象。
最后看看$("p").bind()--事件
bind:function(types,data,fn){
returnthis.on(types,null,data,fn);
},
on:function(types,selector,data,fn,/*INTERNAL*/one){
//此部分代码省略
returnthis.each(function(){
jQuery.event.add(this,types,fn,data,selector);
});
},
bind函数调用的是on函数,而on函数又是通过each函数实现了jQuery.event.add。因此jQuery.event.add(this中的this也就是dom对象了。所以事件中的this也就是dom对象了。
以上就是个人对于jQuery中this与$(this)的理解了,如有什么纰漏,请联系我或者给我留言