请注意 JQuery 对象与 DOM 对象 是不同的
<p id="test"></p>
<p id="test2"></p>
var test = document.getElementById('test');
var $test2 = $('#test2');
其中
test是 DOM对象，而$test2是JQuery 对象
但是两者又是可以转换的
1.JQuery 对象转换为 DOM 对象
利用数组下标的方式读取到jQuery中的DOM对象
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
var $div = $('div')//$div 是jquery 对象
console.log($div);
![]()
01.jpg
01.jpg
JQuery 对象是一个类数组对象，可以看到它的数组对象最前面的值就是 DOM 对象，所以可以通过 数组下标的方式将 JQuery 对象转换为 Dom 对象。
<p id="_id"></p>
<p class="_class"></p>
var $pp = $('p');
console.log($pp);
02.jpg
可以看到JQuery 数组对象的前两个值是 DOM 对象，所以可以通过
$pp[0],$pp[1]来分别获得<p id="_id"></p>,<p class="_class"></p>的两个DOM 对象。
<span id="test1"></span>
<i class="test2"></i>
var $test1 = $('#test1');
console.log($test1);
var $test2 = $('.test2');
console.log($test2);
04.jpg
可以通过下标 0 来分别获取，
id和class
通过的JQuery 自带的 get() 的方法
jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
- 将 DOM 对象转换为 JQuery 对象
通过
$(DOM)的方法可以将一个 JQuery 对象转换为一个 Dom 对象。
如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
var div = document.getElementsByTagName('div');
var div1 = div[1];
console.log(div1);
console.log($(div1));
$(div1).css('color','gold');
05.jpg
