JQuery中的特殊選擇器--this

相信很多剛接觸jQuery的人,很多都會對$(this)和this的區別模糊不清,那麼這兩者有什麼區別呢?下面我們一起來看一下!

this是JavaScript中的關鍵字,指的是當前的上下文對象,簡單的說就是方法/屬性的所有者

下面例子中,imooc是一個對象,擁有name屬性與getName方法,在getName中this指向了所屬的對象imooc

var ch = {
    name:"中國",
    getName:function(){
        //this,就是ch對象
        return this.name;
    }
}
ch.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的方法和屬性值。

接下來好好理解一下下面代碼:

<!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">點擊測試:通過原生DOM處理</p>

    <p id="test2">點擊測試:通過原生jQuery處理</p>

    <script type="text/javascript">
        var p1 = document.getElementById('test1')
        p1.addEventListener('click',function(){
            //直接通過dom的方法改變顏色
            this.style.color = "red"; 
        },false);
    </script>

    <script type="text/javascript">
        $('#test2').click(function(){
            //通過包裝成jQuery對象改變顏色
            $(this).css('color','blue');
        })
    </script>

</body>

</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章