邂逅jQuery库 - 技术栈

写在前面

大家好，我是一溪风月🥸，一名前端程序员，目标是成为一名独立开发，这两天写代码的时候有点红温了，因为下面的这个事情，导致我我要学习一下jQuery要不然无法进行老代码的维护工作了，但是作为一个JS的爱好者，咱们工作中遇到问题是绝对不能退缩的，所以让我们大步向前，增加自身的实力，做更好的自己！这篇文章我们就从入门到精通把jQuery核心知识给撸一遍，从根本上解决这个问题，这篇文章的内容结构会按照如下的内容来进行编排讲解学习,为了方便阅读和减少学习压力以下知识会分成多篇。

一.认识jQuery

jQuery是一个快速，小型且功能丰富的JavaScript库，官网对jQuery的描述

使HTML文档遍历、操作、事件处理、动画和Ajax 之类的事情变得更加简单。
具有易于使用的API，可在多种浏览器中使用。
jQuery 结合多功能性和可扩展性，改变了数百万人编写JavaScript 的方式。
jQuery官网：jquery.com/

二.库和框架的区别

随着JavaScript的普及，以及越来越多的人使用JavaScript来构建网站和应用程序，JavaScript的社区认识到代码中存在非常多相似的逻辑是可以复用的，因此社区就开始对这些相同的逻辑的代码封装到一个JavaScript文件中，这个封装好的JavaScript文件就可称为JavaScript库或JavaScript框架，那么什么是库，什么是框架哪？

库（library）

JavaScript库是一个预先编写好并实现了一些特定功能的代码片段的集合
一个库中会包含许多的函数、变量等，可根据需求引入到项目中使用
一些常见的库有jQuery、Day.js、Lodash和React等。

框架（framework）

JavaScript框架是一个完整的工具集，可帮助塑造和组织您的网站或应用程序
提供一个结构来构建整个应用程序，开发人员可以在结构的规则内更安全、更高效地工作
一些更常见的框架有：Bootstrap、Angular、Vue、Next.js等。

三.jQuery的优点和缺点

jQuery 优点：

易于学习：相对于其它的前端框架，jQuery 更易于学习，它支持JavaScript 的编码风格
少写多做（Write less, do more）
优秀的API 文档：jQuery 提供了优秀的在线API 文档
跨浏览器支持：提供出色的跨浏览器支持(IE9+)，无需编写额外代码

jQuery 缺点：

jQuery代码库一直在增长（自 jQuery 1.5 起超过200KB）
不支持组件化开发
jQuery 更适合DOM操作，当涉及到开发复杂的项目时，jQuery能力有限

四.jQuery起源与历史

jQuery 由 John Resig 在 2006 年创建。当时，处理不同浏览器间的兼容性问题困难重重，jQuery 应运而生。它的目标是 "write less, do more"，让开发者用更少的代码实现更多功能。

发布后，jQuery 迅速流行，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。凭借其简洁易用的 API 和强大功能，成为了 Web 开发的首选库。众多知名网站都采用它，推动了 Web 开发效率的提升。如今，虽有新框架出现，但 jQuery 在很多旧项目和特定场景中仍被广泛使用。

五.jQuery历史版本

六.为什么学习jQuery

jQuery是一个非常受欢迎的JavaScript库，被全球约 7000 万个网站使用。它优秀的设计和架构思想非常值得我们去学习， jQuery 的座右铭是"Write less , do more"，它易于学习，非常适合JavaScript 开发人员学习的第一个库，前端JavaScript库非常多，学习jQuery有利于我们学习和理解其它的JavaScript库（例如：Day.js、Lodash.js等）许多大型科技公司，虽然他们现在不会直接使用jQuery来做项目，但在项目中仍然会借鉴很多jQuery设计思想，因此，了解jQuery 依然是一个好主意（虽然现在已经很多公司已经不再使用了，但是如果公司有需求，还是需要学习一下的😭）

七.认识CDN

什么是CDN哪？CDN称之为内容分发网络，（Content Delivery Network或Content Distribution Network，缩写：CDN）CDN它是一组分布在不同地理位置的服务器相互连接形成的网络系统，通过这个网络系统，将Web内容存放在距离用户最近的服务器，可以更快、更可靠地将Web内容(文件、图片、音乐、视频等)发送给用户，CDN不但可以提高资源的访问速度，还可以分担源站的压力。

可能上述的介绍比较复杂，更加简单的理解CDN就是：

CDN会将资源缓存到遍布全球的网站，用户请求获取资源时。
可就近获取CDN上缓存的资源，提高资源访问速度，同时分担源站压力。

常见的CDN分为两种：

自己购买的CDN服务：需要购买开通CDN服务，会分配一个域名，目前，阿里，腾讯，亚马逊，Google等都可以购买CDN服务。
开源的CDN服务：国际上使用比较多的是unpkg、JSDelivr、cdnjs、BootCDN等。

当然CDN是有可以被篡改的风险的，如果想要防止凭证防止被更改可以使用如下的方式：

js 复制代码

integrity = "sha256..." // 防止资源被篡改，如果资源被篡改，就不会加载该资源。
crossorigin = "anonymous" // 加载不同源的东西的时候浏览器是否需要携带凭证信息（cookie，ssl）
// anonymous 不需要携带用户凭证信息
// user-credentail 需要携带用户信息凭证

八.jQuery的安装

jQuery本质上是一个JavaScript的库，该库包含了：DOM操作，选择器，事件处理，动画和Ajax等核心功能，现在我们就可以简单的理解它就是一个JavaScript文件，执行该文件中会给window对象添加一个jQuery函数（例如：window.jQuery）接着我们就可以调用jQuery函数，或者使用该函数上的类方法。

既然了解了这些我们先来看看jQuery安装的方式有哪些？

方式一：在页面中，直接通过CDN的方式引入。

js 复制代码

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

然后我们实现一个Hello jQuery的案例：

js 复制代码

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
  $("body").text("Hello World");
</script>

方式二：下载jQuery的源文件，并在页面中进行手动引入。

官网下载：jquery.com/download/
CDN连接地址下载：releases.jquery.com/jquery/
GitHub仓库中下载：github.com/jquery/jque...

下面我们使用源码引入的jQuery来实现上述案例

js 复制代码

<script src="./lib/jQuery.js"></script>
<script>
  $("body").text("Hello World");
</script>

方式三：使用npm包管理工具安装到项目中。

shell 复制代码

npm install jquery
yarn install jquery

九.jQuery初体验-计数器案例

我们在上述学习了jQuery的安装，在这篇文章的学习过程中建议使用引入源码的方式进行使用jQuery，我们分别使用原生和jQuery来实现。

html 复制代码

// 原生实现
<body>
  <button class="add">+</button>
  <div class="num">0</div>
  <button class="sub">-</button>
</body>

<script>
  var counter = 0
  let addBtn = document.querySelector(".add")
  let counterBtn = document.querySelector(".num")
  let subBtn = document.querySelector(".sub")
  addBtn.onclick = function () {
    counterBtn.textContent = ++counter
  }
  subBtn.onclick = function () {
    counterBtn.textContent = --counter
  }
</script>

html 复制代码

// jQuery实现

<body>
  <button class="add">+</button>
  <div class="num">0</div>
  <button class="sub">-</button>
</body>
<script src="./lib/jQuery.js"></script>
<script>
  var counter = 0;
  var $counter = $(".num");
  $(".add").click(function(){
    $counter.text(++counter)
  })

  $(".sub").click(function(){
    $counter.text(--counter)
  })
</script>

对比来看其实可以看出来jQuery真的比原生的代码简单很多。

十.jQuery监听文件加载

jQuery监听document的DOMContentLoad事件的四种方案：

js 复制代码

$(document).ready(handler)
$("document").ready(handler)
$().ready(handler)
$(hander) // 推荐用这种写法，其他可以使用但是不推荐。

💡Tips：相关知识补充，DOMContentLoaded 事件会在 HTML 文档被完全加载和解析完成后触发，而无需等待样式表、图像和子框架完成加载，如果是通过普通标签引入的js文件，因为当在进行加载HTML的时候，遇到JS文件的记载的时候HTML文件的加载会停止等待JS文件加载完毕，所以普通的script标签会在这个DOMContentLoaded事件执行之前加载完毕，但是script标签中使用了async 那么JS文件的加载是异步的不会等待加载完毕之后在继续加载，带有 defer 属性的 <script> 标签同样会异步下载脚本，但脚本会在 HTML 解析完成后、DOMContentLoaded 事件触发之前执行。也就是说，DOMContentLoaded 事件会等待这些带有 defer 属性的脚本加载并执行完毕，所以如果不是特殊的需求或者没有相关性的JS脚本的记载，推荐使用defer属性来加载JS文件。

监听window的load事件，即网页所有资源（外部链接，图片等）加载完毕

js 复制代码

$(window).on('load',handler)

十一.jQuery与其他库的变量名冲突

和jQuery库一样，许多JavaScript库也会使用 $ 作为函数名或变量名，在jQuery中$是jQuery的别名，如果我们在使用了jQuery之前使用了$函数或者变量，这个时候就会出现冲突，这个时候我们可以使用jQuery中的noConflict函数来解决冲突问题，jQuery在初始化前会先备份一下其他库的jQuery和$变量，调用noConflict函数只是恢复和备份之前的备份的jQuery和$变量，官方源码的解决方案如下：

js 复制代码

  var

    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery, // 先备份其他框架的 jQuery变量

    // Map over the $ in case of overwrite
    _$ = window.$ // 先备份其他框架或者库的$

  jQuery.noConflict = function (deep) {
    if (window.$ === jQuery) {   // 判断当前的$是不是jQuery
      window.$ = _$ // 恢复先前备份其他框架的$
    }

    if (deep && window.jQuery === jQuery) {
      window.jQuery = _jQuery  // 恢复之前其他框架的jQuery
    }

    return jQuery // 返回一个jQuery函数
  }

十二.认识jQuery函数

jQuery是一个工厂函数（别名是$）调用该函数，会根据传入参数类型来匹配返回的元素集合，一般该对象称之为jQuery对象。

如果传入假值：返回一个空的集合。

js 复制代码

console.log(jQuery(null));

如果传入选择器：返回在在documnet中所匹配到元素的集合。

js 复制代码

 console.log(jQuery("ul li", document));

如果传入HTML字符串，返回包含新创建元素的集合。

js 复制代码

console.log(jQuery("<code />"));

如果传入元素：返回包含该元素的集合。

js 复制代码

let $li = document.querySelector("li")
console.log(jQuery($li));

如果传入回调函数：返回的是包含document元素集合, 并且当文档加载完成会回调该函数。

js 复制代码

console.log(jQuery(function () { }));

十三.jQuery的对象

jQuery对象是一个包含所有匹配到元素的集合，该集合是一个类数组对象

jQuery对象是通过调用jQuery函数来创建的。
jQuery对象中会包含N（>=0）个匹配的元素。
jQuery对象原型中包含了很多已经封装好的方法，例如：DOM操作，事件处理，动画等方法。

js 复制代码

// 通过jQuery函数来创建jQuery对象
console.log($("ul li"));

十四.jQuery对象和DOM Element的区别

jQuery对象和DOM Element的区别是什么？首先它们的获取方式不同，DOM Element是通过原生的方式来获取的，jQuery是通过jQuery对象来获取的，除此之外jQuery是一个类数组对象，包含了很多所选中的DOM Element的集合，jQuery对象的原型上扩展了非常多的实用方法，DOM Element则是W3C中定义的属性和方法。

但是我是我们什么时候使用jQuery对象？什么时候使用DOM Element对象哪？他们之间能够互相转换吗？

js 复制代码

// 将jQuery对象转成DOM Element
var ul = $("ul")
var ulEle = ul[0]
console.log("%O",ulEle);

js 复制代码

// 将原生对象转为jQuery对象
var ulEle = document.querySelector("ul")
console.log($(ulEle));

十五.jQuery的架构设计图

在我们开始学习jQuery语法的时候我们先来了解一下jQuery的架构设计图

然后我们可以根据架构图，来完成一个简易版的jQuery

js 复制代码

 // 立即执行函数，避免全局变量冲突
; (function (global, factory) {
  factory(global)
})(window, function (window) {
  function HYjQuery (selector) {
    return new HYjQuery.fn.init(selector)
  }

  // 保证使用对象去调用构造能够正确指向函数
  HYjQuery.prototype = {
    constructor: HYjQuery,
    extend: function () { },
    text: function () { },
    ready: function () { },
  }

  // 类方法
  HYjQuery.noConflict = function () { }
  HYjQuery.isArray = function () { }
  HYjQuery.map = function () { }

  // 将fn这个函数进行全等
  HYjQuery.fn = HYjQuery.prototype

  // 构造函数
  HYjQuery.fn.init = function (seletor) {
    if (!seletor) {
      return this
    }

    // 拿到DOMElement 源码
    var el = document.querySelector(seletor)
    this[0] = el
    this.length = 1
    return this
  }

  HYjQuery.fn.init.prototype = HYjQuery.fn

  window.HYjQuery = window.$ = HYjQuery
})

是不是发现其实很简单，我们完成的这个是一个简单版的，当有了这个框架，以后学习其他内容就是仅仅学习具体方法的实现即可。

十六.总结

这篇文章到这里先结束一下😭，在后续我们会继续学习jQuery的属性和DOM操作，以及Ajax请求，动画等等知识，可能jQuery对于现在前端而言已经是比较老旧的技术了，但是有的老项目还在使用，比如我的公司的老项目就是jQuery，既然需要用到，就不要对它产生抵触心理，作为一个coder，让我们花些时间搞定它！