一、jQuery 概念
1. 概念
jQuery 并不是一门语言,而是 Javascript 的工具库,它将常用的复杂操作,封装成一个个函数,我们使用时只需要
调用函数即可,极大的简化了代码量,提高了编码效率,就像官方对 jQuery 的定义 write less,do more 一样
2. 原生 JS 和 jQuery 对比
分别用 JS 和 jQuery 实现 <按钮点击后 div 显示或隐藏> 的功能
(1) 原生 Javascript 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="显示或隐藏" />
<div></div>
<script>
let div = document.querySelector('div')
let btn = document.querySelector('input[type=button]')
btn.onclick = () => {
div.style.display = div.style.display === 'none'
? div.style.display = 'block'
: div.style.display = 'none'
}
</script>
</body>
</html>
(2) jQuery 函数库实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="显示或隐藏" />
<div></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$('input[type=button]').click(() => {
$('div').toggle()
})
</script>
</body>
</html>
虽然只是一个简单的案例,但是也能看出 jQuery 带来的便利,它将显示与隐藏这种常见功能封装成一个函数供我们
直接调用,减少了我们的代码量
3. 使用 jQuery
jQuery 的本质就是,有人用 Javascript 在一个 JS 文件中写了各种各样的实用函数,最后将这个 JS 文件命名为
jquery.js,仅此而已。明白了其本质就是一个 JS 文件,那么只要得到这个 JS 文件并在项目中引用就可以使用了。
方式一:本地文件
1. 首先需要先得到 jQuery 文件,可以在 jQuery 官方地址下载
开发版本:jQuery 源码文件,未经压缩,格式美观,便于阅读
上线版本:压缩后的 jQuery 文件,文件更小,不利于阅读
选择适合自己的版本,点击链接就可以下载
问题:直接打开,而非下载
有些浏览器点击链接后不会进行下载,而是会把 jQuery 源码文件打开,碰见这种情况时,直接新建 JS 文件,然后
把浏览器打开的内容复制进去就可以( 新建 JS 文件 → 浏览器内 ctrl + A → ctrl + C → JS 文件内 ctrl + V )
2. 得到 jQuery 文件后, 只需要在项目内,像引入其他 Javascript 文件一样引入即可
<script src="jquery-3.6.0.js"></script>
方式二:CDN 加速
CDN 简单理解就是,有大企业提供了可以公共访问的服务器,服务器内有各种各样的资源, 服务器以集群的方式
遍布各地,当浏览器访问时,会优先选择离浏览器客户端地址更近的服务器,加快访问速度,而且资源服务器都是集
群负载部署,更稳定
整理几个比较好的 CDN 服务器:
猫云 CDN
七牛云 CDN
又拍云 CDN
以猫云 CDN 为例演示项目中如何引用
1. 打开 猫云 CDN 网站,并搜索要用的资源
2. 点击搜索结果,进入版本选择页面,挑选合适的版本,然后点击复制链接或直接复制 script 标签
3. 在项目中将 <script>
标签的地址指向 CDN 地址
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
二、jQuery 文档
1. jQuery 函数怎么学习
前面学会了如何在项目中引入 jQuery,接下来就是学习其提供的各个函数,以便未来在项目中使用,其提供的函数
数量庞大,很多人不知道从何学起
学习 jQuery 函数我有个建议
jQuery 只是一个工具库而已,没有必要把所有函数都记得很清,记住重要概念和几个常用的函数就可以,其他的过
一遍 jQuery 文档,有个印象就可以,等碰见合适的场景时,能想起来有这个功能就行,具体用法到时候在查阅 jQuery 文档
2. jQuery 文档
jQuery 文档的来源有很多:
jQuery 官方 Api 文档,最权威的
jQuery API
以函数功能分类后,整理的jQuery 速查手册:
jQuery Quick API Reference
w3cschool 编程狮 jQuery 在线文档
以上都是在线版,也可以自行找找,或下载离线版的,已备断网的时候
jQuery 的函数分类
本人比较习惯通过 <w3cschool 编程狮 jQuery 在线文档> 学习 jQuery函数,其按函数功能进行分类,学习起来不会
很碎片化,而后续的 jQuery 学习笔记,我也会按其分类,挑一些常用的函数做记录