无论是看 jQuery 官方文档,还是《锋利的jQuery》,里边都提醒一点:
jQuery 对象 DOM 对象不一样,一样的是都可以操作 DOM。
感谢慕课网的 jQuery 课程,提供了一个非常好的例子来说明两者的区别。
首先,创建两个 id 不同的 p 元素:
<p id="demo1"></p>
<p id="demo2"></p>
使用原生 JavaScript 给 demo1 元素添加文本内容和样式
var p = document.getElementById('demo2');
p.innerHTML = "Hello,World";
p.style.color = "red";
通过 document.getElementById 获取 DOM 元素,然后给其 innerHTML 和style 属性赋值,这是直接操作 DOM 处理文本与样式。
使用 jQuery 给 demo2 元素添加文本内容和样式
$(document).ready(function() {
$('#demo1').html('Hello,jQuery!').css('color','green');
});
jQuery则是通过 $('#demo1') 方法获取一个 jQuery 对象,然后通过 jQuery 对象的 html() 和 css() 方法来操作文本与样式。
总结:
1. 原生 JavaScript 通过找到元素直接操作DOM;
2. jQuery 则是通过内置方法操作DOM。