欢迎您大驾光临
前言
最近在学习 jQuery
的知识,总结成笔记分享给大家,如果你也对 jQuery
感兴趣,请持续关注我,我带你一步一步走上人生巅峰。😏
一、jQuery
是什么?
首先我们需要先了解 JavaScript 这门语言,阅读到本篇文章我就当大家对 JavaScript
语言有一定的了解了,就不过多啰嗦了。
我们需要知道 jQuery
是一个 JavaScript
库,极大的简化了 JavaScript
编程,很容易学习。
1.1 什么是 JavaScript
库?
程序员们用 JavaScript
语言编写高级程序设计时,通常很困难也很耗时,效率低下,这时,有些大佬为了解决这个痛点,就写了许多的 JavaScript
库,也被称为 JavaScript
框架。
它是一个封装好的特定的集合(方法和函数),包括动画、DOM 操作以及 Ajax 处理。
简单理解: 它就是一个 JS 文件,里面对我们原生的 js 代码进行了封装,存放到里面,这样我们就可以快速高效的使用这些封装好的功能了。
- 常见的
JavaScript
库- jQuery
- Prototype
- YUI
- Dojo
- Ext Js
- zepto
以上这些库都是对原生
JavaScript
语言的封装,内部都是用javaScript
实现的,本篇文章主要带大家学习jQuery
,对于其他的库,感兴趣的同学可以查询资料自己学习一下。
1.2 jQuery
的概念
总结如下
- 它是一个快速、简洁的
JavaScript
库,设计宗旨是“write Less, Do More”,意思是少写,多做,从字面上就很好理解了吧,倡导写更少的代码,做更多的事情。 - j:
JavaScript
,Query:查询,意思就是查询 js , 把 js 中的 DOM 操作做了封装,我们可以快速的查询使用里面的功能。 - jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作,事件处理,动画设计和 Ajax 交互。
- 学习 jQuery 本质就是学习调用这些函数(方法)。
- jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
看下图比喻成我们生活中的样子,可以说是非常的形象了
1.3 jQuery
的优点
- 轻量级,核心文件才几十 kb,不会影响页面加载速度。
- 跨浏览器兼容,基本兼容了现在主流的浏览器。
- 链式编程、隐式迭代。
- 对事件、样式、动画支持,大大简化了 DOM 操作。
- 支持插件扩展开发,有着丰富的第三方插件,例如:树形菜单、日期控件、轮播图等。
- 免费、开源。
二、jQuery
的基本使用
2.1 下载 jQuery
-
官网地址:jQuery
-
各个版本的下载:jQuery不同版本
-
版本介绍:
- 1x:兼容 IE 678 等低版本浏览器,官网不再更新。
- 2x:不兼容 IE 678 等低版本浏览器,官网不再更新。
- 3x:不兼容 IE 678 等低版本浏览器,是官网主要更新维护的版本。
这里我一步一步带大家如何下载并使用
jQuery
-
首先 打开官网地址 jQuery, 点击箭头指示位置。
-
跳转到此界面,有两种下载方式,其他的先不用管,带大家下载未压缩的开发 jQuery 3.6.0,点击链接。
-
点击后会看到如下界面,按键盘
Ctrl + A
全选,再按Ctrl + C
复制。-
在 VS Code 编辑器创建一个 js 文件,将刚才复制的粘贴。
-
以上步骤就已经完成了 jQuery 的下载
2.2 体验 jQuery
步骤
-
创建一个 html 文件,引入刚才的 jQuery 文件。
-
那么我们简单操作,写一个按钮和一个盒子,实现点击按钮让盒子隐藏的效果
-
html
<button>隐藏盒子</button> <div class="box"></div>
-
css
.box { width: 200px; height: 200px; background-color: red; }
-
JavaScript
// 引入 jQuery 文件 <script src="./jQuery.js"></script> <script> // 点击按钮 $('button').click(function () { // 盒子隐藏 $('.box').hide() }) </script>
-
效果如下
-
好了,到这里就已经完成了对 jQuery 的基本使用了,当然 jQuery 库中还有很多很多的函数(方法),我会在本专栏的下一篇文章中继续介绍,敬请期待😋