01-JQuery 基础语法：
1、使用JQuery必须先导入JQuery.x.x.xjs文件。
2、JQuery中的选择器：
$(选择器).函数()
① $是JQuery的缩写，既可以使用JQuery("选择器").函数()；
② 选择器，可以是任何的css支持的选择符；
3、文档就绪函数：防止在文档未完全加载完成之前，运行JQuery代码；
$(document).ready(function(){
// JQuery代码
});
简写形式：$(function(){ });
[文档就绪函数 和 window.onload区别]
① window.onload必须等到网页中的所有内容加载完成后，才会执行代码(包括图片、视频等资源)
文档就绪函数，只需要在网页DOM结构加载完毕后，就可以执行代码；
② window.onload只能写一个，写多个只会执行最后一个；
文档就绪函数，可以写多个，并且不会被覆盖。
4、原生js对象与JQuery对象：
① 使用("")选中的是JQuery对象，只能调用JQuery的函数，er不能使用元素js的事件与函数；
$("#p").click(); √
$("#p").onclick=function(){} ×
解释：$("#p")是JQuery对象， onclick是原生js事件
同理，使用document.getElement系列获取的是原生js对象，也不能使用JQuery相关对象。
② 原生js对象转为JQuery对象
可以使用$()包裹原生js对象，即可转为JQuery对象。
var p = document.getElementsByTagName("p");
$(p).click(); √ 原生js对象p已转为JQuery对象
③ JQuery对象转为原生js对象 。使用 .get(index) 或 [index]
$("#p").get(0).onclick=function(){} √
$("#p").(0).onclick=function(){} √
5、JQuery 解决多库冲突
由于其他的js库，也可以使用$作为自身标识，导致其他js库与JQuery冲突。
要解决冲突，可以放弃使用$,直接使用JQuery对象。
[使用自执行函数传入JQuery对象简化写法]
jQuery.noConflict();//调用这个函数，将$控制让给其他类库，即JQuery不能在使用$
！function(j){
//函数之中，就可以用字母j，代替JQuery对象1
}(JQuery);
02-JQueryDOM操作及其他函数
// 使用$()直接创建一个标签节点
// 将创建好的节点，插入到指定位置。
// 在#div1内部的最后，直接插入一个节点。
$("#div1").append("<p>这是被插入的p标签</p>");
// 把新节点插入到#div1中
$("<p>这是被插入的p标签</p>").appendTo("#div1");
// 在#div1内部的开头，直接插入一个节点。
$("#div1").prepend("<p>这是被插入的p标签</p>");
$("#div1").after("<p>这是被插入的p标签</p>");
$("<p>这是被插入的p标签</p>").insertBefore("#div1");
// 把每个p标签外面，都包裹一层div
$("p").wrap("<div></div>");
// 把所有的p标签，包裹在同一个div中
$("p").wrapAll("<div></div>");
// 把#div1里面的所有子元素，用<div>包裹起来
$("#div1").wrapInner("<div></div>");
// 删除元素的父标签
$("#p").unwrap();
// 将所有匹配的p标签，全部换为span标签
$("p").replaceWith("<span>111</span>");
// 用span元素，替换掉所有p标签
$("<span>111</span>").replaceAll("p");
// 删除#div1中的所有子元素。 但是#div1依然保留空标签
$("#div1").empty();
// 直接从DOM中，删除#div1以及所有子元素
$("#div1").remove();
// 直接从DOM中，删除#div1以及所有子元素
$("#div1").detach();
【remove和detach异同】
1、相同点：
① 都会把当前标签，以及当前标签的所有子节点，全部删除；
② 都可以在删除时，把当前节点返回。并可以使用变量接受返回的节点，以便后期恢复；
2、 不同点：
使用接受的节点，恢复原节点时。
remove只能恢复节点的内容，但是事件绑定，不能再恢复；
detach不但恢复节点的内容，还能再恢复 事件的绑定；
案例 ↓
$("#div1").click(function(){
alert(1);
})
var div1 = null;
$("button:eq(0)").click(function(){
div1 = $("#div1").remove();
})
$("button:eq(1)").click(function(){
div1 = $("#div1").detach();
})
$("button:eq(2)").click(function(){
$("button:eq(2)").after(div1);
});
[JS中 .cloneNode() 和 JQ中 .clone() 区别]
两者都接受传入true/false的参数。
.cloneNode() 不传参数或传入参数false，表示只克隆当前节点，而不克隆子节点。 传入true表示可隆全部子节点。
.clone() 无论传入哪个参数，都会克隆所有子节点。但是，不传参数或者传入false，表示只克隆节点，不克隆节点绑定的事件。 传入true表示同时克隆及诶单绑定的事件。
/*CSS和属性相关操作*/
使用attr()设置或者取到元素的某个属性。
$("#div1").attr("class","cls1");
$("#div1").attr({ 使用attr一次性设置多个属性
"class" : "cls1",
"name" : "name1",
"style" : "color:red;"
});
console.log($(".p").attr("id"));
删除元素属性
$("#div1").removeAttr("class");
prop与Attr区别。
对于checked/disabled等属性名等于属性值的属性，使用prop返回的将是true或false， 使用attr返回的将是属性名或者undefined
所以，对于属性名等于属性值，或者属性是true/false的特殊属性，通常使用prop选取。 其他的属性，通常使用attr选取。
console.log($("button:eq(2)").attr("disabled"));
console.log($("button:eq(2)").prop("disabled"));
●给元素添加class属性，与attr添加class的不同是，使用addClass添加的新类名，将会保留原来已有的class名。
$("p").addClass("selected1 selected2");
●删除掉元素指定的class
$("p").removeClass("selected1");
●元素有指定class名，则删除； 元素没有指定class名，则新增。
$("p").toggleClass("selected1");
●取到或设置元素里面的html，相当于innerHTML
console.log($("#div1").html());
$("#div1").html("<h1>我是新的h1</h1>");
●取到或设置元素里面的文字内容，相当于innerText
console.log($("#div1").text());
$("#div1").text("<h1>我是新的h1</h1>");
●获取或设置 元素的Value值
console.log($("input[type='text']").val());
$("input[type='text']").val("姜浩特别帅！");
●给元素设置CSS样式属性 属于style行级样式表权限
$("#div1").css({
"color":"red",
"user-select":"none",
"text-stroke":"0.5px blue"
});
var id = setInterval(function(){
$("#div1").css({
"width":function(index,value){
if(parseFloat(value)+10 >= 600){
clearInterval(id);
}
return parseFloat(value)+10+"px";
}
});
},500);
●获取和设置元素的width和height属性
console.log($("#div1").height());
console.log($("#div1").width());
$("#div1").width("400px");
●获取元素的内部宽度。 包括宽高和padding
console.log($("#div1").innerHeight());
console.log($("#div1").innerWidth());
● 获取元素的外部宽高。 包括宽高+padding+border
传入参数为true时，还要包括margin
console.log($("#div1").outerHeight(true));
console.log($("#div1").outerWidth());
offset():
获取元素，相对于浏览器窗口左上角的偏移位置。
这个位置，包括margin/position等。
返回的是一个对象，包含两个属性，分别是left和top
position():
获取定位元素，相对于父元素的偏移位置(父元素必须是定位元素)。
这个位置，只包括top/left等定位属性。 而margin将被视为当前元素的一部分，并不会视为偏移量范畴。
如果父元素有定位属性。则相对于父元素padding左上角定位；
如果父元素没有定位属性，则与offerSet一样 ，相对于浏览器左上角定位（但是，只是两者的定位原点都在浏览器左上角。 在计算偏移量时，offerSet会计算margin和top. 而position只计算top）。
[绑定事件的方式]
1、事件绑定的快捷方式
缺点：绑定的事件无法取消
$("button").eq(0).click(function(){
alert("2");
});
2、使用on()绑定事件
①使用on()单事件绑定
$("button:eq(0)").on("click",function(){
alert("1");
});
②使用on，一次性给同一节点，添加多个事件执行一个函数,多个事件之间空格分隔
$("button:eq(0)").on("click monseover dblclick",function(){
console.log("触发了事件");
});
③使用on，一次性给同一节点添加多个事件，分别执行不同函数
$("button:eq(0)").on({
"click":function(){
console.log("执行click");
},
"monseover":function(){
console.log("执行monseover");
}
});
④调用函数时，同时给函数
$("button:eq(0)").on("click",{name:"jredu",age:14},function(evn){
console.log(evn);
console.log(evn.data.name);
console.log(evn.data.age);
});
⑤使用on,进行事件委派：
>>>将原本需要绑定在本元素上的事件，改为绑定到祖先节点乃至根节点上，然后委派给当前节点生效
eg:$("p").on("click",function(){});
事件委派
$("document").on("click","p",function(){});
>>>作用：
不使用事件委派的绑定方式，只能绑定到页面初始化时的标签上，当页面新增同类型标签，这些新增的标签，不能够绑定事件
但如果使用事件委派，当页面新增同类型标签时，这些新增的标签也能够绑定已有的事件
$("button:eq(0)").on("click",function(){
$(this).after("<p>新增的p标签<p/>");
});
$("p").on("click",function(){
alert("没有事件委派");
});
$(document).on("click","p",function(){
alert("这是事件委派");
});
3、off()取消on事件绑定
$("p").off("click"):取消单个事件绑定；
$("p").off("click mouseover dbliclick"):取消多个事件绑定
$(document).off("click","p");:取消委派事件绑定
$("p").off();取消所有事件绑定
使用.one()绑定事件只能执行一次
$("button").one("click",function(){
alert("生效一次");
});
.trigger()自动触发某元素的事件
第一个参数：是需要触发的事件类型
第二个参数：可选数组格式，表示传递给对应事件函数的参数
>>>传递进来的参数，可以在事件函数中，定义形参获取(形参第一个必须是event事件，从第二个开始为传递的参数。)
>>>也可以直接在函数中，使用arguments对象数组，读取参数
.triggerHandler():功能同上，区别如下：
①triggerHandler不能够触发浏览器默认的HTML事件，如submit等...
而trigger可以触发任何事件
②trigger可以触发页面中所有匹配元素的事件
而triggerHandler只能触发第一个匹配元素的事件
③trigger的返回值，返回的是调用当前函数的对象，符合JQuery的可链式语法
而triggerHandler返回的是事件函数的返回值，如果事件函数没有返回值，则范围是undefined。
$("p").on("click",function(evn,n1,n2){
for(var i=1;i<arguments.length;i++){
console.log(arguments[i]);
}
alert("这是p标签的click事件");
});
$("p").trigger("click",["lll",1,2,3,4]);
[JQuery中的动画]
.show() 让隐藏的元素显示
效果为：同时修改元素的宽度、高度、opacity属性
①不传参数：直接显示，不进行动画
②参数时间毫秒数，表示多少毫秒内完成函数
③传入(时间，函数)表示动画完成后，执行回调函数
.hide() 让显示元素隐藏，与.show()相反
.slideDown() 让隐藏的元素显示，效果为从上到下，增加高度
.slidUp() 让显示的元素隐藏，效果为从下到上，减少高度
.slidToggle() 让显示的元素隐藏，让隐藏的元素显示
.fadeOut() 让显示的元素淡出隐藏，该透明度
.fadeIn() 让隐藏的元素淡入显示
.fadeToggle() 让显示的元素淡出隐藏，让隐藏的元素淡入显示
.fadeTo(时间，最终透明度，函数) 同fadeToggle,接受第二个参数，表示最终达到的透明度
.animate({最终的样式属性，键值对对象}，动画事件，动画效果("linear"或"swing"),动画执行完后的回调函数)
自定义动画函数注意事项：
①参数一的对象中，键必须使用驼峰命名法。(fontSize : "18px")
②只有数值类型的属性能够使用动画，非数值类型属性不能应用动画。