jQuery選取器之特殊選取器this

標籤：而且   組合   對象   分析   return   his   font   jquery選取器   reg   

相信很多剛接觸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