js中的DOM对象和 jQuery对象比较-优快云博客

本文详细解析了jQuery对象与原生DOM对象之间的主要区别，包括如何在两者间进行转换，以及通过实例展示了如何使用jQuery实现隔行换色的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，二者的区别

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

二，二者的相互转换

1、 DOM 对象转为 jQuery对象：

$(js对象);

2、jQuery对象转为 DOM 对象：

 jquery对象[index];      //方式1（推荐）

  jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。

举例：

三.隔行换色

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函数
        jQuery(function () {
            var jqLi = $("li");
            for (var i = 0; i < jqLi.length; i++) {
                if (i % 2 === 0) {
                    //jquery对象，转换成了js对象
                    jqLi[i].style.backgroundColor = "pink";
                } else {
                    jqLi[i].style.backgroundColor = "yellow";
                }
            }
        });
    </script>
</head>
<body>
<ul>
    <li>清风徐来</li>
    <li>清风徐来</li>
    <li>清风徐来</li>
    <li>清风徐来</li>
    <li>清风徐来</li>
    <li>清风徐来</li>
</ul>
</body>
</html>