一、JQuery 介绍
JQuery 是快速、简洁的
JavaScript库，也就是写好的JS文件。
1、JavaScript 库
JavaScript 库：是一个封装好的集合（方法和函数）。里面都是写好的函数。
- Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
- Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
- YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
- Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。
- Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
- jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。
- 移动端的zepto
这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。、
这些基本的我们跳过进入正题
二、jQuery基本使用
1、jQuery版本
jQuery版本有很多，有1.0~3.0以上等版本
- 1.0的版本能兼容IE6、7、8浏览器
- 2.0的版不兼容IE6、7、8浏览器
- 3.0的版不兼容IE6、7、8，更加精简的
2、jQuery下载
- production （压缩过的版本，体积小，上线用）——生产版（压缩版）
- develepment（未压缩版本，开发时使用，适合查找）——开发版（测试版）
3、使用jQuery
如果是使用软件的，把js文件c到js包里，再使用
script标签中scr属性导入就行。4、Jquery 闭包结构
(function( global,factory){ })();用一个函数域包起来，就是所谓的沙箱
- 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局
- 把当前沙箱需要的外部变量通过函数参数引入进来
- 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数。
jQuery 具体的实现，都被包含在了一个立即执行函数构造的闭包里面，为了不污染全局作用域，只在后面暴露 $ 和 jQuery 这 2 个变量给外界。
5、jQuery的两种用法
// jQuery核心代码
(function(window){
var jQuery = function(){
return new jQuery.fn.init();
}
window.$ = window.jQuery = jQuery
})(window)
jQuery引用库后：可以直接使用
- 当函数用：$()
- 当对象用：$.xxx()
1)jQuery 函数的使用
作为一般函数调用：$(param)
- 参数为函数：当 DOM 加载完成后，执行此回调函数
- 参数为选择器字符：查找所有匹配的标签并将它们封装成
jQuery对象 - 参数为 DOM 对象：将 dom 对象封装成
jQuery对象 - 参数为 html 标签字符串（用得少）：创建标签对象并封装成
jQuery对象
$.each()：隐式遍历数组$.trim()：去除两端的空格2) jQuery 对象的使用
执行jQuery核心函数返回的对象
jQuery对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）
jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作 dom
属性和方法
- 基本行为：操作标签的基本方法
属性：操作内部标签的属性或值
CSS：操作标签的样式
文档：对标签进行增删改操作
筛选：根据指定的规则过滤内部的标签
事件：处理事件监听相关
效果：实现一些动画效果
6、入口函数
一般代码写在页面底部，等元素加载完，才能执行 jQuery 代码，或者可以使用下方入口函数解决
<script src="./jquery-3.6.0.js"></script>
<script>
$(function(){
//
})
</script>
或
<script>
$().ready(function() {
});
</script>
一、选择器
1、基本选择器
ID选择器 ：$('#id'); 获取指定ID的元素
类选择器 ：$('.class');获取同一类class的元素
标签选择器 ：$('div'); 获取同一类标签的所有元素
并集选择器 ：$('div,p,li'); 使用逗号分隔，只要符合条件之一就可。
交集选择器 ：$('div.redClass'); 获取class为dClass的div元素
属性选择器 ： $('input[name=username]')获取 input 标签中 name 属性为 username 的元素
2、层级选择器
子代选择器：$('ul > li');使用 > 号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器：$("ul li")使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
3、过滤选择器
这类选择器都带冒号:
| 名称 | 用法 | 描述 |
|---|---|---|
| :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元素中，选择索引号为偶数的元素 |
4、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'): 找最近一个祖先元素
5、this 和 当前 索引
$(this) 表示当前操作的 jQuery 对象$(this).index() 表示当前元素的索引号
