jQuery
它对我们常见的js操作dom进行封装是我们开发更加方便
（新建.min.js文件，复制Download the compressed, production jQuery 3.6.0中的代码到里面，再在工程中引入就行了）
// 2. 等着页面DOM加载完毕再去执行js 代码，入口函数
$(function() {
$('div').hide();
})
$是jQuery的别称 +-
jq对象和dom对象的区别
jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装；不能混用
dom对象转jq对象：$('video');
jq对象转dom对象：$('video')[0].play()或者 $('video').get(0).play()
$(“选择器”)选择器的写法和原生的差不多
修改属性和样式：$("div").css("属性", "样式");隐式迭代：就是把匹配的所有元素内部进行遍历循环，给每一个元素都添加属性样式。
筛选选择器：
如果中间是类选择器的话记得加.符号，不然没办法选中元素。
jq里面的排他思想：重点就是siblings（）的使用
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
});
})
jq中得到当前索引号的方法：
$(‘div’).index()
jq可以使用css方法来修改样式；也可以操作类，修改多个样式
- 参数只写属性，则返回的是属性值
- 参数是属性名，属性值，中间用逗号隔开，值如果是数字可以不用跟单位和引号
- 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，如果是复合属性采用驼峰命名法
设置类样式方法：
添加类：元素.addClass（”类名”）
删除类：元素.removeClass（”类名”）
切换类：元素.toggleClass（”类名”）
jq效果：
事件切换效果：
hover([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）
animate自定义动画：
如果第一个属性需要写多个样式可以使用对象的方式进行存储！！！！
prop可以获取dom元素属性值，也可以修改属性值
用户自己给元素添加属性：
attr(“属性”) 类似原生js中的getAttribute（） attr（”属性”，”属性值”）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"));：checked可以找到被选中的复选框个数
以下代码跳不出函数体的原因：含有隐式迭代跳不出函数体：
$(".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（）获取value值
找到当前元素所有的父级parents（）里面可以加选择器返回指定的祖先元素
toFixed（2）保留两位小数可以更改值
遍历元素：
$(“div”).each(function(index,domEle){})
each（）方法遍历匹配的每个元素，主要用于dom处理。each每一个
会调函数有两个参数：index是每一个元素的索引号；domEle是每个DOM元素，不是jq对象
想使用jq方法需要使用$符号将其转换。
$.each()可以遍历任何一个对象，主要用来遍历数据、、处理数据
$.each($(“div”)，function（I,ele）{})可以遍历数组对象，功能强大。
创建元素：内部添加
let li=$(“<li></li>”)
$("ul").append(li); 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
外部添加：
$(".test").after(div);
$(".test").before(div);
删除元素：
$("ul").remove(); 可以删除匹配的元素 自杀
$("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
事件
jq的事件注册：
事件处理：
优势一：on绑定一个或者多个操作，还是类似将每个事件存放到一个对象中
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
},
mouseleave: function() {
$(this).css("background", "blue");
}
});优势二：可以事件委派操作，就是把原来给子元素身上的事件绑定在父元素身上，就是事件委托给父元素。
$("ul").on("click", "li", function() {
alert(11);
});
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的li
优势三：使用事件委托可以动态创建元素，click（）没有办法绑定事件，on（）可以给动态生成的元素绑定事件。这也是很重要的点！！！js中也是使用事件委托给动态创建的元素添加事件。
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})slideUp可以添加回调函数，执行完之后再去执行回调函数
$(function() {
$('.btn').click(function() {
let li = $('<li></li>')
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>")
$('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. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
最后一种方法不会触发事件的默认行为，例如文本框获得焦点的时候会有光标在闪烁，前两种方法都是触发这一默认行为。
jq的事件对象
事件被触发就会有默认行为的产生，在回调函数funciton（）里面的e就是事件对象；
阻止默认行为：event.preventDefault()或者return false
阻止冒泡：event.stopPropagation()
jq拷贝对象
$.extend(target, obj);默认的是浅拷贝，和js的Object.assign（）类似
如果拷贝对象有属性，拷贝之后会覆盖之前对象的数据
复杂类型数据的拷贝：浅拷贝只是把原来对象复杂数据类型的地址拷贝给新的对象
只需要在参数最前面添加一个属性true就可以实现深拷贝
$.extend(true, targetObj, obj);直接可以实现深拷贝
jq的多库共存问题：
$符号的复用：解决方案可以将$统一改成jQuery或者是还可以将自定义var xx=$.noConflict()可以实现。
