jQuery简介
JavaScript库（library）是一个封装好的特定的集合（方法和函数）。从封装函数的角度理解，库中封装了许多预先定义好的函数，例如动画相关的animate、hide、show，以及获取元素的函数等。简单来说，它是一个对原生JavaScript代码进行封装的JS文件，使用户能够快速高效地运用这些封装功能。比如jQuery，主要用于快速便捷地操作DOM，其内部基本都是函数（方法）。
常见的JavaScript库有jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等。这些库都是对原生JavaScript的封装，内部由JavaScript实现，而我们主要学习的是jQuery。
jQuery总体概况
jQuery是一个快速、简洁的JavaScript库，其设计宗旨为“write Less，Do More”，即倡导用更少的代码完成更多的工作。其中，“j”代表JavaScript，“Query”意为查询，意味着它对JavaScript中的DOM操作进行了封装，方便我们快速查询和使用相关功能。
jQuery封装了JavaScript常用功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。学习jQuery的本质就是学习调用其中的函数（方法）。它的出现旨在加快前端人员的开发速度，让开发者能够便捷调用和使用，进而提升开发效率。
1. jQuery的优点（面试题）
- 轻量级：核心文件仅几十kb，不会对页面加载速度造成影响。
- 跨浏览器兼容：基本兼容当下主流浏览器。
- 链式编程、隐式迭代：提供便捷的编程方式。
- 对事件、样式、动画支持：极大地简化了DOM操作。
- 支持插件扩展开发：拥有丰富的第三方插件，如树形菜单、日期控件、轮播图等。
- 免费、开源：降低开发成本，促进技术共享。
2. jQuery的版本
- jQuery官网：https://jquery.com/
- 各个版本：https://releases.jquery.com/
- 版本介绍：
- 1x：兼容IE 6、7、8等低版本浏览器，官网不再更新。
- 2x：不兼容IE 6、7、8等低版本浏览器，官网不再更新。
- 3x：不兼容IE 6、7、8等低版本浏览器，是官方主要更新维护的版本。
- 注意：每个版本的jQuery都有压缩版本和未压缩版本。
- .min.js：压缩版，也叫精简版，去除了格式，体积小，用于发布。
- .js：未压缩版，也叫原版，格式统一，体积较大，便于阅读、测试、学习和开发。
3. 如何使用jQuery
（1）引入jQuery文件
在实际使用中，引入jQuery文件有多种方式。除了本地引入，还可使用CDN（内容分发网络）引入。CDN引入能加快文件加载速度，因为CDN节点会依据用户地理位置选择最近的服务器提供文件。
| <body> |
| <div></div> |
| <script src="./js/jQuery.js"></script> |
| <script> |
| $(document).ready(function(){ |
| $('div').width(100).height(100).css('backgroundColor','red') |
| }) |
| </script> |
| </body> |
| <body> |
| <div></div> |
| |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
| <script> |
| $(document).ready(function(){ |
| $('div').width(100).height(100).css('backgroundColor','red'); |
| }); |
| </script> |
| </body> |
（2）写一个入口函数
（3）找到要操作的元素，对其进行操作，如添加文本、样式等
4. jQuery中的两种入口函数
| <body> |
| |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
| |
| <script> |
| |
| $(function(){ |
| console.log('第一个入口函数执行'); |
| }); |
| |
| $(document).ready(function(){ |
| console.log('第二个入口函数执行'); |
| }); |
| </script> |
| </body> |
面试题：jQuery入口函数与window.onload入口函数的区别？
- window.onload入口函数不能写多个，而jQuery的入口函数可以写多个。
- 执行时机不同：jQuery入口函数的执行快于window.onload。
- jQuery入口函数在页面上dom树加载完毕后执行。
- window.onload要等待页面上所有资源（dom树、外部css/js文件、图片）都加载完毕后执行。
5. jQuery中顶级对象
- 一旦引入jQuery.js文件，该文件即运行，window会新增一个全局对象属性$。
- jQuery文件结构：
| (function(){ |
| window.jQuery=window.$=jQuery |
| })() |
jQuery文件是一个自执行函数，它给window对象添加了一个jQuery属性和$属性。
3. $ 是jQuery的别称，代码中可用jQuery代替，但通常为方便起见直接使用$ 。
4. $ 是jQuery的顶级对象，相当于原生JavaScript中的window。利用$将元素包装成jQuery对象，即可调用jQuery的方法。
5. $是一个函数，参数传递不同，效果也不一样：
- 如果参数传递是一个匿名函数 – 入口函数
示例：
| <script> |
| $(function() { |
| console.log('入口函数执行'); |
| }); |
| </script> |
| - **如果参数传递是一个字符串** -- 选择器/创建一个标签 |
| - **选择器示例**： |
| <script> |
| $('#testDiv').css('color','red'); |
| </script> |
| <script> |
| var newDiv = $('<div>这是新创建的div</div>'); |
| $('body').append(newDiv); |
| </script> |
| - **如果参数是一个dom对象**，它会把dom对象转成jQuery对象 |
示例：
| <script> |
| var domElement = document.getElementById('testDiv'); |
| var $jQueryElement = $(domElement); |
| $jQueryElement.width(200); |
| </script> |
