jQuery選擇器之特殊選擇器this
相信很多剛接觸jQuery的人,很多都會對$(this)和this的區別模糊不清,那麽這兩者有什麽區別呢?
this是JavaScript中的關鍵字,指的是當前的上下文對象,簡單的說就是方法/屬性的所有者
下面例子中,imooc是一個對象,擁有name屬性與getName方法,在getName中this指向了所屬的對象imooc
var imooc = {
name:"慕課網",
getName:function(){
//this,就是imooc對象
return this.name;
}
}
imooc.getName(); //慕課網
當然在JavaScript中this是動態的,也就是說這個上下文對象都是可以被動態改變的(可以通過call,apply等方法),具體的大家可以查閱相關資料
同樣的在DOM中this就是指向了這個html元素對象,因為this就是DOM元素本身的一個引用
假如給頁面一個P元素綁定一個事件:
p.addEventListener(‘click‘,function(){
//this === p
//以下兩者的修改都是等價的
this.style.color = "red";
p.style.color = "red";
},false);
通過addEventListener綁定的事件回調中,this指向的是當前的dom對象,所以再次修改這樣對象的樣式,只需要通過this獲取到引用即可
this.style.color = "red"
但是這樣的操作其實還是很不方便的,這裏面就要涉及一大堆的樣式兼容,如果通過jQuery處理就會簡單多了,我們只需要把this加工成jQuery對象
換成jQuery的做法:
$(‘p‘).click(function(){
//把p元素轉化成jQuery的對象
var $this= $(this)
$this.css(‘color‘,‘red‘)
})
通過把$()方法傳入當前的元素對象的引用this,把這個this加工成jQuery對象,我們就可以用jQuery提供的快捷方法直接處理樣式了
總體:
this,表示當前的上下文對象是一個html對象,可以調用html對象所擁有的屬性和方法。
$(this),代表的上下文對象是一個jquery的上下文對象,可以調用jQuery的方法和屬性值。
<p id="test2">點擊測試:通過原生jQuery處理</p>
<script type="text/javascript">
$(‘#test2‘).click(function(){
$(this).css(‘color‘,‘pink‘)
})
</script>
綜合案例
是一個綜合的案例,主要就是展示選擇器的使用,案例中的選擇器是相對比較復雜的,很多時候我們不需要寫這麽復雜的選擇器,但是案例是為了展示整個選擇器的知識點的運用
右邊是一段文本,我們通過不同的選擇器給指定的文字賦予顏色
分析一段復雜的選擇器:
$("#menu_con div.tag dd > p:first-child")
這段組合的選擇器表達式用到了幾個之前學到的選擇器:ID、Class、元素、層級、子元素篩選器
當用到篩選器 :first-child的時候我們就知道了,這肯定是一組合集,意味著p元素是有多個,而且是分布在不同父元素dd裏面的
jQuery選擇器之特殊選擇器this