下载地址 https://jquery.com/ https://cdn.jsdelivr.net/npm/jquery@3.6.0/   jQuery API 中文文档 https://jquery.cuishifeng.cn/   简介 jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程   jQuery 的入口函数

// 第一种
$(function() {
    // 此处是页面 DOM 加载完成的入口（推荐）
});
// 第二种
$(document).ready(function() {
    // 此处是页面 DOM 加载完成的入口
});

  jQuery 的*对象 $ $是 jQuery的别称，在代码中可以使用 jQuery代替$，但一般为了方便，通常都直接使用$ $是 jQuery的*对象，相当于原生 JavaScript中的 window。把元素利用$包装成 jQuery对象,就可以调用 jQuery的方法   jQuery 对象和 DOM 对象的互相转换 DOM 对象转换为 jQuery 对象：$(DOM对象)

var mydiv = document.querySelector('div');
$(mydiv);

jQuery 对象转换为 DOM 对象 $('div')[index]; // index是索引号 $('div').get(index); // index是索引号

$('div')[0];
$('div').get(0);

  jQuery 基础选择器 $("选择器") // 选择器直接写CSS选择器即可，但是要加引号 层级选择器 筛选选择器 筛选选择器（重点） 属性选择器 $("div[id]") // 选择所有含有id属性的div元素 $("input[name='newsletter']") // 选择所有的name属性等于'newsletter'的input元素 $("input[name!='newsletter']") // 选择所有的name属性不等于'newsletter'的input元素 $("input[name^='news']") // 选择所有的name属性以'news'开头的input元素 $("input[name$='news']") // 选择所有的name属性以'news'结尾的input元素 $("input[name*='man']") // 选择所有的name属性包含'news'的input元素 $("input[id][name$='man']") // 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且name属性以man结尾的元素   返回指定的祖先元素 parents() 可以返回指定的祖先元素 例：$(".four").parents(".one");   选择器 :checked 匹配所有选中的被选中元素(复选框、单选框等) 例：$("input:checked")   元素固有属性值 prop() 就是元素本身自带的属性，比如 <a> 元素里面的 href 获取属性 prop("属性"); 设置属性 prop("属性", "属性值");   元素自定义属性值 attr() 比如给 div 添加 index = "1" 获取属性 attr("属性"); 设置属性 attr("属性", "属性值");   数据缓存 data() data([key],[value]) key:存储的数据名 value:将要存储的任意数据 可以在指定的元素上存取数据，并不会修改DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。 添加数据 data("name", "value"); 获取数据 data("name");   内容文本值 普通元素内容 html() html() // 获取元素的内容 html("内容") // 设置元素的内容 普通元素文本内容 text() text() // 获取元素文本的内容 text("文本内容") // 设置元素文本的内容 表单内容 val() val() // 获取表单的内容 val("内容") // 设置表单的内容   链式编程 节省代码量，看起来更优雅 例：$(this).css('color', 'red').sibling().css('color', '');  

---

多个事件绑定 on() 绑定一个或多个事件的事件处理函数 可以给未来动态生成的元素绑定事件 语法：on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型，如"click"或"keydown" selector:元素的子元素选择器 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:回调函数 绑定多个事件

$("div").on({
    mouseover: function() {},
    mouseout: function() {},
    click: function() {}
});

如果事件处理函数相同

$("div").on("mouseover mouseout", function() {
    $(this).toggleClass("current");
});

事件委派 把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

$('ul').on('click', 'li', function() {
    alert('hello world!');
});

  解绑事件 off() $("p").off() // 解绑p元素所有事件函数 $("p").off("click") // 解绑p元素上面的点击事件 $("ul").off("click", "li") // 解绑事件委托   只触发一次事件 one() $("p").one("click", function() {});   自动触发事件 trigger() element.click() // 第一种简写形式 element.trigger("click") // 第二种自动触发模式 element.triggerHandler("click") // 第三种自动触发模式，不会触发默认事件   事件对象 element.on(events, [selector], function(event) {}); 阻止默认行为：event.preventDefault() 或者 return false 阻止冒泡：event.stopPropagation()   对象拷贝 $.extend([deep], target, object1, [objectN]) deep:如果设为true为深拷贝，默认为false 浅拷贝 target:待修改对象 object1:待拷贝的第一个对象 objectN:待拷贝的第N个对象 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝的对象 深拷贝，完全克隆，修改目标对象不会影响被拷贝的对象  

---

jQuery 设置CSS样式 1.参数只写属性名，则是返回属性值 $(this).css('color'); 2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 $(this).css('属性', '值'); 例：$('div').css('background-color', 'skyblue'); 3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号 $(this).css({'color': 'red', 'font-size': '20px'});   设置类样式 添加类 $('div').addClass('current'); 移除类 $('div').removeClass('current'); 切换类 $('div').toggleClass('current');   jQuery 得到当前元素的索引号 $(this).index();   hover 事件 hover([over,]out) over:鼠标移到元素上要触发的函数 out:鼠标移出元素要触发的函数 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数  

---

延时 delay() delay(duration) duration：延时时间，单位：毫秒 例：$('#foo').slideUp(300).delay(800).fadeIn(400);   显示隐藏效果 显示 show([speed,[easing],[fn]]) 隐藏 hide([speed,[easing],[fn]]) 切换 toggle([speed],[easing],[fn]) 参数都可以省略 speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次   滑动效果 向下滑动 slideDown([speed],[easing],[fn]) 向上滑动 slideUp([speed,[easing],[fn]]) 滑动切换 slideToggle([speed],[easing],[fn]) 参数都可以省略 speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次   淡入淡出效果 淡入 fadeIn([speed],[easing],[fn]) 淡出 fadeOut([speed],[easing],[fn]) 切换 fadeToggle([speed,[easing],[fn]]) 参数都可以省略 speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次 修改透明度 fadeTo([[speed],opacity,[easing],[fn]]) speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) opacity:一个0至1之间表示透明度的数字 easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次   自定义动画 animate animate(params,[speed],[easing],[fn]) params:一组包含作为动画属性和终值的样式属性和及其值的集合 speed:三种预定速度之一的字符串("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing" fn:在动画完成时执行的函数，每个元素执行一次 $("div").animate({ width: "90%", height: "100%", fontSize: "10px" }, 1000); 因为动画是给元素做的，如果要给文档做动画，转换一下 body 和 html 即可 $("body, html").animate({ scrollTop: 0 }, 1000);   停止动画 stop();  

---

遍历元素 each 语法1 $("div").each(function(index, domEle) {}); index 是每个元素的索引号，domEle 是每个DOM元素对象 要想使用jQuery方法，需要给DOM元素转换为jQuery对象 $(domEle) 语法2 $.each(object, function(index, element) {}); $.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象 index 是每个元素的索引号，element 遍历内容   创建元素 例：$("<li></li>"); var li = $("<li>内容</li>"); 添加元素 $("ul").append(li); // 内部添加，放到指定元素内部的最后面 $("ul").prepend(li); // 内部添加，放到指定元素内部的最前面 $("ul").after(li); // 外部添加，放到指定元素的后面 $("ul").before(li); // 外部添加，放到指定元素的前面 删除元素 $("ul").remove(); // 删除元素，包括本身 $("ul").empty(); // 删除元素里面的子节点 $("ul").html(""); // 清空元素里面的子节点   jQuery 尺寸 以下参数为空，则是获取相应值，返回的是数字型 如果参数为数字，则是修改相应值。参数可以不写单位   jQuery 位置 offset() 设置或获取元素偏移 offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系 该方法有2个属性 left、top。 offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文梐左侧的距离 可以设置元素的偏移：offset({top:10, left:30}); position() 获取元素偏移 position() 方法用于返回被选元素相当于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准 scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧 $("div").scrollTop(); // 获取元素被卷去的头部 $("document").scrollTop(300); // 设置文档头部被卷去的距离  

---

多库共存 1.如果 $ 符号冲突，我们就使用 jQuery 例：jQuery.each(); 2.让 jQuery 释放对 $ 的控制权，让用户自己定义 例：var test = $.noConflict(); 然后再使用 test.each();