乐趣区

关于jquery: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)

<!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"));//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
    });

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) 加载图片的判断条件

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

退出移动版