JQuery 对象与 DOM 对象

请注意 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

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对象的属性

2. 将 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