使用 Ctrl+D 可将网站添加到书签
 
当前位置：码云笔记 > 前端开发 > 学习 jQuery > [jQuery教程]jQuery对象与DOM对象之间的相互转换方法（一）
码云码云 学习 jQuery

[jQuery教程]jQuery对象与DOM对象之间的相互转换方法（一）

目录
文章目录隐藏
  1. 初识 jQuery
  2. 什么是 jQuery？
  3. jQuery 如何安装
  4. 下载 jQuery
  5. jQuery 对象与 DOM 对象
  6. 标准的 JavaScript 如何处理 DOM
  7. jQuery 如何操作 DOM
  8. jQuery 对象转化成 DOM 对象
  9. DOM 对象转化成 jQuery 对象

[jQuery 教程]jQuery 对象与 DOM 对象之间的相互转换方法（一）

初识 jQuery

jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程，很容易学习。jQuery 库可以通过一行简单的标记被添加到网页中。

在学之前需要具备以下知识：

  • HTML
  • CSS
  • JavaScript

什么是 jQuery？

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。

jQuery 库包含以下功能：

1、html 的元素选取

2、html 的元素操作

3、htmldom 遍历和修改

4、js 特效和动画效果

5、css 操作

6、html 事件操作

7、ajax 异步请求方式

提示：除此之外，Jquery 还提供了大量的插件。

如果开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。我们这本课程为了兼容性问题，使用的是 1.9 版本。jQuery 每一个系列版本分为：压缩版(compressed) 与 开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。

你还可以通过条件注释在使用 IE6/7/8 时只包含进 1.9。

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

jQuery 如何安装

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version – 用于实际的网站中，已被精简和压缩。
Development version – 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <title>环境搭建</title>
</head> 
<body>
    <script> alert($) </script>
</body>
</html>

alert 弹出以下信息，说明环境已经搭建成功了。

jquery 安装
提示： 将下载的文件放在网页的同一目录下，就可以使用 jQuery。

您是否很疑惑为什么我们没有在 <script> 标签中使用 type=”text/javascript” ？

在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

jQuery 对象与 DOM 对象

新人在学习 jQuery 前，我们需要明白一点：jQuery 对象与 DOM 对象是不一样的。可能你一时半会分不清楚哪些是 jQuery 对象，哪些是 DOM 对象，不用担心，码云笔记会为你详细说明，下面重点介绍一下 jQuery 对象，以及两者相互间的转换。

我们通过一个简单的小例子，简单区分下 jQuery 对象与 DOM 对象：

<p id="mybj"></p>

我们要获取页面上这个 id 为 mybj 的 p 元素，然后给这个文本节点增加一段文字：“您好！通过码云笔记学习 jQuery 才是最佳的途径”，并且让文字颜色变成蓝色。

jQuery 对象与 DOM 对象之间的相互转换方法

标准的 JavaScript 如何处理 DOM

先看看通过标准的 JavaScript 是怎么处理：

var p = document.getElementById('mybj');
p.innerHTML = '您好！通过码云笔记学习 jQuery 才是最佳的途径';
p.style.color = 'blue';

通过原生 DOM 模型提供的 document.getElementById(“mybj”) 方法获取的 DOM 元素就是一个 DOM 对象，再通过 innerHTML 与 style 属性处理文本与颜色。

jQuery 如何操作 DOM

var $p = $('#mybj');
$p.html('您好！通过码云笔记学习 jQuery 才是最佳的途径').css('color','blue');

通过$(‘#mybj’)方法会得到一个$p 的 jQuery 对象，$p 是一个类数组对象。这个对象里面包含了 DOM 对象的信息，然后封装了很多操作方法，调用自己的方法 html 与 css，得到的效果与标准的 JavaScript 处理结果是一致的。

通过标准的 JavaScript 操作 DOM 与 jQuery 操作 DOM 的对比，我们观察发现：

  • 通过 jQuery 方法包装后的对象，是一个类数组对象。它与 DOM 对象完全不同，唯一相似的是它们都能操作 DOM。
  • 通过 jQuery 处理 DOM 的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个 DOM 节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过 jQuery 提供的 API 进行开发，代码也会更加精短。

PS：上面是带大家对通过标准的 JavaScript 操作 DOM 与 jQuery 操作 DOM 的简单入门了解，后面还会有深入的讲解。

jQuery 对象转化成 DOM 对象

jQuery 库本质上还是 JavaScript 代码，它只是对 JavaScript 语言进行包装处理，为的是提供更好更方便快捷的 DOM 处理与开发中经常使用的功能。我们使用 jQuery 的同时也能混合 JavaScript 原生代码一起使用。在很多场景中，我们需要 jQuery 与 DOM 能够相互的转换，它们都是可以操作的 DOM 元素，jQuery 是一个类数组对象，而 DOM 对象就是一个单独的 DOM 元素。

那么，如何把 jQuery 对象转成 DOM 对象？

一、利用数组下标的方式读取到 jQuery 中的 DOM 对象

HTML 代码

<p id="mybj"></p><div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript 代码

var $div = $('div') //jQuery 对象
var div = $div[0] //转化成 DOM 对象
div.style.color = 'red' //操作 dom 对象的属性

用 jQuery 找到所有的 div 元素（3 个），因为 jQuery 对象也是一个数组结构，可以通过数组下标索引找到第一个 div 元素，通过返回的 div 对象，调用它的 style 属性修改第一个 div 元素的颜色。这里需要注意的一点是，数组的索引是从 0 开始的，也就是第一个元素下标是 0

二、通过 jQuery 自带的 get()方法

jQuery 对象自身提供一个.get() 方法允许我们直接访问 jQuery 对象中相关的 DOM 节点，get 方法中提供一个元素的索引：

var $div = $('div') //jQuery 对象
var div = $div.get(0) //通过 get 方法，转化成 DOM 对象
div.style.color = 'red' //操作 dom 对象的属性

其实我们翻开源码，看看就知道了，get 方法就是利用的第一种方式处理的，只是包装成一个 get 让开发者更直接方便的使用。

DOM 对象转化成 jQuery 对象

相比较 jQuery 转化成 DOM，开发中更多的情况是把一个 dom 对象加工成 jQuery 对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。

如果传递给$(DOM)函数的参数是一个 DOM 对象，jQuery 方法会把这个 DOM 对象给包装成一个新的 jQuery 对象

通过$(dom)方法将普通的 dom 对象加工成 jQuery 对象之后，我们就可以调用 jQuery 的方法了

HTML 代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript 代码

var div = document.getElementsByTagName('div'); //dom 对象
var $div = $(div); //jQuery 对象
var $first = $div.first(); //找到第一个 div 元素
$first.css('color', 'red'); //给第一个元素设置颜色

通过 getElementsByTagName 获取到所有 div 节点的元素，结果是一个 dom 合集对象，不过这个对象是一个数组合集(3 个 div 元素)。通过$(div)方法转化成 jQuery 对象，通过调用 jQuery 对象中的 first 与 css 方法查找第一个元素并且改变其颜色。

通过上面提供的的方法，在实际操作中就可以任意的相互转换 jquery 对象和 DOM 对象。

友情提示,只 DOM 对象才能使用 DOM 方法，jquery 对象不能使用 DOM 中的方法，但 jquery 对象提供了一套更加完善的工具用于操作 DOM。

推荐阅读：《[jQuery 教程]jQuery 选择器（二）》

「点点赞赏，手留余香」

赞 14 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » [jQuery教程]jQuery对象与DOM对象之间的相互转换方法（一）

码云 会员

分享到：

相关推荐

发表回复