jQuery中的Ajax：
在jQuery中，上面6种办法只有load()须要jQueryDom对象打点来调，其余都是$间接调
- $.Ajax()办法属于最底层的办法；
- 第2层是load()，$.get()，和$.post()；
- 第3层是$.getScript()和$.getJSON()办法；
1. load() 办法
构造：load(url , [data] , [callback] )
案例1： load(url)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="box"> </div> </body></html><script src="myjQuery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> $(function(){ //load办法加载html $("#box").load("test.html"); });</script>test.html 文件
hello world；
后果：将url返回的内容当做该元素的innerHTML。
案例2：页面头部反复援用
load.html文件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } header { height: 100px; background: yellow; } header ul { height: 100px; width: 800px; position: relative; margin: 0 auto; opacity: 0.5; } header ul li { list-style: none; width: 150px; background: red; text-align: center; line-height: 100px; border: 1px solid black; float: left; } section { height: 300px; background: green; opacity: 0.3; } footer { height: 300px; background: blue; opacity: 0.3; } </style> </head> <body> <header> </header> <section> </section> <footer> </footer> </body></html><script src="jQuery.js"></script><script type="text/javascript"> $('header').load("head.html",function(){ $("li").click(function(){ console.log($(this).html()); }); });</script>head.html文件(间接是代码，不须要写html head body等那些构造)
<ul> <li>主题1</li> <li>主题2</li> <li>主题3</li> <li>主题4</li> <li>主题5</li></ul>改良，即在以后页面(2-header.html)，只有load头部文件即可。以后页面不须要写css js(将html css js 都整合在2-head.html中)
2-header.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> </header> <section> </section> <footer> </footer> </body></html><script src="../jQuery.js"></script><script type="text/javascript"> $("header").load("2-head.html");</script>2-head.html
<link rel="stylesheet" type="text/css" href="2-head.css"/><ul> <li>主题1</li> <li>主题2</li> <li>主题3</li> <li>主题4</li> <li>主题5</li></ul><script src='2-head.js'></script>2-head.js
$("li").click(function() { console.log($(this).html()); });2-head.css 略
筛选载入的HTML文档
如果只有加载页面内的某些内容，能够应用load（URL selector）办法的URL参数来达到目标。
留神：URL和选择器之间有一个空格
<script type="text/javascript"> //只申请2-head.html中的ul，其余以及link script都申请 $("header").load("2-head.html ul");</script>2. $.get() 和 $.post()
load（）通常是从web服务器上获取动态的数据文件，如果须要专递一些参数给服务器中的页面，能够应用
$.get( ) 办法和$.post（）办法（或$.ajax()办法）
构造：
- $.get(url,[data],[callback],[type]);
参数解释：
- data: 以json的形式传参
回调函数的参数是固定的（相似于forEach,filter那些回调，参数也是固定的）。回调含税只有当数据胜利（success）后能力被调用。
- 第一个是返回的内容responseText，能够是XML文档，json文件，XHML片段等
- 第二个是响应状态status。 申请状态：success error
案例：
html文件：
<script src="../jQuery.js"></script><script type="text/javascript"> //留神: 运行php文件须要关上phpStudy软件作为服务器,并应用服务器地址运行代码 $.get("3-getAndPost.php",{name:"xiaoming",age:18},function(resText,status){ console.log(resText);//xiaoming 18 console.log(status);//success }); </script>3-getAndPost.php
<?php header("Content/type:text/xtml;charset=utf-8"); $name = $_REQUEST["name"]; $age = $_REQUEST["age"]; echo $name . ' ' . $age;?>返回值：
- 返回后果为promise对象
案例：
// get和post的返回值: promise对象 // $.get().then(胜利的回调, 失败的回调) $.get("3-getAndPost.php",{name:"xiaohong",age:20},function(res){ console.log(res);//xiaohong 20 }).then(function(resText,status){ console.log(resText);//xiaohong 20 console.log(status);//success },function(){ console.log("失败"); })因为应用办法雷同，因而只有扭转jQuery函数，就能够将程序在GET申请和POST申请之间切换；
$.post() 办法和$get()办法的构造和应用办法雷同，不过依然有一些区别：
get与post区别：
post的安全性高于get；
- 如果以get形式申请，申请参数会拼接到url前面，安全性性低，
- 以post形式申请，申请参数会包裹在申请体中，安全性更高；
数据量区别：
- get形式传输的数据量小，规定不能超过2kb，
- post形式申请数据量大，没有限度。
- 传输速度：get的传输速度高于post
3. $.getScript() 和$getJson()
有时候，在页面呈现时就获取所需的全副JavaScript文件是齐全没有必要的，能够在须要的时候间接加载。jQuery提供了 $.getScript( )办法来间接加载js文件，与加载一个HTML片段一样简略不便，并且不须要对JavaScript文件进行解决，JavaScript文件会主动执行。
$.getScript()构造：
$.getScript(url,fn);
- url 申请地址
- fn 回调
html文件：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { width: 100px; height: 100px; border: 1px solid red; } </style> </head> <body> <div id="box"> </div> </body></html><script src="../jQuery.js"></script><script type="text/javascript"> $.getScript("4-getScript.js",function(){ changeColor($("#box")); });</script>4-getScript.js
function changeColor(obj) { let color = "#"; let str = "0123456789abcdef"; for (let i = 0; i < 6; i++) { color += str.charAt(Math.round(Math.random() * 15)); } obj.css({ backgroundColor: color }); }$.getJSON()构造：
$.getJson( )办法用于加载JSON文件，与$.getScript( )办法的用法雷同;
$.getJSON( url，回调函数);
当点击加载时，页面上看不到任何成果，尽管函数加载了JSON文件，然而并没有告知JavaScript对返回的数据如何解决，为此，所以在回调函数里咱们能够解决返回的数据
通常咱们须要遍历咱们失去的数据，尽管这里咱们能够应用传统的for循环，然而咱们也能够通过$.each()，能够用来遍历对象和数组，$.each()函数是以一个数组或者对象为第1个参数，以一个回调函数作为第2个参数，回调函数领有两个参数，第1个为对象的成员或者数组的下标，第2个位对应变量或内容
$(function(){ $("button").click(function(){ $.getJSON( "text.json" , function( data ){ $.each( data ， function（index，comment）{ 解决数据... } }) })})4. $.Ajax()
后面用到的$.load()，$.get()，$.post()，$.getScript()，$.getJSON()这些办法，都是基于$.ajax()办法构建的，$.ajax()是jQuery最底层的Ajax实现，因为能够用来代替后面的所有办法。
所以如果除了下面，还须要编写一下简单的Ajax程序，那么就要用$.ajax()。
语法：
$.ajax({ url: 申请地址， type: "get(默认)"/"post"/"put"/"delete"， data: 申请参数 {id:123,pwd:456}, //dataType:申请数据类型"html | text | json | xml | script | jsonp ", success:function(data,dataTextStatus,jqxhr){ },//申请胜利时 error:function(jqxhr,textStatus,error)//申请失败时});<script type="text/javascript"> $.ajax({ url:"3-getAndPost.php", type:"get", data:{ name: "彭于晏", age: "18" }, success:function(resText){ console.log(resText);//彭于晏 18 } });</script>5. jQueryDom(各种API)
(1) 先人
parent();parents();(2) 后辈
children();find();//必须有参数(3) 兄弟
siblings();//除了本人之外的所有兄弟next();nextAll();prev();prevAll();(4) 过滤 (筛选)
eq();(5) 操作元素属性
attr()
.attr();.prop();//两者区别：input的checked属性console.log($("input").attr("checked"));//checkedconsole.log($("input").prop("checked"));//true所以true/false对于逻辑判断更罕用 let oBox = document.getElementById("box"); // 原生批改属性值 oBox.id = "heihei"; // 原生读取属性值 console.log(oBox.id);//heihei //一个参数为读 console.log($("#box").attr("id"));//xixi //两个参数为改或者增加 $("#box").attr("id","xixi"); $('#xixi').attr("name","oBox"); // 增加多个属性 $("#xixi").attr({ a:1, b:2, c:3 });css()
// css() //写 $('#box').css({ width: 100, height: 100, backgroundColor: "pink" }); // 读(很少用css读属性) console.log($("#box").css("width"));//100px //一次读取多个值 console.log($("#box").css(["width","height","backgroundColor"]));(6) 宽度
- witdh
- innerWidth
- outerWidth
<style type="text/css"> #box{ width: 100px; height: 100px; background: #0000FF; border: 10px solid red; padding: 20px; } </style><script src="jQuery.js"></script><script type="text/javascript"> console.log($("#box").width());//content 100 console.log($("#box").innerWidth());//content+padding 100+20*2= 140 console.log($("#box").outerWidth());//content+padding+border 100+2*20+10*2=160</script>(7) 偏移offset()
offset()自带相对定位
// 写 $("#box").offset({ left: 200, top: 300 }); // 读 console.log($("#box").offset().left);//200 console.log($("#box").offset().top);//300(8) 滚动条高度scrollTop()
window.onscroll事件
window.onscroll = function(){ console.log($(window).scrollTop()); }返回顶端
<style type="text/css"> body{ height: 1000px; } </style> <body> <button type="button">返回顶端</button> </body><script> $("button").click(function(){ $(window).scrollTop(0); })</script>(9) index()
index();返回以后元素在父元素的下标
$("li").click(function(){ console.log($(this).index()); });(10) 节点操作
创立元素节点
<script> //创立办法1： let oDiv = $("<div>"); oDiv.html(123); //创立办法2： let oDiv = $("<div>666</div>"); // 追加 $("body").append(oDiv);</script>追加节点
1) 尾插
append()
appendTo()
let oLi = $("<li>"); oLi.html("xixi"); $("ul").append(oLi); oLi.appendTo($("ul"));2) 头插
prepend()
prependTo()
$("ul").prepend(oLi); oLi.prependTo($("ul"));3) 插入到指标元素之后
after()
insertAfter()
$("li").eq(2).after(oLi); oLi.insertAfter($("li").eq(2));4) 插入到指标元素之前
before()
insertBefore()
$("li").eq(2).before(oLi); oLi.insertBefore($("li").eq(2));6. 懒加载
1）什么是懒加载
懒加载其实就是提早加载，是一种对网页性能优化的形式，比方当拜访一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当须要显示的时候再发送图片申请，防止关上网页时加载过多资源。
2) 什么时候用懒加载
当页面中须要一次性载入很多图片的时候，往往都是须要用懒加载的。
3) 懒加载原理
- 咱们都晓得HTML中的< img >标签是代表文档中的一个图像;
- < img > 标签有一个属性是src，用来示意图像的URL，当这个属性的值不为空时，浏览器就会依据这个值发送申请。如果没有src属性，就不会发送申请。
- 咱们先不给< img >设置src，把图片真正的URL放在另一个属性data-src中，在须要的时候也就是图片进入可视区域的之前，将URL取出放到src中。
4) 须要用到知识点
(1) 图片间隔顶部的高度:
- img.offsetTop
(2) 以后窗口的高度:
- window.innerHeight
(3) 滚动条滚动的高度:
- document.body.scrollTop || document.documentElement.scrollTop
5) 加载图片的判断条件
图片间隔顶部的间隔 < 浏览器滚动条滚动的高度 + 浏览器窗口的高度