jQuery
它封装了我们常用的js操作dom，更方便我们开发
（新建一个.min.js文件，复制下载压缩的jq判断是否是子元素，生产的jQuery3.6.0代码进去，然后导入到项目中）
// 2. 等待页面DOM加载完毕再执行js代码，入口函数
$(函数() {
$('div').hide();
})
$yes jQuery+的别称-
jq对象和dom对象的区别
jQuery对象：jquery获取的对象就是jQuery对象。本质：DOM元素是用$封装的；不能混用
dom 对象到 jq 对象：$('video');
jq 对象到 dom 对象：$('video')[0].play() 或 $('video').get(0).play()
$("selector") 选择器类似于原生的选择器
修改属性和样式：$("div").css("attributes", "styles");隐式迭代：就是在内部遍历所有匹配的元素，并给每个元素添加属性样式。
过滤器选择器：
@ >
如果中间有类选择器，记得添加 .符号，否则无法选择元素。
jq中的独家思路：关键是siblings()的使用
$(函数() {
// 1. 隐式迭代将点击事件绑定到所有按钮
$("按钮")。点击（函数（）{
// 2. 当前元素改变背景颜色
$(this).css("背景", "粉色");
// 3. 其余兄弟去掉背景色隐式迭代
$(this).siblings("button").css("background", "") ;
});
})
jq中如何获取当前索引号：
$('div')。索引（）
jq可以使用css方法修改样式；你也可以操作类来修改多种样式
参数只写属性，那么返回的属性值参数就是属性名，属性值，用逗号隔开。如果值是数字，可以是不带单位和引号的对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不带引号。如果是复合属性，则为驼峰式。
设置类样式方法：
添加类：element.addClass("类名")
移除类：element.removeClass("类名")
切换类：element.toggleClass("类名")
jq 效果：
事件切换效果结果：
悬停([over,]out)
over：鼠标移入元素时触发的效果
out：鼠标移出元素时触发的函数
1.事件切换hover是鼠标经过和离开的复合写法
$(".nav>li").hover(function() {
$(this).children("ul").slideDown(200);
}, function() {
$(this).children("ul").slideUp(200);
});
2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
});动画或效果队列
动画或效果一旦被触发就会执行。如果多次触发，会排队执行多个动画或效果
所以你需要停止队列：stop()
$(this).children("ul").stop().slideToggle();
.fadeto(1000, 0.5）
动画自定义动画：
如果第一个属性需要写多个样式，可以用对象的方式存储！ ！ ！ ！
prop可以获取dom元素的属性值，或者修改属性值
用户向元素添加属性：
attr("attribute") 类似于原生js中的getAttribute() attr("attribute", "attribute value") setAttribute()
data() 方法可以在不修改 dom 元素结构的情况下访问指定元素上的数据。页面刷新后，之前存储的数据将被删除
//1. element.prop("属性名") 获取元素固有的属性值
console.log($("a").prop("href"));
$("a").prop("title", "我们都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定义属性 我们通过 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));: 勾选以查找复选框的数量
以下代码无法跳出函数体的原因：隐式迭代无法跳出函数体：
$(".j-checkbox").change(function() {
if ($(".j-checkbox").prop("checked") === 'false') {
$(".checkall").prop("checked", "false");
return
}
$(".checkall").prop("checked", 'true');
console.log(111);
})以下是jq常用的关键操作：
html() 获取元素的内容！
text() 获取元素的文本内容
val() 获取值
找到当前元素的所有父元素() 可以添加选择器返回指定的祖先元素
toFixed(2）数值可以改变两位小数
遍历元素：
$("div").每个（函数（索引，domEle）{}）
each() 方法遍历每个匹配的元素，主要用于dom处理。每个
调用函数有两个函数参数：index是每个元素的索引号； domEle 是每个 DOM 元素，而不是 jq 对象
如果要使用jq方法，需要使用$符号进行转换。
$。 each() 可以遍历任意对象，主要用于遍历数据，处理数据
$.each($("div"), function(I,ele){}) 可以遍历数组对象，功能强大。
创建元素：添加到里面
让 li=$("")
$("ul").append(li);在里面添加并放在内容的末尾
$("ul").prepend(li); // 内部添加，放在内容的最前面
在外部添加：
p>
$(".test").after(div);
$(".test").before(div);
移除元素：
p>
$("ul").remove();可以去除匹配的元素自杀
$("ul").empty(); // 可以移除匹配元素中的子节点节点子节点
$("ul").html(""); // 可以删除匹配元素中的子节点children
事件
jq 事件注册：
事件处理：
优点一：绑定一个或多个操作，或类似于将每个事件存储在一个对象中
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
},
mouseleave: function() {
$(this).css("background", "blue");
}
});优点2：可以进行事件委托操作，即将原本赋予子元素的事件绑定到父元素，也就是将事件委托给父元素。
$("ul").on("click", "li", function() {
警报(11);
});
p>
//点击绑定在ul上，但触发对象是ul中的li
优点三：使用事件委托动态创建元素，click() 无法绑定事件，on() 可以绑定动态生成的元素固定事件。这也是很重要的一点！ ！ ！ Node.js 还使用事件委托向动态创建的元素添加事件。
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("我是后来创建的 ");
$("ol").append(li);
})slideUp可以添加回调函数，执行完之后再执行回调函数
$(function() {
$('.btn').click(function() {
let li = $('')
li.html($(".txt").val() + " 删除")
$('ul').prepend(li)
li.slideDown()
$('.txt').val('')
})
$('ul').on('click', 'a', function() {
$(this).parent().slideUp(function() {
$(this).remove()
})
})
})事件解除：off() one()
$("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");//解除事件委托
// one() 但是它只能触发事件一次触发一次之后立刻解绑
$("p").one("click", function() {
alert(11);
})自动触发事件：
// 1. 元素。事件（）
// $("div").click();会触发元素的默认行为
// 2. element.trigger("event" )
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus") ;
// 3. element.triggerHandler("event") 是不触发元素的默认行为
$("div").triggerHandler("click");
最后一个方法不会触发事件的默认行为。例如jq判断是否是子元素，当文本框获得焦点时，光标会闪烁。前两种方法会触发此默认行为。
jq 的事件对象
当事件被触发时，会产生一个默认行为。回调函数funciton()中的e为事件对象；
阻止默认行为：event.preventDefault() 或返回 false
停止冒泡：event.stopPropagation()
jq 复制对象
$.extend(目标, obj);默认是浅拷贝，类似于js的Object.assign()
如果复制的对象有属性，复制后会覆盖前一个对象的数据
复杂类型数据拷贝：浅拷贝只是将原对象的复杂数据类型的地址拷贝到新对象中
只需要在参数前面加上一个属性true就可以实现深拷贝
$.extend (true, targetObj, obj);可以直接实现深拷贝
jq的多库共存问题：
重用$符号：解决方法可以是把$改成jQuery或者是的，也可以实现自定义的var xx=$.noConflict()。
