JQuery中的特殊选择器--this
this是JavaScript中的關(guān)鍵字，指的是當(dāng)前的上下文對(duì)象，簡(jiǎn)單的說(shuō)就是方法/屬性的所有者
下面例子中，imooc是一個(gè)對(duì)象，擁有name屬性與getName方法,在getName中this指向了所屬的對(duì)象imooc
var ch = {name:"中國(guó)",getName:function(){//this,就是ch對(duì)象return this.name;} } ch.getName();//中國(guó)當(dāng)然在JavaScript中this是動(dòng)態(tài)的，也就是說(shuō)這個(gè)上下文對(duì)象都是可以被動(dòng)態(tài)改變的(可以通過(guò)call,apply等方法)，具體的大家可以查閱相關(guān)資料
同樣的在DOM中this就是指向了這個(gè)html元素對(duì)象，因?yàn)閠his就是DOM元素本身的一個(gè)引用
假如給頁(yè)面一個(gè)P元素綁定一個(gè)事件:
p.addEventListener('click',function(){//this === p//以下兩者的修改都是等價(jià)的this.style.color = "red";p.style.color = "red"; },false);通過(guò)addEventListener綁定的事件回調(diào)中，this指向的是當(dāng)前的dom對(duì)象，所以再次修改這樣對(duì)象的樣式，只需要通過(guò)this獲取到引用即可。
this.style.color = "red"但是這樣的操作其實(shí)還是很不方便的，這里面就要涉及一大堆的樣式兼容，如果通過(guò)jQuery處理就會(huì)簡(jiǎn)單多了，我們只需要把this加工成jQuery對(duì)象
換成jQuery的做法：
$('p').click(function(){//把p元素轉(zhuǎn)化成jQuery的對(duì)象var $this= $(this) $this.css('color','red') })通過(guò)把$()方法傳入當(dāng)前的元素對(duì)象的引用this，把這個(gè)this加工成jQuery對(duì)象，我們就可以用jQuery提供的快捷方法直接處理樣式了
總體來(lái)說(shuō)：
this，表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象，可以調(diào)用html對(duì)象所擁有的屬性和方法。
$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象，可以調(diào)用jQuery的方法和屬性值。
接下來(lái)好好理解一下下面代碼：
<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" href="imooc.css" type="text/css"><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head><body><h2>特殊選擇器this</h2><p id="test1">點(diǎn)擊測(cè)試：通過(guò)原生DOM處理</p><p id="test2">點(diǎn)擊測(cè)試：通過(guò)原生jQuery處理</p><script type="text/javascript">var p1 = document.getElementById('test1')p1.addEventListener('click',function(){//直接通過(guò)dom的方法改變顏色this.style.color = "red"; },false);</script><script type="text/javascript">$('#test2').click(function(){//通過(guò)包裝成jQuery對(duì)象改變顏色$(this).css('color','blue');})</script></body></html>總結(jié)
以上是生活随笔為你收集整理的JQuery中的特殊选择器--this的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JQiery选择器中的表单元素
- 下一篇： .attr()与.removeAttr(