jQuery學習小結------2 - tw511教學網

jQuery的動畫

show()

顯示

//2000毫秒內顯示div
$("div").show(2000);

hide()

隱藏

//2000毫秒內隱藏div
$("div").hide(2000);
//先隱藏後顯示
$("div").hide(2000).show(2000);

slideUp()

向上收起

//在2000毫秒內向上收起
$("div").slideUp(2000);

slideDown

向下展開

//在2000毫秒內向下展開
$("div").slideDown(2000);

fadeIn()

淡入透明度逐漸到1

//在2000毫秒內div的透明度從0漸變爲1
$("div").fadeIn(2000);

fadeOut()

淡出透明度逐漸到0

//在2000毫秒內div的透明度從1漸變爲0
$("div").fadeOut(2000);

fadeTo()

在一定時間內，透明到指定透明度

//在2000毫秒內div的透明度從1漸變爲0.4
$("div").fadeTo(2000,0.4);

animate()

實現運動狀態的位移動畫

只要是數位顯示的屬性都可以設定

$("div").animate({
	left:400,
     top:400,
     width:100,
     height:100,
},2000)

通過連綴實現佇列動畫

$("div").animate({
	left:100,
},50).animate({
	top:100,
},50).animate({
	left:0
},50).animate({
	top:0
},50)

jQuery的外掛

外掛
- 像jQuery的方法一樣自己封裝方法

外掛的使用方法

$.fn.f=function(){}

需要返回this，供連綴呼叫使用

加入新的功能屬性

//重構width()方法
$.fn.widths=function(w){
    // console.log(this);//this是選擇的jQuery物件
    // 獲取寬度
    if(w===undefined) return parseFloat(this.css("width"));
    // 設定寬度
    w=parseFloat(w)
	if(isNaN(w)) return;
	this.css({
        // width:String(w).includes("px")?String(w):String(w)+"px",
        width:w+"px",
	})
}
$("div").widths(1200);

// 重構 獲取和設定背景色
$.fn.bgc=function(color){
    // 獲取背景色
    if(color===undefined) return this.css("backgroundColor");
    // 設定背景色
    this.css("backgroundColor",color);
    return this;
}

$.extend(){fn:{}}

不需要返回this，使用$.fn()呼叫使用

// 重構$.each();
$.extend({
    eachs:function(list,fn){
        switch(list.constructor){
            case Array:
            case jQuery:
            case HTMLAllCollection:
            case NodeList:
                for(var i=0;i<list.length;i++){
                fn(i,list[i]);
                }
            	break;
            case Object:
                for(var prop in list){
                fn(prop,list[prop]);
                }
                break;
            case Set:
                for(var value of list){
                fn(value,value);
                }
                break;
            case Map:
                for(var value of list){
                fn(value[0],value[1]);
                }
                break;
        }
    }
})

JQuery外掛開發步驟
- 使用閉包
  - 避免全域性依賴
  - 避免第三方破壞
  - 相容JQuery操作符"$「和"JQuery」
- 擴充套件
  - JQuery提供了兩個供使用者擴充套件的基礎類別—— $.extend和$ .fn.extend
  - $.extend用於自身方法
  - $.fn.extentd使用者擴充套件jquery類
- 選擇器
  - 儘量使用Id選擇器
  - 樣式選擇器應該儘量明確指定的tagName，例如className爲jq的div，要寫成 $('div.jq')而不是$ (’.jq’)

jQuery的ajax

最頂層
- $.getJSON()
  - 載入本地json檔案，可以獲取到json檔案中的內容
```
$.getJSON("./config.json",function(data){
	console.log(data);
}) 
```
- $.getScript()
  - 載入本地js檔案，載入完成後可以獲取到js檔案中的內容，並且能直接執行js檔案中是程式碼
```
$.getScript("./a.js",function(){
	obj.c();
})
```

中間層

$.get()

使用GET方式請求服務

能獲取到伺服器返回的訊息

$.get("http://localhost:4006?user=hm&age=18",function(data){
	console.log(data);//data是伺服器返回的訊息
}) 
       $.get("http://localhost:4006","user=hm&age=18",function(data){
	console.log(data);//data是伺服器返回的訊息
})

$.post

使用POST方式請求服務

能夠獲取到伺服器返回的訊息

$.post("http://localhost:4006",{user:"hm",age:18},function(data){
	console.log(data);data是伺服器返回的訊息
})

$(「div」).load()
- 伺服器的返回結果直接儲存在div中
```
$("div").load("http://localhost:4006",{user:"hm",age:18});
```
- 將伺服器的返回結果用函數接收
```
$(document).load("http://localhost:4006",{user:"hm",age:18},function(data){
    console.log(data);//伺服器返回的訊息用函數接收
});
```
- 載入其他頁面
```
$("div").load("./jQuery外掛.html");
```
  - 將頁面頭部、底部寫成一個頁面載入到特定的標籤中，避免多次重複建立，但是如果該標籤內部修改樣式，可能會影響全域性樣式，所以儘量避免使用標籤選擇器，儘量使用class和id選擇器
- 載入js檔案
  - 加載出來的是js檔案中是程式碼的字串形式，不能直接使用，需要進行相應處理
```
$(document).load("./a.js",function(data){
    var script=document.createElement("script");
    script.innerHTML=data;
    document.body.appendChild(script);
    obj.c();
})
```
- 載入json檔案
  - 加載出來的是json檔案中是程式碼的字串形式，不能直接使用，需要進行相應處理
```
$(document).load("./a.js",function(data){
    console.log(JSON.parse(data));
})
```

最底層

$.ajax()

$("form").on("submit",function(e){
    e.preventDefault();
    console.log($("[name=user]").val());
    console.log($("[name=age]").val());
    var fd=new FormData($("form")[0]);
    console.log(fd);
    console.log($("form").serialize());//queryString序列化
})