邂逅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来实现上述案例

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,让我们花些时间搞定它!

相关推荐
萧寂1731 分钟前
html实现手势密码
前端·css·html
excel4 分钟前
webpack 核心编译器 八 节
前端
JoyZ7 分钟前
AI的时代学习还有意义吗?
前端
好_快9 分钟前
Lodash源码阅读-getSymbolsIn
前端·javascript·源码阅读
好_快10 分钟前
Lodash源码阅读-baseAssignValue
前端·javascript·源码阅读
好_快10 分钟前
Lodash源码阅读-copyObject
前端·javascript·源码阅读
qq. 28040339848 小时前
CSS层叠顺序
前端·css
喝拿铁写前端8 小时前
SmartField AI:让每个字段都找到归属!
前端·算法