写在前面
大家好,我是一溪风月🥸,一名前端程序员,目标是成为一名独立开发,这两天写代码的时候有点红温了,因为下面的这个事情,导致我我要学习一下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,让我们花些时间搞定它!