文章目录
一：juqury的ajax
jquery中ajax的层级
底层：$.ajax（）
中层：load（）， . g e t （ ） ， .get（）， .get（），.post（）
高层： . g e t S c r i p t （ ） ， .getScript（）， .getScript（），.getJson（）
1·load方法：
1·1：作用：
载入远程 HTML 文件代码并插入至 DOM 中
jQueryDom.load（url，[load]，[callback]）
参数一：网址，路径
参数二：发送到服务器的数据
参数三：载入成功时的回调函数:
1·2：案例：
使用load多次重复的使用同一个版块
1·3：传递方式：
根据参数data来自动指定。如果没有参数传递，则采用get方式，反之，则自动转换为post方式。
【注意】在load（）方法中，无论Ajax请求是否成功，只要请求完成。回调函数就被触发。
2：$.get（）
2·1：作用：
远程 HTTP GET 请求载入信息。
$.get( url，[ data ]，[ callback ]，[ type ])
参数一：网址，路径
参数二：发送到服务器的数据
参数三：载入成功时的回调函数:
参数四：返回内容的格式，xml，html，json…
$.get("3getAndPost.php",{name:"李焕英",age:60},function(restext,status){
console.log(restext);
console.log(status)
})
3：$.post（）
3·1：作用
远程 HTTP POST 请求载入信息。
$.POST ( url，[ data ]，[ callback ]，[ type ])
参数一：网址，路径
参数二：发送到服务器的数据
参数三：载入成功时的回调函数:
参数四：返回内容的格式，xml，html，json…
3·2：返回结果
. p o s t （ ） 和 .post（）和 .post（）和.get（）的结果返回的是一个promise对象
$(function(){
$.get("testFile/4test.php",{name:"老王"},function(res,status){
console.log(res);
}).then(function(res){
console.log("成功"+res);
},function(res){
console.log("失败"+res);
});
})
3·3：get和post的区别
-
1.post的安全性高于get；如果以get方式请求，请求参数会拼接到url后面，安全性性低，以post方式请求，请求参数会包裹在请求体中，安全性更高
-
2.数量区别：get方式传输的数据量小，规定不能超过2kb，post方式请求数据量大，没有限制。
-
3.传输速度：get的传输速度高于post
4 $.getScript( )
4·1：作用：
通过 HTTP 请求载入并执行一个 JavaScript 文件。
可以在需要的时候直接加载
$.getScript( url , fn )
参数一：请求地址
参数二：回调函数
$.getScript("4getScript.js",function(){
changecolor($("#box"))
})
5·$.getJson( )
5·1：作用：
通过 HTTP 请求载入并执行一个 Json文件。
$.getJSON( url，fn})
参数一：请求地址
参数二：回调函数（处理返回的数据）
$("button").click(function(){
$.getJSON( "text.json" , function( data ){
// $.each(),用来遍历对象和数组
//$.each()函数是以一个数组或者对象为第1个参数，
//以一个回调函数作为第2个参数，
//回调函数拥有两个参数，第1个为对象的成员或者数组的下标，第2个位对应变量或内容
$.each( data ， function（index，comment）{
处理数据...
}
})
})
6,$.ajax（）
6.1:作用：
$.ajax()是jQuery最底层的Ajax实现，因为可以用来代替前面的所有方法。
$.ajax({
url：请求地址
type:"get | post " 默认是get,
**data:**请求参数 {“id”:“123”,“pwd”:“123456”},
**//dataType:**请求数据类型"html | text | json | xml | script | jsonp ",
**success:**function(data,dataTextStatus,jqxhr){ },//请求成功时
**error:**function(jqxhr,textStatus,error)//请求失败时
})
$.ajax({
url:"3getAndPost.php",
type:"get",
data:{
name:"彭于晏",
age:12
},
success:function(restext){
console.log(restext)
}
});
二：jquery的各种API
2·1：元素属性的获取和设置
-
attr（）,
-
prop( )[当需要判断是使用prop（）结果返回的是布尔值]
//一个参数为读：
console.log($("#box").attr("id"));
//二个参数为改或者添加
$("#box").attr("id","myBox");
$("#myBox").attr("name","oBox");
//多个属性添加
$("#myBox").attr({
a:1,
b:2,
c:3
});
2·2：宽度
-
witdh （）content区域的宽
-
outerWidth（）content+padding+border的宽
-
innerWidth（）padding+content的宽
console.log($("#box").eq(0).width());
console.log($("#box").eq(0).outerWidth());
console.log($("#box").eq(0).innerWidth());
2·3：偏移
-
offset（）
不添加position的情况下也可以偏移
$("#box").offset({ left:100, top:100 });
2·4：滚动条
- scrollTop（）
//获取scrollTop的值:
window.onscroll = function(){
console.log($(window).scrollTop());
}
//返回顶端：设置scrollTop的值:
$("button").click(function(){
$(window).scrollTop(0);
);
2.5:相对于父元素的子元素的下标
-
index（）
$("li").click(function(){ console.log($(this).index()); });
三：节点的操作
3·1：查—查找DOM节点
3·2：建—新建DOM节点
创建：$()
追加：append();
//创建元素
let oLi = $("<li>");
oLi.html(666);
//添加元素
$("ul").append(oLi);
3·3：增—添加DOM节点
-
append（）——>尾插
-
appendTo()
let oLi = $("<li>"); oLi.html("xixi"); $("ul").append(oLi); oLi.appendTo($("ul")); -
prepend() ——>头插
-
prependTo()
-
after() ——>某一个元素之后插入
-
insertAfter()
-
before()——>某一个元素之前插入
-
insertBefore()
3·4：删—删除DOM节点操作
- remove()
- empty()
四：懒加载
定义：懒加载，就是一种延迟加载，是一种网页性能的优化
当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。
原理：我们先不给设置src，把图片真正的URL放在另一个属性data-src中，在需要的时候也就是图片进入可视区域的之前，将URL取出放到src中。
需要用到知识点:
(1) 图片距离顶部的高度:
img.offsetTop
(2) 当前窗口的高度:
window.innerHeight
(3) 滚动条滚动的高度:
document.body.scrollTop || document.documentElement.scrollTop
加载图片的判断条件:
图片距离顶部的距离 < 浏览器滚动条滚动的高度 + 浏览器窗口的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
position: absolute;
width: 200px;
}
</style>
</head>
<body>
</body>
</html>
<script>
class WaterFall{
constructor() {
}
createDiv(){
for(let i=0; i<14; i++){
let div = document.createElement("div");
div.innerHTML = i;
let rnd = Math.round(Math.random()*300+50);//生成50~350的随机数
div.style.height = rnd + "px";
div.date_src = "url(img/" + i + ".jpg)";
div.style.backgroundSize = "200px" + " " + rnd + "px";
document.body.appendChild(div);
}
this.change();
}
change(){
let oArrDiv = document.getElementsByTagName("div");
let n = Math.floor(window.innerWidth/210);
let arrH = [];
for(let i=0; i<oArrDiv.length; i++){
//图片距离顶部的距离 < 浏览器滚动条滚动的高度 + 浏览器窗口的高度
if(oArrDiv[i].offsetTop < document.documentElement.scrollTop + document.documentElement.clientHeight){
this.loadImg(oArrDiv[i]);
}
if(arrH.length == n){
let index = this.findMin(arrH);
oArrDiv[i].style.left = 200*index + 10*index + "px";
oArrDiv[i].style.top = arrH[index] + 10 + "px";
arrH[index] += oArrDiv[i].offsetHeight + 10;
}else{
oArrDiv[i].style.top = "0" + "px";
oArrDiv[i].style.left = 200*i + 10*i + "px";
arrH[i] = oArrDiv[i].offsetHeight;
}
}
}
findMin(arrH){
let index = 0;
for(let i=0; i<arrH.length; i++){
if(arrH[index]>arrH[i]){
index = i;
}
}
return index;
}
moveScroll(){
let top = 0;
let that = this;
window.onscroll = function(){
top = document.body.scrollTop || document.documentElement.scrollTop;
if(top > 400){
that.createDiv();
}
}
}
loadImg(oDiv){
if(oDiv.src == null){
oDiv.style.background = oDiv.date_src;
}
}
}
let wf = new WaterFall();
wf.createDiv();
wf.createDiv();
wf.moveScroll();
</script>
crollTop || document.documentElement.scrollTop;
if(top > 400){
that.createDiv();
}
}
}
loadImg(oDiv){
if(oDiv.src == null){
oDiv.style.background = oDiv.date_src;
}
}
}
let wf = new WaterFall();
wf.createDiv();
wf.createDiv();
wf.moveScroll();
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
