jQuery学习第三天（插件库、引入页面、jQ中的ajax）

插件库

superSlide、swiper 轮播图插件的网站，有说明书

jQ入口函数 $(document).ready(function(){})简写：$(function(){});

与原生js的入口函数的区别：
- 原生js入口函数在网页加载完毕，包括静态资源图片等加载结束后运行，并且只能写一次
- jQ入口函数在DOM加载完毕后执行，可以写多次

jQ引入页面

引用的资源要保证在同一服务器下,要用live server打开
$(function){
$(需要添加的容器).load(资源路径)
}

.load()是异步函数，正常js执行是由上到下执行，遇到异步函数就跳过，最后执行

$(".box").load("插件轮播图.html")

JQ中的ajax

$.ajax({
url:"url",    // 地址
type:"type",  // 请求方式
data:{data:data},  // 传递参数
dataType:"dataType",  // 常用 json
timeout:timeout,  // 请求时间，毫秒数
headers:{},  // 请求头
success:function(){},  // 请求成功时执行的代码
error:function(){}   // 请求失败执行的代码
})

ajax练习 城市天气
html代码：

 <input type="text" id="ipt" value="南京"><button>搜索</button>
    <ul></ul>

js代码：

    // 点击事件
    $("button").click(function () {
        // 判断输入框是否有值
        if ($("#ipt").val()) {
            // 调接口
            $.ajax({
                url: "http://wthrcdn.etouch.cn/weather_mini?city=" + $("#ipt").val(),
                type: "get",
                dataType: "json",
                success: function (res) {
                    if(res.status==1000){
                        var data = res.data.forecast;
                        var li = "";
                        // 字符串拼接
                        for(var i in data){
                            li+=`
                            ${data[i].date}
                            ${data[i].fengli}
                            ${data[i].fengxiang}
                            ${data[i].high}
                            ${data[i].low}
                            ${data[i].type}
                            `
                        }
                        $("ul").html(li);
                    }
                },
                error: function (e) {
                    console.log(e);
                }
            })
        }else{
            alert("请输入城市查询")
        }

    })

注意使用前，要先引入jQuery文件