1.jQuerhy是什么？
jQuery是一个快速.简洁的 javaScript库 .其设计的宗旨是“write Less DO More”，“倡导写更少的代码，做更多的事情”
javaScript库
举例
仓库：可以吧很多东西放在这个仓库里面，找东西的时候可以直接去仓库里面去查找就可以了。
javaScript库：即 library ，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，在这个库中，封装了很多先定义好的函数，比如动漫 animate， hide ，show ，比如获取元素等等。
- 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
- 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）
常见的javaScript库
- Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
- Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
- YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
- Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。
- Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
- jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。
- 移动端的zepto
这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。
- j就是javaScript；Query 查询；意思就是查询js，把js中的DOM操作做了封装，优化了DOM操作，事件处理，动漫设计和Ajax 交互。
2.jQuery的基本使用
jQuery下载
官网：jQuery
- production （压缩过的版本，体积小，上线用）——生产版（压缩版）
- develepment（未压缩版本，开发时使用，适合查找）——开发版（测试版）
使用 jQuery
在页面中引入jQuery库
<!-- 服务器本地库 -->
<script src="./jquery-3.6.0.js"></script>
<!--
CDN远程库
项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担
[https://www.bootcdn.cn/](https://www.bootcdn.cn/)：搜索`jQuery`，复制`<script>`标签到项目中即可使用
-->
- 在 script 标签中使用 jquery 语法即可，如：
<div>Content</div>
<script src="./jquery-3.6.0.js"></script>
<script>
$('div').hide();
</script>
三、选择器
jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素
3.1 基本选择器
| 名称 | 用法 | 描述 |
| ID选择器 | $('#id'); | 获取指定ID的元素 |
| 类选择器 | $('.class'); | 获取同一类class的元素 |
| 标签选择器 | $('div'); | 获取同一类标签的所有元素 |
| 并集选择器 | $('div,p,li'); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $('div.redClass'); | 获取class为redClass的div元素 |
| 属性选择器 | $('input[name=username]') | 获取 input 标签中 name 属性为 username 的元素 |
注意：jQuery选择器返回的是jQuery对象。
<script type="text/javascript"> //常用选择器 //根据id获取元素 获取到的结果：类数组对象 console.log( $('#div0') ); console.log( $('#div0')[0] ); //根据class获取元素 console.log( $('.div_1') ); //根据标签名称来获取元素 console.log( $('div') ); //根据属性获取元素 console.log( $('input[name=username]') ); //根据表单元素属性获取元素 console.log( $(':checked') ); </script>
选择器
| 名称 | 用法 | 描述 | |
| 子代选择器 | $('ul > li'); | 使用 > 号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 | |
| 后代选择器 | $('ul li'); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
过滤选择器
这类选择器都带冒号:
| 名称 | 用法 | 描述 |
| :eq（index） | $('li:eq(2)').css('color', 'red'); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $('li:odd').css('color', 'red'); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $('li:even').css('color', 'red'); | 获取到的li元素中，选择索引号为偶数的元素 |
jQuery 筛选方法
- 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
| 名称 | 用法 | 描述 |
| children(selector) | $('ul').children('li') | 相当于$('ul>li')，子类选择器 |
| find(selector) | $('ul').find('li'); | 相当于$('ul li'),后代选择器 |
| siblings(selector) | $('#first').siblings('li'); | 查找兄弟节点，不包括自己本身。 |
| parent() | $('#first').parent(); | 查找父亲 |
| parents() | $('li').parents(); | 查找祖先元素 |
| eq(index) | $('li').eq(2); | 相当于$('li:eq(2)'),index从0开始 |
| next() | $('li').next() | 找下一个兄弟 |
| prev() | $('li').prev() | 找上一次兄弟 |
| closest | $('li').closest('ul') | 找最近一个祖先元素 |
this 和 当前索引
在对象的事件中，$(this) 表示当前操作的 jQuery 对象，$(this).index() 表示当前元素的索引号
$("li").click(function () {
console.log($(this).index());
}
