1、jQuery對象轉(zhuǎn)化成DOM對象
jQuery庫在本質(zhì)上還是JavaScript代碼，它只是對JavaScript語言進(jìn)行包裝處理，為的是提供更好更方便快捷的DOM處理與開發(fā)中經(jīng)常使用的功能。我們使用jQuery的同時(shí)也能混合JavaScript原生代碼一起使用。在很多場景中，我們需要jQuery與DOM能夠相互的轉(zhuǎn)換，它們都是可以操作的DOM元素，jQuery是一個(gè)類數(shù)組對象，而DOM對象就是一個(gè)單獨(dú)的DOM元素
jQuery是一個(gè)類數(shù)組對象，因此我們可以利用數(shù)組下標(biāo)的方式讀取到j(luò)Query中的DOM對象：
- HTML代碼
<div>1</div>
<div>2</div>
<div>3</div>
- JavaScript代碼
var $div = $('div') //jQuery對象,找到所有的div元素（三個(gè)）
var div1 = $div[0] //轉(zhuǎn)化成DOM對象，通過數(shù)組下標(biāo)索取到第一個(gè)div元素
div1.style.color = 'red' //操作dom對象的屬性，修改第一個(gè)div元素的顏色
查看效果:Github Page
查看源碼： Github
2、DOM對象轉(zhuǎn)化成jQuery對象
對于一個(gè)DOM對象，只需要用$()把DOM對象包裝起來，便可以獲得一個(gè)jQuery對象，方法：$(DOM對象)，就可以調(diào)用jQuery的方法啦
- HTML代碼
<div>1</div>
<div>2</div>
<div>3</div>
- JavaScript代碼
var div = document.querySelector('div') //DOM獲取對象
var $div = $(div) //通過$(dom對象)轉(zhuǎn)換為jQuery對象
var $first = $div.first(); //調(diào)用jQuery方法，找到第一個(gè)div元素
$first.css('color','red') //為第一個(gè)元素設(shè)置顏色
查看效果：Github Page
查看源碼：Github
3、jQuery選擇器之特殊選擇器this
以前剛接觸jQuery的時(shí)候，對$(this)和this的區(qū)別模糊不清，那么這兩者有什么區(qū)別呢？
我們知道在JavaScript中this是指當(dāng)前上下文的對象，同時(shí)這個(gè)上下文的對象是可以被動(dòng)態(tài)的改變的（call、apply等方法），同樣在原生的DOM中this指向的也是當(dāng)前的html元素對象。下面看一個(gè)例子：
- 給元素p綁定一個(gè)點(diǎn)擊事件
p.addEventListener('click',function(){
this.style.color = 'red' //這里的this就是當(dāng)前的元素對象p
},false)
- jquery的處理方法
$('p').on('click',function(){
var $this = $(this)
$this.css('color','red') //將this轉(zhuǎn)換為jquery對象，這樣可以調(diào)用jQuery的方法和屬性值。
})
查看效果：Github Page
查看源碼：Github
總結(jié)：
|--this，表示當(dāng)前的上下文對象是一個(gè)html對象，可以調(diào)用html對象所擁有的屬性和方法。
|--$(this),代表的上下文對象是一個(gè)jquery的上下文對象，可以調(diào)用jQuery的方法和屬性值。
