jQuery，jQuery_Ajax
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以上才兼容。(功能没啥变化)
jQuery原理：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1></h1> <script type="text/javascript"> //jQurey 原理 (function(window){ //selector 选择器 var lc =function(selector){ var dom =document.querySelector(selector) var result = { dom : dom } //原型对象 var yxObj = { //如果有参数就设置innerHtml的内容，没有就返回innerHtml的内容 html: function(content){ if(content){ this.dom.innerHTML = content return this }else{ return this.dom.innerHTML } }, css:function(key,value){ this.dom.style[key] = value; } } //设置result的原型对象是yxObj result.__proto__ = yxObj return result } window.lc=lc })(window) //lc("h1").html("<span>老陈库</span>") //lc('h1').css('background',"purple") //链式原理：返回的值为当前的对象，返回this lc('h1').html("<span>老陈jq库</span>").css('background',"pink") </script> </body> </html>
快速获取dom
语法：$(“选择器”)，按照css选择器进行选择即可
返回值：jQuery文档对象,注意这个jQuery对象跟原生的dom对象不是一个东西，这里面有jQuery封装好的方法。
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>helloworld</h1> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //同一个对象 console.log($) console.log(jQuery) //简单用法 $("h1").css({ background:"skyblue", fontSize:"50px", color:"#fff" }).html("zhongwu").css({ border:"10px solid #000" }) //1.快速获取document //var h2 = document.querySelector("h1") var h1 = $("h1") //h2.style.background = "skyblue" //h1[0].style.fontSize = "50px" //css方法快速更改样式 h1.css("font-size","100px") h1.css({ border:"1px solid #000", "box-shadow":"0px 5px 10px #ccc" }) //2.快速设置文档样式 //3.快速设置文档内容 //4.快速将内容插入文档 //5.快速的写JS的动画 //6.快速html事件 //7.快速的写ajax </script> </body> </html>
快速设置文档样式
语法：$(“选择器”).css(“样式的属性”，“样式的值”)
一次性设置多个样式：
$(“选择器”).css({属性key：属性value,属性key:属性value......})
注意：如果属性key是由多个单词用-并联组成，那么必须用驼峰命名法，或者加引号来解决。
设置获取文档内容
语法：
$(“选择器”).html() ---->获取文档的html内容
$(“选择器”).text() ---->获取文档的text内容
$(“选择器”).val() ---->获取输入框的value值
$(“选择器”).html(“html内容”) ---->设置文档的HTML内容
$(“选择器”).text(“文本内容”) ---->设置文档的text内容
$(“选择器”).val(“value”) ---->设置输入框的value值
快速将内容插入文档
语法：
$(选择器).append("<h1>helloworld</h1>") ---->将参数里面的html追加到选择器对象的最后一个子元素上
$('.child').appendTo('.parent2') ---->将选择器的对象插入到参数的对象上
$(".child").insertBefore("ul") ---->在什么前面插入内容
$('.child').insertAfter("ul") ---->//在什么后面插入内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="parent" class="parent"> </div> <div class="parent2"> <h1>woaini</h1> </div> <input type="text" name="user" id="user" value="" /> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ul> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //2.快速设置文档样式文档内容 $("#parent").html("<h1>woaini</h1>") console.log($("#parent").html()) //3.快速更改文档内容 $("#parent").text("helloworld") console.log($("#parent").text()) //4.快速将内容插入文档 $("#user").val("admin") console.log($("#user").val()) $("ul li").css("background",'skyblue').html('都是列表！！！！') //往选择器里面插入数据 $(".parent").append("<h1>helloworld</h1>") //将选择器的对象插入到参数的对象上。 $(".parent").appendTo(".parent2") //在什么前面插入内容 $(".child").insertBefore("ul") //在什么后面插入内容 $('.child').insertAfter("ul") //5.快速的写JS的动画 //6.快速html事件 //7.快速的写ajax </script> </body> </html>
快速的写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")
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 600px; height: 600px; margin: 0 auto; background: greenyellow; } .animate{ animation: donghua 5s forwards; } @keyframes donghua{ from{ width: 600px; height: 600px; background: greenyellow; } to{ width: 900px; height: 900px; background: purple; } } </style> </head> <body> <div id="parent" class="parent"> <h1>helloworld</h1> </div> <button>动画切换</button> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //5.快速的写JS的动画 var btn = document.querySelector("button") var isFade = false ; btn.onclick = function(){ //滑动切换 //$(".parent").slideToggle(5000) //滑动切换 //$(".parent").slideToggle(5000) //淡入淡出切换 //$(".parent").fadeToggle(5000) /*if(isFade){ $(".parent").fadeIn(5000,"linear",function(){ console.log("动画完成") }) isFade = false }else{ $(".parent").fadeOut(5000) isFade = true; }*/ //不建议这样直接写动画。性能消耗比较大。使用间隔函数完成动画样式。 /*$('.parentt').animate({ width:"900px" },5000,"linear",function(){ console.log("动画已完成") })*/ //最佳 $('.parent').addClass("animate") } //6.快速html事件 //7.快速的写ajax </script> </body> </html>
快速html事件
语法：
$(选择器).click(function(e){点击事件之后要执行的内容})
$(选择器).on(“事件的名称”，function(e){事件要执行的内容})
//文档加载完毕即执行事件，仅文档加载完毕，不用等待图片加载，可以将js代码放置到前后都行。
$(document).ready(function(){})
缩写：$(function(){})
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="js/ajax.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("button").click(function(event){ console.log(event) $("button").css('background',"skyblue") }) $('button').on("click",function(e){ console.log(e) console.log("on输出来的事件") }) // $(document).ready(function(){ $(function(){ console.log($("#search")) $("#search").keypress(function(e){ if(e.key == "Enter"&&$("#search").val()!=""){ var urlHttp = `https://free-api.heweather.net/s6/weather/now?location=${$("#search").val()}&key=c8b18212397748599a7fb0bfa1022b56` ajax(urlHttp,function(xhr){ //console.log(xhr) var jsonObj = JSON.parse(xhr.responseText) console.log(jsonObj) var now = jsonObj.HeWeather6[0].now console.log(now) $(".weather").html(` <h1>温度：${now.tmp}</h1> <h2>体感温度：${now.fl}</h2> <h3>天气状况:${now.cond_txt}</h3> <img src="https://cdn.heweather.com/cond_icon/${now.cond_code}.png"/> <h3>风向:${now.wind_dir}</h3> ` ) var lifestyleUrl = `https://free-api.heweather.net/s6/weather/lifestyle?location=${$("#search").val()}&key=c8b18212397748599a7fb0bfa1022b56` ajax(lifestyleUrl,function(xhr){ var jsonObj = JSON.parse(xhr.responseText) console.log(jsonObj) var lifestyle = jsonObj.HeWeather6[0].lifestyle console.log(lifestyle) $(".weather").append(` <h3>舒适度建议:${lifestyle[0].txt}</h3> <h3>洗车建议:${lifestyle[6].txt}</h3> <h3>穿衣指南:${lifestyle[1].txt}</h3> `) }) }) } }) }) </script>
jQuery_Ajax
原生Ajax的步骤：
Xhr->xhr.open(get,url)->xhr.send->xhr.onrealystatechange
jQuery_Ajax:
语法：
$.get(url).then(function(res){获取内容执行的函数})
$.post(url).then(function(res){获取内容执行的函数})
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="city" id="city" value="" placeholder="请输入查询的城市" /> <div class="weather"> </div> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#city").keypress(function(e){ if(e.key=="Enter"&&$("#city").val()!=""){ console.log($("#city").val()) var urlHttp = `https://free-api.heweather.net/s6/weather/now?location=${$("#city").val()}&key=c8b18212397748599a7fb0bfa1022b56` $.get(urlHttp).then(function(res){ console.log(res) var now = res.HeWeather6[0].now console.log(now) $('.weather').html(` <h1>温度：${now.tmp}</h1> <h2>体感温度：${now.fl}</h2> <h3>天气状况:${now.cond_txt}</h3> <img src="https://cdn.heweather.com/cond_icon/${now.cond_code}.png"/> <h3>风向:${now.wind_dir}</h3> `) }) } }) </script> </body> </html>
不分方法：
$.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)
}
})
})
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="city" id="city" value="" placeholder="请输入查询的城市" /> <div class="weather"> </div> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#city").keypress(function(e){ if(e.key=="Enter"&&$("#city").val()!=""){ $.ajax({ url:"https://free-api.heweather.net/s6/weather/lifestyle", method:"get", 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) } }) } }) </script> </body> </html>
