02-jQuery对象与js对象区别与转换

一、区别

1、属性和方法

jQuery 对象和 JavaScript 对象都有自己的属性和方法。但是它们所具有的属性和方法是不同的。在 jQuery 中，一个 jQuery 对象包含了一组相匹配的 DOM 元素，并提供了一系列用于操作这些元素的方法。而 JavaScript 对象则可以包含任意类型的属性和方法。

在 jQuery 中，我们可以使用 $() 函数或 jQuery() 函数来获取元素，并返回一个 jQuery 对象。而在 JavaScript 中，则可以使用 document.getElementById() 或 document.querySelector() 方法来获取元素，并返回一个 JavaScript 对象。如下：

//我们可以通过以下代码获取 id 为 myDiv 的 div 元素：
<div id="myDiv">这是一个 div 元素。</div>

//使用 jQuery 对象获取元素的代码如下：
// 获取元素并返回 jQuery 对象
var myObj = $('#myDiv');

//使用 JavaScript 对象获取元素的代码如下：
// 获取元素并返回 JavaScript 对象
var myObj = document.getElementById('myDiv');

在 jQuery 中，我们可以使用 css() 方法来设置元素的样式。而在 JavaScript 中，则可以直接使用 style 属性来设置元素的样式。如下：

//我们可以通过以下代码设置 id 为 myDiv 的 div 元素的背景颜色：
<div id="myDiv">这是一个 div 元素。</div>

//使用 jQuery 对象设置样式的代码如下：
// 使用 jQuery 对象设置样式
$('#myDiv').css('background-color', 'red');

//使用 JavaScript 对象设置样式的代码如下：
// 使用 JavaScript 对象设置样式
document.getElementById('myDiv').style.backgroundColor = 'red';

2、数据类型

        jQuery 对象是一种特殊类型的对象，是对 DOM 元素集合的封装。而 JavaScript 对象则是一般的数据类型，可以包含任意类型的数据，如字符串、数字、数组等。

二、转换方式

1、当需要将 jQuery 对象转换为 JavaScript 对象时，可以使用 get() 方法或者使用 index() 方法获取 jQuery 对象在文档中的索引来实现。

// 获取 id 为 myDiv 的 div 元素，并将 jQuery 对象转换为 JavaScript 对象
var myObj1 = $('#myDiv').get(0);
console.log(myObj1); // 输出： <div id="myDiv">这是一个 div 元素。</div>

var myIndex = $('#myDiv').index('div');
var myObj2 = document.getElementsByTagName('div')[myIndex];
console.log(myObj2); // 输出： <div id="myDiv">这是一个 div 元素。</div>

2、当需要将 JavaScript 对象转换为 jQuery 对象时，可以使用 jQuery 函数包裹 JavaScript 对象。

// 获取 id 为 myDiv 的 div 元素，并将 JavaScript 对象转换为 jQuery 对象
var myObj = document.getElementById('myDiv');
var $myDiv = $(myObj);
console.log($myDiv); // 输出： [<div id="myDiv">这是一个 div 元素。</div>]