插件庫

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+=`<li><span>${data[i].date}</span><span>${data[i].fengli}</span><span>${data[i].fengxiang}</span><span>${data[i].high}</span><span>${data[i].low}</span><span>${data[i].type}</span></li>`}$("ul").html(li);}},error: function (e) {console.log(e);}})}else{alert("請輸入城市查詢")}})

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

總結

以上是生活随笔為你收集整理的jQuery学习第三天（插件库、引入页面、jQ中的ajax）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。