一、区别
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>]