Jquery
jquery是一个大型的简单的第三方类库，其是对dom操作的封装，也包括ajax操作。
1、基本使用。
// 引入jquery
<script src="jquery/jquery.js"></script>
// 当引入jquery后会在全局暴露两个变量名：$ jQuery
注意：$=jQuery
2、选择器。
ul>li*10{$} // 创建10个li 内容依次为1~10
$('选择器')
注意：不管使用任何选择器，获取到的元素都是一个元素集合。
$('选择器').筛选器名称()
// 常用筛选器
first() // 第一个
last() // 最后一个
eq(索引) // 第几个
next() // 下一个
nextAll() // 后面所有
prev() // 前一个
prevAll() // 前面所有
parent() // 父亲
parents() // 祖先 直至html
siblings() // 所有兄弟
find('选择器') // 该元素的所有后代元素中满足选择器要求的元素
3、操作文本内容。
首先获取元素，然后再操作元素文本内容。其中操作文本内容又分为获取和设置。
// 等价于innerHTML 获取的是元素的内部的html内容
html() // 获取
html('你要设置的内容') // 设置 可以识别并解析html结构
// 等价于innerText 获取的是元素的内部的text文本内容
text() // 获取
text('你要设置的内容') // 设置 不可以识别并解析html结构
// 等价于value属性 主要用于表单元素处理
val() // 获取
val('你要设置的内容') // 设置
4、操作元素类名。
// addClass('你要增加的类名') 增加类名
$('div').addClass('e')
// removeClass('你要删除的类名') 删除类名
$('div').removeClass('a')
// toggleClass('你要切换的类名') 切换类名
$('div').toggleClass('b')
// 切换即如果本身有则删除 反之如果本身没有则增加
// hasClass('你要判断的类名') 判断是否包含该类名
$('div').hasClass('c')
5、操作元素样式。
元素集合.css('你要获取的css样式名称') // 返回样式值
注意：其既可以获取行内样式 又可以获取非行内样式
元素集合.css('你要设置的css样式名称','你要设置的css样式值')
注意：当你需要给一个元素设置样式值为px单位的时候 可以省略单位px不写
// 批量设置样式
元素集合.css({
'':'',
......
})
6、操作元素属性。
// 可以进行设置和获取元素的属性 一般用于操作元素的自定义属性
attr('你要获取的属性名') // 获取
attr('你要设置的属性名','你要设置的属性值') // 设置
// 对元素的属性进行删除操作
removeAttr('你要删除的属性名') // 删除
注意：上述两个对元素属性的操作对原生属性和自定义属性均可生效，且会直接响应在元素标签身上。
// 可以进行设置和获取元素的属性
// 当prop设置元素的原生属性，会直接响应在元素标签身上
// 当prop设置元素的自定义属性，不会直接响应在元素标签身上，会响应在元素对象身上
// 注意：prop方法不能获取元素标签身上的自定义属性，只能获取prop方法自己设置的自定义属性
prop('你要设置的属性名','你要设置的属性值') // 设置
prop('你要获取的属性名') // 获取
// 对元素的属性进行删除操作 注意其不能删除原生属性 只能删除由prop方法设置的自定义属性
removeProp('你要删除的属性名') // 删除
7、获取元素尺寸。
background-clip：content-box/padding-box/border-box //背景被裁减到什么区域
width() //content的宽
height() //content的高
innerWidth() //padding及content的宽
innerHeight() //padding及content的高
outerWidth() //border、padding及content的宽
outerHeight() //border、padding及content的高
outerWidth(true) //margin、border、padding及content的宽
outerHeight(true) //margin、border、padding及content的高
注意：不管该元素是否隐藏，都能拿到值；不管盒子是什么状态，拿到的区域不变。
8、元素偏移量。
offset() //相对于页面左上角的距离 返回值是对象形式 {top:xxx,left:xxx}
position() //返回的是元素的定位位置 返回值是对象形式 {top:xxx,left:xxx}
注意：如果设置的定位是right和bottom会自动帮忙换算成top和left
9、事件绑定。
// on()方法绑定事件
// 基础绑定事件
元素集合.on('事件类型',事件处理函数)
$('div').on('click',function(){console.log('我是div的点击事件')})
// 事件委托绑定事件
元素集合.on('事件类型','选择器',事件处理函数)
// 事件委托绑定事件的含义是将子元素的事件绑定给父元素 只有触发子元素才能触发事件
$('div').on('click','p',function(){console.log('我是p的点击事件')})
// 批量绑定事件
元素集合.on({'事件类型1':事件处理函数1,'事件类型2':事件处理函数2,'事件类型3':事件处理函数3})
// 注意该方法不能处理事件委托类型事件绑定
$('div').on({
'click':function(){console.log('我是点击事件')},
'mouseover':function(){console.log('我是移入事件')},
'mouseout':function(){console.log('我是移出事件')}
})
// one()方法绑定事件
注意，one()方法和on()方法是一样的，区别是只能触发一次事件。
// hover()方法绑定事件
元素集合.hover(移入时触发的函数，移出时触发的函数)
注意：当你只传递一个参数时，其会在移入和移出时均触发。
// 常用事件函数
元素集合.click(事件处理函数) ...
$('div').click(function(){console.log('我是div的点击事件')})
// 给一个元素绑定多个事件
$('div').click(handleA)
.click(handleB)
.click(handleC)
注意：传递的是函数名，而不是函数名()，那样就执行啦。
10、事件解绑。
// off()事件解绑
// 解绑全部事件处理函数
元素集合.off('事件类型')
$('div').off('click')
注意：其会把该元素所有该事件类型的事件均解绑
// 解绑指定的事件处理函数
元素集合.off('事件类型',需要解绑的函数名)
$('div').off('click',handleB)
11、事件触发。
// trigger()事件触发
元素集合.trigger('事件类型')
$('div').trigger('click')
注意：其是使用代码的方式触发事件，而不需要我们人为手动的去触发。
12、动画函数。
基本动画：
// 三个共同参数
1、第一个参数是运动时间
2、第二个参数是运动曲线
3、第三个参数是运动结束的回调函数
注意：可以将函数放在事件内，并且搭配按钮一起使用！
// show() 显示函数
// hide() 隐藏函数
// toggle() 切换函数 原来显示则隐藏 原来隐藏则显示
$('button:nth-child(1)').click(function(){
// show
$('.box').show(1000,'linear',function(){console.log('show结束了')})
})
$('button:nth-child(2)').click(function(){
// hide
$('.box').hide(1000,'linear',function(){console.log('hide结束了')})
})
$('button:nth-child(3)').click(function(){
// toggle
$('.box').toggle(1000,'linear',function(){console.log('toggle结束了')})
})
折叠动画：
slideDown //向下
slideUp //向上
slideToggle //切换
注意：使用方法同上，只是改变了动画效果，其只改变元素的高度。
渐隐渐现：
fadeIn //显示
fadeOut //隐藏
fadeToggle //切换
fadeTo //多一个参数 第二个参数为指定的透明度 运动到指定的透明度
综合动画：
// animate()函数
1、第一个参数是运动样式 以一个对象数据类型传递
2、第二个参数是运动时间
3、第三个参数是运动曲线
4、第四个参数是运动结束的回调函数
$('button').click(function(){
$('.box').animate({width:'500px',height:'500px','background-color':'orange'},1000,'linear',function(){console.log('animate结束了')})
})
注意：颜色相关的不能运动，transform相关的也不能运动。
结束动画：
stop() // 会立即结束当前的所有运动
比如你连续点击n次 当你停止点击 其仍会按照指定速度执行n次 当前第3次 stop()后马上停下来
注意：一般将其写在执行动画之前，即在执行新动画前，停止之前的动画。
finish() // 会立即完成之前的所有运动
比如你连续点击n次 当你停止点击 其仍会按照指定速度执行n次 当前第3次 finish()后马上执行到结束处
注意：一般将其写在执行动画之前，即在执行新动画前，瞬间完成之前的动画。
13、Ajax。
注意：因为发送ajax请求不是操作DOM，所以不需要依赖选择器去获取元素，而是直接依赖JQuery或者$变量来使用。
$.ajax({本次发送ajax的配置项})
配置项：
1、url：必填，表示请求地址；
2、method：选填，默认是GET，表示请求方式；
3、data：选填，默认是''，表示携带给后端的参数；
4、async：选填，默认是true，表示是否异步；
5、success：选填，表示请求成功的回调函数；
6、error：选填，表示请求失败的回调函数；
$.post(url,data,callback,type) // 只有url必选 其他可选 type表示data的类型
14、链式操作。
链式操作：指的是使用多个.对某一对象按照顺序进行先后操作。
$("#Test").addClass('style').find("div").eq(0).fadeOut(200);
注意：上述代码的含义是，选中id为Test的元素，首先为其加上类名style，接着找到其子元素中的所有div元素，然后找到这些div元素中的第一个div元素，最后使其以200毫秒的时间隐出。
15、其他。
表单数据获取：(一般将表单数据通过ajax发送给后端就用serialize)
$('form').serialize() // 序列化表单值 返回值是&连接起来的key=value字符串
比如：username=123456&password=wxm&rpassword=wxm&nickname=wxm
location：(一般在js中刷新页面或者跳转页面就用window.location)
window.location.href='self.html' // 当前页面打开self.html页面
window.location.reload() // 刷新页面
16、localStorage。
localStorage：(一般同一网站的不同页面之间传递信息就用localStorage)
window.localStorage.setItem('token',res.token) // 设置
window.localStorage.getItem('token') // 获取
17、cookie。
cookie：( sessionID 钥匙 本地存储)
document.cookie="username=Kerwin" // key=value形式的字符串
// 设置路径
document.cookie="password=123456;Path=/"
var date=new Date() //当前日期
date.setHours(date.getHours()+1) //一小时过期
// 设置过期时间
document.cookie=`nickname=xiaohuilang;expires=${date}`
cookie可以通过浏览器检查工具Application的Storage的Cookies来查看。
// 获取
console.log(document.cookie) // 如果设置了HttpOnly则不可获取
// 输出：username=Kerwin; nickname=xiaohuilang; password=123456
注意：localStorage是挂在window身上的，而cookie是挂在document身上的；localStorage是永久存储，而cookie是关闭浏览器就没有啦。
18、jsonp。
同源策略：同域名、同端口号、同协议。如果不符合同源策略，浏览器为了安全，会阻止请求。
jsonp可以让网页从别的域名(网站)获取资料，即跨域获取。
注意：一个页面中可以编写多个script，当你页面中的script的src属性指向的是一个txt文件，其中写的是js代码，其仍然可以被正常执行。
jsonp的原理是：动态创建script标签，src属性指向没有跨域限制。其指向一个接口，接口返回格式一定是****()函数表达式。
http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction //jsonp接口
注意：上述接口会返回一个***()函数表达式，在script中编写函数表达式对应的函数即可。
myscript.src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=test" //函数名可更改
注意：callbackFunction返回callbackFunction用callbackFunction函数，test返回test用test函数。
缺点1：执行一次就创建一次script，这样会多余很多无用的标签。
//每点击一次就创建一个script
//等到script加载完成就删除
myscript.onload=function(){
myscript.remove()
}
缺点2：只能执行get请求。（无法解决）
19、深浅拷贝。
赋值操作=：
①基本类型：将=右边元素值赋值给左边
②复杂类型：将=右边地址赋值给左边
复杂类型一级嵌套：(浅拷贝)
①for循环
②...解构赋值
一级嵌套可以循环，但是多级嵌套该怎么办呢？递归！当当前元素为复杂类型则递归循环！（深拷贝）
var myobj1={name:"wxm",location:{city:"wuhan",province:"hubei"},a:{b:{c:1}}}
// console.log(myobj1.toString())
// [object Object]
var myobj2={}
function deepCopy(o2,o1)
{
for(var i in o1)
{
//if(o1[i]?.toString()==='[object Object]') // 复杂类型 ?表示如果不为空则执行
if(Object.prototype.toString.call(o1[i])==='[object Object]')
{
o2[i]={}
deepCopy(o2[i],o1[i]) //递归
}
else if(Object.prototype.toString.call(o1[i])==='[object Array]') // 复杂类型 数组
{
o2[i]=[]
deepCopy(o2[i],o1[i]) //递归
}
else // 简单类型
o2[i]=o1[i]
}
}
deepCopy(myobj2,myobj1)
深拷贝还可以使用JSON！（唯一的缺点是字段不能有undefined）
var myobj3=JSON.parse(JSON.stringify(myobj1))
Jquery中的深浅拷贝：(唯一的缺点也是字段不能有undefined)
$.extend(true,myobj2,myobj1,{m:1,n:2}) //将myobj1和{m:1,n:2}深复制给myobj2 true表示深拷贝
20、多库并存。
多库并存主要解决我们自己的库与jquery库的$变量重名问题。
var $ = {name:"wxm"} // $.js
<script src="./$.js"></script>
<script src="./jquery/jquery.js"></script> // 注意jquery在后面
<script>
$.noConflict() //表明把$交出去了 Jquery使用jQuery替代$
console.log($,jQuery) // {name:"wxm"} ƒ ( selector, context )
</script>
var $ = {name:"wxm"} var jQuery = {name:"hx"} // $.js
<script src="./$.js"></script>
<script src="./jquery/jquery.js"></script>
<script>
$.noConflict(true) //表明把$和jQuery都交出去了
console.log($,jQuery) // {name:"wxm"} {name:"hx"}
</script>
<script src="./$.js"></script>
<script src="./jquery/jquery.js"></script>
<script>
var wxm = $.noConflict(true) //表明使用wxm替代$
console.log($,jQuery)
console.log(wxm) //ƒ ( selector, context )
</script>
21、扩展机制。
使用.key()自定义方法来扩展jquery。
<script>
$.extend({ // 可以在该对象上挂多个函数
wxm:function(){console.log("wxm")}
})
$.wxm();
</script>
注意：$.extend()方法在深浅拷贝中是传递多个对象，而在扩展机制中只是传递一个对象。
<script>
$.extend({
wxm:function(){console.log("wxm")}
})
$.wxm();
console.log($.prototype===$.fn)
$.fn.extend({ // 也可以在其原型上挂多个函数
hx:function(){console.log("hx")}
})
$.prototype.hx(); //然后通过链式调用
$.fn.hx(); // 如果直接$.hx()会报错
</script>
22、封装成库。
1、dom结构满足要求；(即引用别人的库需要按照别人规定的dom结构编写)
2、引入css样式文件；(即别人在编写库时会把功能的css文件封装起来)
3、引入js事件文件；(即别人在编写库时会把功能的js文件封装起来)
下载：owlcarousel2.github.io/OwlCarousel…
文档：www.htmleaf.com/jQuery/Slid…
引入jquery：
<script src="./jquery/jquery.js"></script>
引入css：
<link rel="stylesheet" href="./OwlCarousel2-2.3.4/dist/assets/owl.carousel.css">
<link rel="stylesheet" href="./OwlCarousel2-2.3.4/dist/assets/owl.theme.default.css">
引入js：
<script src="./OwlCarousel2-2.3.4/dist/owl.carousel.js"></script>
编写dom：
<div class="owl-carousel owl-theme"> //外层div类名为owl-carousel 插件主题类名owl-theme
<div><img src="./imgs/01.jpg" alt=""></div>
<div><img src="./imgs/02.jpg" alt=""></div>
<div><img src="./imgs/03.jpg" alt=""></div>
<div><img src="./imgs/04.jpg" alt=""></div>
</div>
初始化：
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
传参数：
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
items:1, //显示一个项
loop:true, //循环播放
autoplay:true //自动播放
});
});
</script>
23、swiper。
下载：www.swiper.com.cn/download/in…
文档：www.swiper.com.cn/usage/index…
演示：www.swiper.com.cn/demo/index.…
swiper：我们可以在演示中选择我们想要的样式，然后在新窗口中打开，并且查看源码，接着查看script中的参数并且插入到我们的代码中，最后查看效果。swiper基于原生js的库，不依赖于任何库。
24、jquery项目总结。
1、项目结构：一般分为css文件夹、js文件夹、img文件夹以及众多html文件，其中一般一个页面对应一个js文件以及css文件，所有页面会共有一个base.css文件。
2、布局结构：根据设计图稿，首先编写html内容文件，即该页面由哪些部分组成，然后对比原始样式与期望样式，编写css样式文件，即将原始结构内容的默认样式转换为效果样式，接着根据页面的交互事件，编写js事件文件，即为页面元素增加交互效果，最后根据页面之间的逻辑关系，更改html或者js文件。
3、选择结构：当某一部分两个元素结构之间是选择关系，即在某条件满足时则是1出现，反之不满足则是2出现，这时我们可以将1和2放在同一个元素内，然后将其中之一的class设置为active，然后在js中判断某一条件是否满足，如果是则将2移除active并将1添加active，反之则将1移除active并将2添加active。
4、水平结构：一般水平结构的多个元素，将其放在同一个元素内，然后使用flex布局。
5、分块结构：一般分块结构的多个元素，将其放在同一个元素内，然后使用定位（或者其他）布局。
6、筛选结构：一般类似于淘宝购物，涉及到很多筛选需求，不同的需求对应的页面的展示也会不同，其中会涉及到很多参数，这时我们可以将这些参数，诸如当前页、页面大小、搜索内容、分类、筛选、折扣、排序等，封装为一个对象，然后使用ajax传递给后端。如果页面的渲染需要使用后端传递过来的数据，也可以将前端原本写好的静态html放入js中进行动态的渲染，因为``模板字符串中可以使用${}嵌入变量。如果给后端发送请求时需要携带数据，而我们又无法获取，那么可以在渲染的时候加在元素身上。如果需要给某一元素的多个相同结构的子元素身上添加某一事件，那么可以通过给该元素添加委托事件来实现。
