JQuery
1 jQuery初识
jQuery
jQuery是一个快速、简洁的JavaScript框架，一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery 代码库（封装好了很多的方法）<===> Vue （MVVM）
MVC --> M-model(数据) ----> V-view视图--->C-control（控制器）--->M-model(数据)--->V-view
jQuery是1个对象，也是1个函数对象，有很多好用的属性和方法。JavaScript语言写出来的一个函数对象。
jQuery现在已经发布到第三个大版本，一般用第一个版本，因为兼容性最好。第三个版本是IE9以上才兼容。(功能没啥变化)
2 jQuery使用
快速获取dom
语法：$(“选择器”)，按照css选择器进行选择即可
返回值：jQuery文档对象,注意这个jQuery对象跟原生的dom对象不是一个东西，这里面有jQuery封装好的方法。
快速设置文档样式
语法：$(“选择器”).css(“样式的属性”，“样式的值”)
一次性设置多个样式：
$(“选择器”).css({属性key：属性value,属性key:属性value......})
注意：如果属性key是由多个单词用-并联组成，那么必须用驼峰命名法，或者加引号来解决。
设置获取文档内容
语法：
$(“选择器”).html() ---->获取文档的html内容
$(“选择器”).text() ---->获取文档的text内容
$(“选择器”).val() ---->获取输入框的value值
$(“选择器”).html(“html内容”) ---->设置文档的HTML内容
$(“选择器”).text(“文本内容”) ---->设置文档的text内容
$(“选择器”).val(“value”) ---->设置输入框的value值
3 快速的写ajax
jQuery_Ajax
原生Ajax的步骤：
Xhr->xhr.open(get,url)->xhr.send->xhr.onrealystatechange
jQuery_Ajax:
语法：
$.get(url).then(function(res){获取内容执行的函数})
$.post(url).then(function(res){获取内容执行的函数})
不分方法：
$.ajax({
url:"服务器地址",
method:"请求方法",
data:{//传给服务器的参数
location:$("#city").val(),
key:'c8b18212397748599a7fb0bfa1022b56'
},success:function(res){//成功执行的函数
console.log("成功的执行：")
console.log(res)
},
fail:function(res){//失败执行的函数
console.log("失败的执行：")
console.log(res)
},
complete:function(res){//不管成功失败都会执行的函数
console.log("complete的执行：")
console.log(res)
}
})
})
快速将内容插入文档
语法：
$(选择器).append("<h1>helloworld</h1>") ---->将参数里面的html追加到选择器对象的最后一个子元素上
$('.child').appendTo('.parent2') ---->将选择器的对象插入到参数的对象上
$(".child").insertBefore("ul") ---->在什么前面插入内容
$('.child').insertAfter("ul") ---->//在什么后面插入内容
快速的写JS的动画
语法:
$(".parentt").slideToggle(5000) --->//滑动切换
$(".parentt").fadeToggle(5000) --->//淡入淡出切换
$(".parentt").fadeIn(5000,"linear",function(){console.log("动画完成")}) --->淡入进来
$(".parentt").fadeOut(5000) --->淡入出去
$('.parentt').animate({width:"900px"},5000,"linear",function(){console.log("动画已完成")})
推荐：添加类名的方式完成动画
$('.parentt').addClass("animate")
快速html事件
语法：
$(选择器).click(function(e){点击事件之后要执行的内容})
$(选择器).on(“事件的名称”，function(e){事件要执行的内容})
//文档加载完毕即执行事件，仅文档加载完毕，不用等待图片加载，可以将js代码放置到前后都行。
$(document).ready(function(){})
缩写：$(function(){})
快速的写ajax
