JQuery中的特殊選擇器--this
阿新 • • 發佈：2019-01-24
相信很多剛接觸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>