1、jQuery对象转化成DOM对象
jQuery库在本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素
jQuery是一个类数组对象，因此我们可以利用数组下标的方式读取到jQuery中的DOM对象：
- HTML代码
<div>1</div>
<div>2</div>
<div>3</div>
- JavaScript代码
var $div = $('div') //jQuery对象,找到所有的div元素（三个）
var div1 = $div[0] //转化成DOM对象，通过数组下标索取到第一个div元素
div1.style.color = 'red' //操作dom对象的属性，修改第一个div元素的颜色
查看效果:Github Page
查看源码： Github
2、DOM对象转化成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，便可以获得一个jQuery对象，方法：$(DOM对象)，就可以调用jQuery的方法啦
- HTML代码
<div>1</div>
<div>2</div>
<div>3</div>
- JavaScript代码
var div = document.querySelector('div') //DOM获取对象
var $div = $(div) //通过$(dom对象)转换为jQuery对象
var $first = $div.first(); //调用jQuery方法，找到第一个div元素
$first.css('color','red') //为第一个元素设置颜色
查看效果：Github Page
查看源码：Github
3、jQuery选择器之特殊选择器this
以前刚接触jQuery的时候，对$(this)和this的区别模糊不清，那么这两者有什么区别呢？
我们知道在JavaScript中this是指当前上下文的对象，同时这个上下文的对象是可以被动态的改变的（call、apply等方法），同样在原生的DOM中this指向的也是当前的html元素对象。下面看一个例子：
- 给元素p绑定一个点击事件
p.addEventListener('click',function(){
this.style.color = 'red' //这里的this就是当前的元素对象p
},false)
- jquery的处理方法
$('p').on('click',function(){
var $this = $(this)
$this.css('color','red') //将this转换为jquery对象，这样可以调用jQuery的方法和属性值。
})
查看效果：Github Page
查看源码：Github
总结：
|--this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
|--$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
