jQuery 对象 VS DOM对象

无论是看 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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,451评论 0 44
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,610评论 0 11
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,107评论 0 8
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,679评论 18 503
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 838评论 0 8