jQuery(ajax)

一：juqury的ajax

jquery中ajax的层级

底层：$.ajax（）

中层：load（），$.get（），$.post（）

高层：$.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：返回结果

$.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();