文章目录
一: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 文件。
可以在需要的时候直接加载该js文件
$.getScript( url , fn )
参数一:请求地址
参数二:回调函数
$.getScript("4getScript.js",function(){
changecolor($("#box"))
})
同时也可以指定加载该js文件的指定部分,url和指定的部分之间通过空格分开
$.getScript("4getScript.js li",function(){
changecolor($("#box"))
})
5·$.getJson( )
5·1:作用:
通过 HTTP 请求载入并执行一个 Json文件。
$.getJSON( url,fn})
参数一:请求地址
参数二:回调函数(处理返回的数据)
$("button").click(function(){
$.getJSON( "text.json" , function( data ){
// $.each(),用来遍历对象和数组
//参数一:遍历的对象或者是数组
//参数二:回调函数
//回调函数拥有两个参数,第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()结果返回的是布尔值
主要针对的是input的特殊属性,例如:selected,checked等]
读:
//一个参数为读:
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()); }); //该li是ul的第几个孩子,从0开始
三:节点的操作
3·1:查—查找DOM节点
通过各种选择器进行查询
3·2:建—新建DOM节点
创建:$()
追加:append();
//创建元素
let oLi = $("<li>");
oLi.html(666);
let oLi2 = $("<li>你好,李焕英</li>");
//添加元素
$("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>
= 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();