jQuery教程04-jQuery_this选择器
生活随笔
收集整理的這篇文章主要介紹了
jQuery教程04-jQuery_this选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery選擇器之特殊選擇器this
相信很多剛接觸jQuery的人，很多都會對$(this)和this的區別模糊不清，那么這兩者有什么區別呢？
1、JS中的this
this是JavaScript中的關鍵字，指的是當前的上下文對象，簡單的說就是方法/屬性的所有者
下面例子中，data是一個對象，擁有name屬性與getName方法,在getName中this指向了所屬的對象data
var data = {name:"老虎",getName:function(){//this,就是數據對象return this.name;} } data.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對象
2、jQuery中的this
換成jQuery的做法：
$('p').click(function(){//把p元素轉化成jQuery的對象var $this= $(this) $this.css('color','red') })通過把$()方法傳入當前的元素對象的引用this，把這個this加工成jQuery對象，我們就可以用jQuery提供的快捷方法直接處理樣式了
3、整體代碼實現
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html"; charset="utf-8" /><title>jQuery_this選擇器</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.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>總結
以上是生活随笔為你收集整理的jQuery教程04-jQuery_this选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 减治法在查找算法中的应用（JAVA）--
- 下一篇： 这个故事告诉你，拥有吃不胖的超能力就无忧