day32 jQuery 进阶

jQuery中的Ajax:

在jQuery中,下面6种方法只有load()需要jQueryDom对象打点来调,其他都是$直接调

  • $.Ajax()方法属于最底层的方法;
  • 第2层是load(),$.get(),和$.post();
  • 第3层是$.getScript()和$.getJSON()方法;

1. load() 方法

结构:load(url , [data] , [callback] )

案例1: load(url)



    
        
        
    
    
        

test.html 文件

hello world;

结果:将url返回的内容当做该元素的innerHTML。

image.png

案例2:页面头部重复引用

load.html文件



    
        
        
        
    
    
        

head.html文件(直接是代码,不需要写html head body等那些结构)

  • 主题1
  • 主题2
  • 主题3
  • 主题4
  • 主题5

改进,即在当前页面(2-header.html),只要load头部文件即可。当前页面不需要写css js(将html css js 都整合在2-head.html中)

2-header.html



    
        
        
            
    
        

2-head.html


  • 主题1
  • 主题2
  • 主题3
  • 主题4
  • 主题5

2-head.js

$("li").click(function() {
        console.log($(this).html());
    });

2-head.css 略

筛选载入的HTML文档

如果只要加载页面内的某些内容,可以使用load(URL selector)方法的URL参数来达到目的。

注意:URL和选择器之间有一个空格

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文件:


3-getAndPost.php

返回值:

  • 返回结果为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文件:



    
        
        
        
    
    
        

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)//请求失败时
});

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"));//checked
console.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
    });

image.png

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
        

(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());
    }

返回顶端

    
    
            
    

(9) index()

index();返回当前元素在父元素的下标

    $("li").click(function(){
        console.log($(this).index());
    });

(10) 节点操作

创建元素节点

追加节点

1) 尾插
append()
appendTo()
    let oLi = $("
  • "); 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) 加载图片的判断条件

    图片距离顶部的距离 < 浏览器滚动条滚动的高度 + 浏览器窗口的高度

    你可能感兴趣的