大家好，我是唯芸星，这是我的一点点学过的知识，呈现给大家
1：正则表达式
包括：
1：正则表达式包括两部分
①：定义正则表达式的规则
②：正则表达式的规模（i/g/m）
2：声明正则表达式：
①：字面量声明： var reg =/表达式规则/表达式模式；
eg : var reg=/white/g;
②：使用new关键字： var reg = new RegExp("表达式规则","表达式模式")
eg: var reg= new RegExp("white","g")
3 、正则表达式的常用模式：
①：g：全局匹配。不加g默认为非全局匹配，只匹配第一个符合要求的字符串；
www".replace(/w/,"#");->#ww
"www".replace(/w/g,"#");->###
i:忽略大小写；不加i默认要求大小写也匹配
var str= "wWw";
var newStr=str.replace(/w/gi,"#") 结果是所有的w都会变回#，不管大小写
console.log(newStr)
③：m:多行匹配模式，不带m则一个字符串，只有一个开头一个结尾，带m后，如果字符串分为多行
则每行都有一个开头，一个结尾，
`abc
abc`.replace(/^a/gm,"#")->`#bc
#bc`
[Tips:如何写多行字符串？]
普通字符串中，插入\n表示换行，"abc\nabc"
ES6中，允许使用反引号`包裹字符串，反引号包裹的字符串中，会保留空格与回车
正则表达式的的常用方法：
4 test():检测一个字符串，是否符合正则表达式的验证，返回true或false；
|
举个最简单的栗子：eg: /white/.test("whitewhite");->true 这是一个正确的正则表达式，返回的是true |
②：exec:检测一个字符串是否符合正则表达式的验证，如果验证成功 ，返回结果数组：如果验证失败，返回NULL
结果数组中：
index属性：表示从字符串的第几个字符，开始符合正则要求
input属性：返回完整的被检测的字符串
下标第0个：表示符合整个正则表达式的那部分字符串，
下标的第一个到第n个：表示符合正则的第一个到第n个子表达式的部分，子表达式，就是正则中的（），也就是正则中
有几个（），结果数组中就有几个下标。。
/12(3)(4)5/.exec("aaa12345")
0:12345;//整个的
1:3//第一个小括号
2:4//第二个小括号
index:3//表示从第三个开始符合正则
input:"aaa12345",//完整的被检测的字符串，
length:3
JSON是数据交互中，做常用的一种数据格式。
由于各种语言的语法都不相同，在传递数据是，可以将自己语言中的数组，对象转化为JSON字符串，
传递之后，可以将JSON字符串，在解析为JSON对象
2 JSON对象的用户与JS对象基本相同，唯一的区别是：JSON中的键，必须是字符串
将JS的对像 数组 转化为JSON字符串
var str1 =JSON.stringify(users);
console.log(str1)
将JSON字符串转化为JSON对象
var obj=JSON.parse(str1);
console.log(obj);
**********************************************************jQuery***********************************************************************
1.使用jQuery必须先导入jQuery.x.x.x.js文件
2. jQuery中的选择器；
$("选择器").函数()；
①：$是jQuery的缩写：即可以使用jQuery("选择器").函数()；
②：选择器：可以是任何的css支持的选择符
3. 文档就绪函数：防止文档在完全加载未完成之前， 加载jQuery代码；
$(document).ready(function(){
//jQuery代码
})；
简写形式$(function(){ });
[文档就绪函数跟window.onload的区别]
1：window.onload必须等到网页中的所有内容加载完成后才会执行代码！包括图片视频等资源
而文档就绪函数只需要在网页DOM结构加载完毕后，就可以执行代码
2：window.onload只能写一个，写多个只会执行最后一个，文档就绪函数可以写多个，并且不会被覆盖
4 原生JS对象与jQuery对象：
①：使用$("")选中的是jQuery对象；只能调用jQuery的函数，而不能使用元素JS的事件与函数
$("#p").click(); √
$("#p").onclick=function(){} ×
解释：$("#p")是jQuery对象，.onclick是原生JS事件
同理：使用document.getElement系列获取的是原生JS对象，也不是使用jQuery相关函数。
$(document).ready(function(){
alert();
弹窗显示alert（1）
$(".p").click(function(){
alert("你好啊");
})
点击事件，点击class选择器里面的p，（也就是第二个p） ，会出现弹窗效果
})
简单举个栗子：在<body></body>里面简单的做三个p标签！！
<body>
<p>这是一个P标签</p>
<p class="p">这是一个P标签</p>
<p>这是一个P标签</p>
</body>
②：原生js对象转化JQ对象，
可以使用$（）包裹原生JS对象，转化为JQ对象
var p =document.getElementByTagName("p")
$("p").click(); √ 原生JS的对象p已转化为JQ对象
③：JQ对象转为原生JS对象，使用.get(index)或[index]
$("#p").[0].onclick=function(){}
$("#p").get(0).onclick=function(){}
5 JQuery 解决多库冲突
由于其他的JS库，也可能使用$作为自身标识，导致其他JS库与JQ冲突；
要解决冲突，可以放弃使用$ ；直接使用jQ对象
【使用自执行函数传入JQ对象的简单写法】
jQuery.noConflict();//调用这个函数，将$控制权让渡给其他类库，即JQ不能再用$
！function(j){
函数之中，就可以用字母j，代替jQuery对象
}(JQuery);
!function(j){
j(function(){
alert("解决多库冲突");
});
}(jQuery);
使用$()直接创建一个标签节点：在<body></body>里面做几个p标签。取个id跟class，，设置样式，这里就不多说了！！
*******$(function(){}）：任何的jQuery都要写在里面才能生效，切记
.append()属性：内部插入，，，例如在#div1内部的最后，直接插入一个节点。
.appendTo（）：把新节点插入到#div1中
eg:$("<p>这是被插入的p标签</p>").appendTo("#div1");
.prepend（）：在#div1内部的开头，直接插入一个节点。
eg:$("#div1").prepend("<p>这是被插入的p标签</p>");
.after（）：在#div1的外部插入
$("#div1").after("<p>这是被插入的p标签</p>");
.insertBefore（）：在div1的外部头顶插入
把每个p标签外面，都包裹一层div
$("p").wrap("<div></div>");
把所有的p标签，包裹在同一个div中
$("p").wrapAll("<div></div>");
把#div1里面的所有子元素，用<div>包裹起来
$("#div1").wrapInner("<div></div>");
.replaceWith（）：将所有匹配的p标签，全部换为span标签
用span元素，替换掉所有p标签
$("<span>111</span>").replaceAll("p");
empty();：删除#div1中的所有子元素。 但是#div1依然保留空标签
$("#div1").empty();
里面的内容被删除
.remove();直接从DOM中，删除#div1以及所有子元素
$("#div1").remove();
.detach();直接从DOM中，删除#div1以及所有子元素
$("#div1").detach();
1、相同点：
① 都会把当前标签，以及当前标签的所有子节点，全部删除；
② 都可以在删除时，把当前节点返回。并可以使用变量接受返回的节点，以便后期恢复；
2、 不同点：
使用接受的节点，恢复原节点时。
remove只能恢复节点的内容，但是事件绑定，不能再恢复；
detach不但恢复节点的内容，还能再恢复 事件的绑定；
$("#div1").click(function(){
alert();
})
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表示同时克隆及诶单绑定的事件。
$("#div1").clone(true).empty().insertBefore("button:eq(0)");
************************************************************************************************ 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选取。
.html() 取到或设置元素里面的html，相当于innerHTML
$("#div1").html("<h1>我是新的h1</h1>");
.text()：取到或设置元素里面的文字内容，相当于innerText
$("#div1").text("<h1>我是新的h1</h1>");
获取或设置 元素的Value值
$("input[type='text']").val("姜浩特别帅！");
给元素设置CSS样式属性 属于style行级样式表权限：
$("#div1").css({
"color":"red",
"user-select":"none",
"text-stroke":"0.5px blue"
});
获取和设置元素的width和height属性 ：
#div1{
width: 200px;
height: 200px;
background-color: red;
padding: 30px;
border: 10px solid yellow;
margin: relative;
margin:10px;
}
console.log($("#div1").height());
console.log($("#div1").width());
获取元素的内部宽度。 包括宽高和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 事件绑定的快捷方式，
缺点：绑定的事件无法取消。
$(function(){}) jQuery都需要写在这里面
2 使用on()绑定事件
①：使用on进行当事件绑定
<body><button>按钮</button></body>
$(fu
$("button:eq(0)").on("click",function(){
alert()
});nction(){
}) ,点击按钮弹出对话框
使用On:一次性给同一节点，添加多个事件
多个事件间空格分割
onmouseover 鼠标移到上去
dblclick双击
$("button:eq(0)").on("click onmouseover dblclick",function(){
console.log("触发了事件");
});
点击按钮触发事件，单机一次，双击两次
③：使用on：一次性给同一节点添加多个事件，分别执行不同函数
$("button:eq(0)").on({
"click":function(){
console.log("执行了click事件");
},
"mouseover":function(){
console.log("执行了mouseover事件");
}
})
鼠标移上去执行onmouseover
点击执行click事件 
④：调用函数的时候，同时给函数传入制定参数
$("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>这是p111111标签</p>")
$("p").on("click",function(){
alert("没有委派") ;
})
//第二个函数为委派
$(document).on("click","p",function(){
alert("委派");
})
off()取消on事件绑定
$("p").off("click"):取消单时间绑定；
$("p").off("click",mouseover dblclick):取消多事件绑定
$(doucment).off("click","p");取消事件委派绑定
$("p").off();取消所有的事件绑定
举个简单的栗子
$("button:eq(0)").on("click",function(){
alert()
});
$("button:eq(0)").off("click")
button的点击事件被取消了！！点击按钮不会在弹出框架
使用one绑定的事件；只能执行一次
trigger():自动触发某元素的事件
第一个参数：是需要触发的事件的类型，
第一个参数：（可选）数组格式，表示传递给对应的事件函数的参数，
传递进来的参数，可以再事件函数中，定义形参获取（形参第一个必须是event事件，从第二个开始为传递的参数）
也可以直接在函数中，使用arguements对象数组，读取参数
.triggerHandler():功能同上，区别如下
①：triggerHandler不能触发浏览器默认的HTML事件，如submit等....
而trigger可以触发任何的事件
②：trigger:可以触发页面中的所有匹配元素的事件；
而triggerHandler只能触发那一个匹配元素的事件
③：trigger的返回值，返回的是调用当前函数的对象，符合jQuery的可链式语法：
而triggerHandler返回的是 事件函数的返回值，如果事件函数没有返回值，则返回undefined
$("p").on("click",function(evn,n1,n2){
for(var i=;i<arguments.length;i++){
console.log(arguments[i]);
}
//return 1
alert("这是p标签的click事件,能传递了参数"+n1+"和"+n2)
});
$("p").trigger("click",["jredu",,,,,]);
setTimeout(function(){
alert("截止")
},)
***************************** JQuery动画 **************
show让隐藏的元素显示，效果为：同时修改元素的宽度，高度.opacity属性
①：不传参：直接显示，不进行动画；
②：参数时间毫秒数，表示多少毫秒内完成函数
③：传入（时间，函数）表示动画完成之后，执行回调函数；
$("#p").show(,function(){
alert("动画完成了！")
$("#p").hide()
});
.slideDown()让隐藏的元素显示，效果为从上往下，增加高度
.slideUp()让显示的元素隐藏，效果为从下往上，减少高度
setInterval (function(){
$("#p").slideUp(,function(){
$("#p").slideDown();
})
},)
自己做个定时器
就不停的上下减少高度了
$("#p").fadeOut(,function(){
$("#p").fadeIn();
})
淡出淡入，若隐若现
.fadeToggle():让显示的元素隐藏，让隐藏的元素显示；
.fadeTo(时间，最终透明度，函数)：同fadeToggle，接受第二个参数，表示最终达到的透明度
$("#p").fadeToggle(,function(){
alert("完成");
});
$("#p").fadeTo(, 0.5, function(){
alert("完成");
});
代码写法相同，作用相同，只是透明度不同
animate({最终的样式属性，键值对对象},动画时间，动画效果（"linear","swing"）,
动画执行完成后的回调函数)
①：参数一对象中，键必须使用驼峰法则，{fontSize:"18px"}
②：只有数值类型的属性能够使用动画，非数值的属性不能使用动画
$("#p").animate({
width:"300px",
opacity:"",
},,"linear",function(){
alert("动画完成");
});