參考:慕課網(wǎng)
this是JavaScript中的關(guān)鍵字悦陋,指的是當(dāng)前的上下文對象慕爬,簡單的說就是方法/屬性的所有者
下面例子中畅铭,imooc是一個(gè)對象淡溯,擁有name屬性與getName方法,在getName中this指向了所屬的對象imooc
var imooc = {
name:"慕課網(wǎng)",
getName:function(){
//this,就是imooc對象
return this.name;
}
}
imooc.getName(); //慕課網(wǎng)
當(dāng)然在JavaScript中this是動(dòng)態(tài)的譬重,也就是說這個(gè)上下文對象都是可以被動(dòng)態(tài)改變的(可以通過call,apply等方法)拒逮,具體的大家可以查閱相關(guān)資料
同樣的在DOM中this就是指向了這個(gè)html元素對象,因?yàn)閠his就是DOM元素本身的一個(gè)引用
假如給頁面一個(gè)P元素綁定一個(gè)事件:
p.addEventListener('click',function(){
//this === p
//以下兩者的修改都是等價(jià)的
this.style.color = "red";
p.style.color = "red";
},false);
通過addEventListener綁定的事件回調(diào)中臀规,this指向的是當(dāng)前的dom對象滩援,所以再次修改這樣對象的樣式,只需要通過this獲取到引用即可
this.style.color = "red"
但是這樣的操作其實(shí)還是很不方便的塔嬉,這里面就要涉及一大堆的樣式兼容玩徊,如果通過jQuery處理就會(huì)簡單多了,我們只需要把this加工成jQuery對象
換成jQuery的做法:
$('p').click(function(){
//把p元素轉(zhuǎn)化成jQuery的對象
var $this= $(this)
$this.css('color','red')
})
通過把$()方法傳入當(dāng)前的元素對象的引用this谨究,把這個(gè)this加工成jQuery對象恩袱,我們就可以用jQuery提供的快捷方法直接處理樣式了
總體:
this,表示當(dāng)前的上下文對象是一個(gè)html對象胶哲,可以調(diào)用html對象所擁有的屬性和方法畔塔。
$(this),代表的上下文對象是一個(gè)jquery的上下文對象,可以調(diào)用jQuery的方法和屬性值鸯屿。