【一】什么是jQuery
【1】概述
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
【2】小结
-
jQuery内部封装了原生的js代码
- 核心代码也就几十KB 加载速度快 极大的提升编写效率
-
能够通过书写更少的代码，完成js操作，类似于Python中的模块
-
前端叫 “类库”
-
兼容多个浏览器
- IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
-
宗旨
- "Write less, do more."
-
Ajax交互
- 异步提交 局部刷新(django部分再学)
【二】导入模块
【1】Python当中导入模块发生了哪些事？
- 导入模块其实需要消耗资源
- 在Python中，导入模块可以分为两个阶段：编译阶段和运行阶段。
（1）编译阶段
- 在编译阶段，Python解释器会扫描并分析源代码，将导入语句转换为相应的字节码指令。
- 这些指令会被存储在编译后的.pyc文件中，以便在之后的运行阶段使用。
（2）运行阶段
-
在运行阶段，当执行到导入模块的语句时，Python会按照以下步骤进行模块的导入：
-
搜索模块
-
解释器首先会搜索模块是否已经加载到内存中。
-
如果是内置模块，则直接使用；如果是标准库或第三方库，会按照一定的搜索路径进行查找。
-
-
编译模块
-
如果模块没有被加载到内存中，则解释器会在硬盘上找到对应的.py文件，并将其编译成字节码文件（.pyc）。
-
编译后的字节码文件包含了模块的定义、函数、类等信息。
-
-
创建模块命名空间
-
解释器创建一个新的命名空间来存放模块中的变量、函数和类等。
-
模块中的全局变量会成为该命名空间的属性。
-
-
执行模块代码
-
解释器开始执行模块的字节码指令，逐行解释并执行模块中的代码。
-
这会导入模块中定义的函数、类和全局变量等。
-
-
返回模块对象
- 当模块中的代码执行完毕后，解释器返回一个表示该模块的模块对象。
- 可以通过该对象访问模块中定义的内容。
-
（3）总结
- 总结起来，导入模块时，Python解释器会搜索、编译、执行模块的代码，并创建一个命名空间来存放模块中的变量和函数。
- 这样，我们就可以在当前代码中使用模块中定义的功能了。
【2】jQuery中导入类库发生了哪些事？
- 它的文件非常小（几十kb），基本不影响网络速度
- 在jQuery中导入类库（也称为插件）可以通过以下步骤完成
（1）获取类库文件
- 首先需要获取所需的类库文件（通常是一个 JavaScript 文件），可以从官方网站或其他来源下载得到。
（2）导入类库文件
-
将类库文件保存在项目目录中，并在 HTML 文件中使用
<script>标签来导入类库文件。 -
在
<script>标签中，使用src属性指定类库文件的路径，让浏览器能够加载并执行该文件。<script src="path/to/jquery.js"></script> <script src="path/to/plugin.js"></script>这样，当浏览器解析到这两个
<script>标签时，就会下载并执行对应的类库文件。
（3）使用类库功能
-
一旦类库文件被加载和执行，就可以使用其中提供的功能了。
-
通常，类库会扩展或增强原生 JavaScript 的功能，通过在页面中引入类库文件，我们可以使用类库提供的函数、方法或特性。
$(document).ready(function() { // 在文档加载完成后执行一些代码 // 使用类库提供的函数或方法 }); -
上述代码示例中，
$符号是 jQuery 的别名，通过调用.ready()方法，我们可以确保在文档加载完成后执行传入的函数。
（4）总结
- 总结起来，导入 jQuery 类库涉及获取类库文件、在 HTML 文件中导入类库文件，并通过调用类库提供的功能来实现对页面元素的操作、动态加载和事件处理等功能。
【三】jQuery的优势
【1】详细
（1）简化DOM操作：
- jQuery提供了强大且简洁的API，使得对DOM元素的选择、遍历和操作变得更加容易。
- 通过使用jQuery，可以通过简洁的语法实现复杂的DOM操作，减少编写冗长代码的工作量。
（2）跨浏览器兼容性
- jQuery解决了不同浏览器之间的兼容性问题。
- 它封装了一致的API，使得开发人员能够编写跨浏览器兼容的代码，无需关注各种细节和差异。
（3）丰富的插件生态系统：
- jQuery拥有庞大的插件生态系统，涵盖了各种功能和特性，如动画效果、表单验证、图像轮播等。
- 这些插件可以大幅度提高开发效率，让开发人员能够快速实现复杂的功能。
（4）AJAX支持
- jQuery对AJAX进行了封装，使得在Web应用中进行异步请求变得更加简单。
- 通过使用jQuery的AJAX API，可以轻松地发送AJAX请求、处理响应和更新页面内容，实现更好的用户体验。
（5）动画效果
- jQuery提供了丰富的动画效果和过渡效果，可以轻松地实现元素的淡入淡出、滑动、展开收起等动画效果，给网页增添了交互和生动性。
（6）扩展性与可定制性
- jQuery允许开发人员根据自己的需求进行定制和扩展。
- 开发人员可以自定义插件，编写自己的jQuery代码，并且可以根据项目需求选择只导入所需的模块，减小文件体积。
【2】小结
（1）一款轻量级的JS框架。
- jQuery核心js文件才几十kb，不会影响页面加载速度。
（2）丰富的DOM选择器
- jQuery的选择器用起来很方便
- 比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
（3）链式表达式
- jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
（4）事件、样式、动画支持
- jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
（5）Ajax操作支持
- jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
（6）跨浏览器兼容
- jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
（7）插件扩展开发
- jQuery有着丰富的第三方的插件
- 例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
【四】jQuery学习内容
【1】概述
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
- each、data、Ajax
【2】下载链接
【3】中文文档
【五】jQuery的版本
【1】1.x
- 兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。
- 因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
【2】2.x：
- 不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。
- 如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
【3】3.x：
- 不兼容IE678，只支持最新的浏览器。
- 需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
【六】jQuery配置
【1】settings设置模板
- 文件下载到本地
- 借助于pycharm自带的模板功能
- settings
- Editor
- File and Code Templates
- Editor
【2】基于网络分发(CDN)
（1）官网
- 直接引入jQuery提供的CDN服务(基于网络请求加载)
（2）压缩
-
如果 URL 结尾含有
min、compressed、gz或.gzipped等词汇及其对应后缀，如.min.js、.gz.css等，则可能是指向已压缩的文件。 -
后缀名区分是否已压缩
未压缩：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js
已压缩：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js
- 缺点
- 必须联网