JavaScript的this 与JQuery的$(this)
首先,我们先来了解一下,javascript中的this,因为在JS中,每一个function都是一个对象,所以这里var temp=this指的是function当前的对象。this是JS中的一个关键字,指的是当前的上下文对象,简单来说其实就是方法/属性的所有者。它代表的是函数运行的时候自动生成一个内部对象,只能在函数内部使用。
1)函数指向所属对象时
我们先来举个例子:student是一个对象,拥有name属性和getName方法,在getName中this其实就是指向了所属的对象student。
var student={
name="小红";
getName:function(){
return this.name;
//this,就是student对象
}
}
student.getName(); //小红
而且在JS中,this是动态的,也就是说这个上下文对象都是可以被动态改变的。
2)函数没有所属的对象时,会指向的是全局对象
3)构造器中的this:指向新对象
在javascript中,一般是通过new关键字来调用构造函数的,但是如果我们去创建对象的时候或者数组的时候,使用的是字面量表达式创建时,是不会调用构造函数来进行创建的,一般来说,使用new关键字来构造函数的时候,此时的this会绑定在该新的对象上。
假设我们给页面中的一个元素绑定一个事件
a.addEventListener(‘click’,function(){
//a==this
this.style.color="red";
a.style.color="red";
},false);
//这里的false是默认值,意思是事件句柄在冒泡阶段执行
通过addEventListener绑定的事件回调中,this指向的是当前的dom对象。还有一点需要注意的是IE8以及以下的版本都是不支持addEventListener这个函数的。我们可以考虑在这些浏览器中使用attachEvent来代替这个函数。
接下来我们来看看jQuery中如何使用this,其实在jQuery中使用this更加方便,简单。
$('p').click(function(){
$(this).css('color','red');
});
//$(this)==$(''p'');
通过把$()方法传入当前的元素对象的引用this,把这个this加工成jQuery对象,然后我们就可以使用jQuery提供的方法进行处理。
小结:
this,表示的是当前上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jQuery的上下文对象,可以调用jQuery的方法和属性。