jQuery 作为目前世界上使用最广泛的库，全球 80% 以上的网站在用。从2006年发布至今，它是目前最长寿的前端库。本篇文章，我们就来介绍一下关于 jQuery 的设计模式。

通过学习 jQuery 中文文档以及阮一峰的《jQuery设计思想》，并且通过实现简单的 jQuery 设计思想的 DOM库，我能理解到，jQuery是一个高效、精简并且功能丰富的 JavaScript 工具库。其提供的 API 易于使用且兼容众多浏览器。

虽然 jQuery 上手简单，但是要全面掌握并不轻松。

下面我们就来看看关于 jQuery 的部分知识笔记。

jQuery 获取元素

jQuery 的基本思想和主要用法，是“选择某个网页元素，然后对其进行操作”。

使用 jQuery 的第一步，就是将一个选择表达式，放进构造函数 jQuery()(简写为$())，这也是 jQuery 的核心API，然后得到被选中的元素。

表达式可以是CSS选择器：

$(body) // 选择body元素

$('#testId') // 选择ID为testId网页元素

$('div.myClass') // 选择class为myClass的div元素

$('input[name=first]') // 选择name属性等于first的input元素

也可以是 jQuery 特有的表达式：

$('input:radio') // 查找所有单选按钮

$('a:first') // 选择第一个a元素

通过构造函数查找返回匹配的元素集合，对集合操作获取元素：

$('#testId').get(0) // 获取ID为testId的第一个元素

jQuery 链式操作

在上一步中，我们使用到了链式操作来获取元素集合中的某一个元素，接下来我们来看看 jQuery 的链式调用

$('div').text('hi').addClass('red').animate({left: 100})

$(选择器)用于获取对应的元素，但是它却不返回这些元素。相反，它返回一个 jQuery 构造出来的对象，这个对象包含了可以操作这些元素的 API。在这些 API 中，每一步的 jQuery 操作，返回的都是一个 jQuery 对象，所以不同操作可以连在一起。

此外，jQuery 还提供了 .end() 方法

$('div')
    .find('h3')
    .eq(2)
    .html('hello')
    .end() // 退回到选中的所有h3元素那一步
    .eq(0) // 选中第一个元素
    .html('World')

创建元素的方法很简单，只要把新元素直接传入 jQuery 的构造函数就行了。

const $div = $('<div><span>新增的内容</span></div>')

构造函数除了传入选择器查找元素外，还可以传入元素标签字符串进行元素创建。这是通过JS的函数重载实现的。一个函数可以接收不同的参数。具体代码如下

函数重载

$(fn)
$('div')
$(div)
$($(div))
$('span', '#scope1')

jQuery 提供了两组方法，来操作元素在网页中的位置移动。一种方法是直接移动 jQuery() 匹配的元素集合，另一种方法是移动其他元素，使目标元素达到我们需要的位置。

我们继续以上一步创建的 div 元素为例。我们将它移动到 body 元素后面。

第一种方法是使用 .appendTo() ，把 div 移动到 body 后面

$div.appendTo(document.body)

第二种方法是 .append() ，把 body 插入到 div 前面

$(body).append($div)

两种方法效果是一样的，但不同的是操作的视角。还有一个重大的区别是它们的返回的元素集合不同，第一种方法返回 div 元素，第二种方法返回 body 元素。

这种类型的操作方法，一共有四组。

最后，我们可以使用API修改匹配到的元素的属性。

虽然现在很少有新项目使用 jQuery 开发，但是它简洁的API风格，代码的可读性，是值得程序员去学习的。