jQuery工具方法
type
- 參數：
- target: 目標數據
- 做用：
- 判斷目標是類型
console.log($.type('123')); // 執行結果：輸出string
console.log($.type(123)); // 執行結果：輸出number
console.log($.type(true)); // 執行結果：輸出boolean
console.log($.type(function () { })); // 執行結果：輸出function
console.log($.type({})); // 執行結果：輸出object
console.log($.type([])); // 執行結果：輸出array
console.log($.type(undefined)); // 執行結果：輸出undefined
console.log($.type(null)); // 執行結果：輸出null
console.log($.type(new Number())); // 執行結果：輸出number
console.log($.type(NaN)); // 執行結果：輸出number
複製代碼
trim
- 參數：
- target: 目標數據
- 做用：
- 去除目標左右空格
var target = ' 1 2 3 ';
console.log($.trim(target)); // 執行結果：輸出 '1 2 3'
複製代碼
proxy
- 參數：
- function：目標函數
- target: 目標對象
- 做用：
- 改變目標函數裏的this指向目標對象
- 說明：
- 與js原生bind的方法相似
#list {
width: 100px;
height: 100px;
background-color: orange;
}
複製代碼
<div id="list"></div>
複製代碼
var list = {
// 初始化函數
init: function () {
this.mes = '123';
this.dom = document.getElementById('list');
this.bindEvent();
},
// 事件綁定
bindEvent: function () {
// 此時的this.show函數裏的this爲dom
// this.dom.onClick = this.show;
// 調用$.proxy改變this
this.dom.onclick = $.proxy(this.show, this);
},
// 顯示對話信息
show: function () {
console.log(this.producesMes(this.mes));
},
// 處理對話信息
producesMes: function (mes) {
return mes + '123';
}
};
list.init();
複製代碼
noConflict
- 做用：
- 防止衝突
- 說明：
- 經過修改$名稱來防止變量名衝突
#list {
width: 100px;
height: 100px;
background-color: orange;
}
複製代碼
<div id="list"></div>
複製代碼
var $Z = $.noConflict();
$Z('#list').css('background', 'red');
複製代碼
each
- 參數：
- array: 遍歷數組
- function：目標函數：包含index, element
- 做用：
- 遍歷數組
- 能夠遍歷數組，對象，僞數組
// 數組
var arr = [
{ name: 1, age: 18 },
{ name: 2, age: 20 },
];
$.each(arr, function (index, ele) {
console.log(ele.name, ele.age); // 執行結果：依次輸出：1, 18; 2, 20
});
// 對象
var obj = {
a: 1,
b: 2
};
$.each(obj, function (index, ele) {
console.log(index, ele); // 執行結果：依次輸出：a, 1; b, 2
});
// 僞數組
function fn() {
$.each(arguments, function (index, ele) {
console.log(index, ele); // 執行結果：依次輸出0, 1; 1, 2
});
}
fn(1, 2);
複製代碼
map
- 參數：
- array: 遍歷數組
- function：目標函數：包含element, index
- 做用：
- 遍歷操做數組，返回操做後的新數組
- 能夠遍歷數組，對象，僞數組
// 數組
var arr = [1, 2, 3, 4];
var newArr = $.map(arr, function (ele, index) {
return ele ** index;
});
console.log(newArr); // 執行結果：輸出1, 2, 9, 64
// 對象
var obj = {
a: 1,
b: 2
};
var arr = [1, 2, 3, 4];
var newArr = $.map(obj, function (ele, index) {
return ele * 2;
});
console.log(newArr); // 執行結果：輸出2, 4
// 僞數組
function fn() {
var newArr = $.map(arguments, function (ele, index) {
return ele ** index;
});
console.log(newArr); // 執行結果：輸出1, 2, 9, 64
}
fn(1, 2, 3, 4);
複製代碼
parseJson
- 參數：
- json: json字符串
- 做用：
- 將json字符轉換成對象
var jsonStr = '{"name": "zhangl", "age": 18, "gender": "MAN"}';
var jsonObj = $.parseJSON(jsonStr);
console.log(jsonObj); // 執行結果： 輸出{name: 'zhangl', age: 18, gender: 'MAN'}
複製代碼
makeArray
- 參數：
- array：僞數組
- 做用：
- 將僞數組轉換爲數組
- 說明：
- 當一個參數時，將僞數組轉換爲數組
- 當兩個參數時，將前面的值，插入到後面的對象裏，至關於合併的做用
// 變數組
function fn() {
var newArr = $.makeArray(arguments);
console.log(newArr); // 執行結果：輸出[1, 2, 3, 4]
};
fn(1, 2, 3, 4)
// 合併
var obj = {
a: 1,
b: 2,
length: 2
}
var newObj = $.makeArray([1, 2], obj);
console.log(newObj); // 執行結果：輸出{2: 1, 3: 2, a: 1, b: 2, length: 4}
var newArr = $.makeArray('a', [1, 2]);
console.log(newArr); // 執行結果：輸出[1, 2, "a"]
複製代碼
extend
- 做用：
- 插件擴展(工具方法)
- 淺層克隆
- 深層克隆
- 說明：
- 擴展插件，參數爲一個對象
- 淺層克隆，參數爲多個對象，將後面對象的key-value複製到最前面一個對象中，出現相同的key後面的覆蓋前面的
- 深層克隆，第一個參數爲true，其他參數爲對象, 將後面對象的key-value複製到最前面一個對象中，出現相同的key後面的覆蓋前面的
// 添加工具方法
$.extend({
// 獲取一個指定範圍的隨機數
getRandom: function (start, end) {
return Math.random() * (end - start) + start;
}
});
console.log($.getRandom(5, 10)); // 執行結果：輸出9.664911117249257
var obj1 = {
name: '張三',
age: 18,
sex: 'MAN'
};
var obj2 = {
name: '李四',
age: 19
};
var obj3 = {
name: '王五',
age: 20,
son: {
name: '王五的孩子',
age: 1
}
};
// 淺克隆
$.extend(obj1, obj2, obj3);
console.log(obj1); // 執行結果：輸出name: "王五", age: 20, sex: "MAN", son: {name: "王五的孩子", age: 1}}
obj1.son.name = '張三的孩子';
console.log(obj3.son.name); // 執行結果：輸出張三的孩子
// 深克隆
$.extend(true, obj1, obj2, obj3);
console.log(obj1); // 執行結果：輸出name: "王五", age: 20, sex: "MAN", son: {name: "王五的孩子", age: 1}}
obj1.son.name = '張三的孩子';
console.log(obj3.son.name); // 執行結果：輸出王五的孩子
複製代碼
fn.extend
- 做用：
- 插件擴展(實例方法)
- 淺層克隆
- 深層克隆
- 說明：
- 擴展插件，參數爲一個對象
- 淺層克隆，參數爲多個對象，將後面對象的key-value複製到最前面一個對象中，出現相同的key後面的覆蓋前面的
- 深層克隆，第一個參數爲true，其他參數爲對象, 將後面對象的key-value複製到最前面一個對象中，出現相同的key後面的覆蓋前面的
<div id="demo" style="width: 100px; height: 100px; background: orange; position: absolute">
</div>
複製代碼
// 給jQ實例添加工具方法
$.fn.extend({
drag: function (e) {
var disX,
disY,
self = this;
// 綁定鼠標按下事件
$(this).on('mousedown', function (e) {
// 計算鼠標點擊位置距離方塊的左邊距離，和頂部距離
disX = e.pageX - $(this).offset().left;
disY = e.pageY - $(this).offset().top;
// 綁定鼠標移動事件
$(document).on('mousemove', function (e) {
$(self).css({ left: e.pageX - disX, top: e.pageY - disY });
});
// 鼠標鬆開
$(document).on('mouseup', function () {
$(this).off('mousemove').off('mouseup');
});
});
return this;
}
});
// 調用
$('#demo').drag();
var obj1 = {
name: '張三',
age: 18,
sex: 'MAN'
};
var obj2 = {
name: '李四',
age: 19
};
var obj3 = {
name: '王五',
age: 20,
son: {
name: '王五的孩子',
age: 1
}
};
// 淺克隆
$.fn.extend(obj1, obj2, obj3);
console.log(obj1); // 執行結果：輸出name: "王五", age: 20, sex: "MAN", son: {name: "王五的孩子", age: 1}}
obj1.son.name = '張三的孩子';
console.log(obj3.son.name); // 執行結果：輸出張三的孩子
// 深克隆
$.fn.extend(true, obj1, obj2, obj3);
console.log(obj1); // 執行結果：輸出name: "王五", age: 20, sex: "MAN", son: {name: "王五的孩子", age: 1}}
obj1.son.name = '張三的孩子';
console.log(obj3.son.name); // 執行結果：輸出王五的孩子
複製代碼
ajax
- 參數：
- object: 對象
- url: 請求資源路徑
- type: 請求方式 'get', 'post'
- data: 請求參數
- dataType: 請求參數類型 jsonp
- async: 是否異步
- success: 請求成功回調
- error: 請求失敗回調
- complete: 請求完成回調
- context: 修改執行上下文對象
- object: 對象
- 做用：
- 發送網絡請求，接收請求數據
<div class="wrapper"></div>
複製代碼
$.ajax({
url: 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person',
type: 'GET',
data: {
name: 'zhangl'
},
success: function (res) {
// 因爲context致使函數做用域this變爲.wrapperjQ對象，默認爲ajax對象
console.log(res);
// 執行結果：輸出{code: 0, data: [{name: "王港", src: "./src/img/3.png", des: "頸椎很差", sex: "m"}], msg: "OK"}
console.log(this); // 執行結果：輸出[div.wrapper, prevObject: jQuery.fn.init(1)]
$.each(res.data, function (index, ele) {
console.log(ele);
});
},
error: function (e) {
console.log(e.status, e.statusText);
},
complete: function () {
console.log('請求完成');
},
context: $('.wrapper')
});
複製代碼
Callbakcs
- 參數：
- string: 字符串
- 做用：
- 管理多個回調函數
- 說明：
- 返回一個callback對象，具備add(添加)和fire(執行)兩個API
- 參數爲once只執行一次fire
- 參數爲memory只要執行過fire，那麼後面再add的回調函數，直接執行
- 參數爲unique，當添加多個相同的回調函數，默認去除重複的回調函數
- 參數爲stopOnFalse，當碰到返回值爲false, 那麼後面的回調函數都不會執行
// 無參數
// callback對象
var cb = $.Callbacks();
// 任務1
function firstTask(x, y) {
console.log('firstTask', x, y);
}
// 任務2
function secondTask(x, y) {
console.log('secondTask', x, y);
}
// 添加回調函數
cb.add(firstTask, secondTask);
// 執行回調函數
cb.fire(10, 20);
cb.fire(10, 20);
// 執行結果：輸出兩次 firstTask 10 20; secondTask 10 20
// 任務3
function thirdTask(x, y) {
console.log('thirdTask', x, y);
}
cb.add(thirdTask);
// 必須再執行一次fire，纔會執行任務3
cb.fire(10, 20);
// 執行結果：輸出 firstTask 10 20; secondTask 10 20; thirdTask 10 20
// ----------------------------- //
// 參數爲once
var cb = $.Callbacks('once');
// 任務1
function firstTask(x, y) {
console.log('firstTask', x, y);
}
// 任務2
function secondTask(x, y) {
console.log('secondTask', x, y);
}
// 添加回調函數
cb.add(firstTask, secondTask);
// 執行回調函數
cb.fire(10, 20); // 執行結果：輸出 firstTask 10 20; secondTask 10 20
cb.fire(10, 20); // 不執行
// ----------------------------- //
// 參數爲memory
var cb = $.Callbacks('memory');
// 任務1
function firstTask(x, y) {
console.log('firstTask', x, y);
}
// 任務2
function secondTask(x, y) {
console.log('secondTask', x, y);
}
// 添加回調函數
cb.add(firstTask, secondTask);
// 執行回調函數
cb.fire(10, 20); // // 執行結果：輸出 firstTask 10 20; secondTask 10 20
// 任務3
function thirdTask(x, y) {
console.log('thirdTask', x, y);
}
// 自動執行fire
cb.add(thirdTask); // 執行結果：輸出 firstTask 10 20; secondTask 10 20; thirdTask 10 20
// ----------------------------- //
// 參數爲unique
var cb = $.Callbacks('unique');
// 任務1
function firstTask(x, y) {
console.log('firstTask', x, y);
}
// 任務2
function secondTask(x, y) {
console.log('secondTask', x, y);
}
// 添加回調函數
cb.add(firstTask, secondTask);
cb.add(firstTask, secondTask);
// 執行回調函數(去除回調對象中重複的回調函數)
cb.fire(10, 20); // 執行結果：輸出 firstTask 10 20; secondTask 10 20
// ----------------------------- //
// 參數爲stopOnFalse
var cb = $.Callbacks('stopOnFalse');
// 任務1
function firstTask(x, y) {
console.log('firstTask', x, y);
}
// 任務2
function secondTask(x, y) {
console.log('secondTask', x, y);
return false;
}
// 任務3
function thirdTask(x, y) {
console.log('thirdTask', x, y);
}
// 添加回調函數
cb.add(firstTask, secondTask, thirdTask);
// 執行回調函數(遇到return false，後面的回調函數不執行)
cb.fire(10, 20); // // 執行結果：輸出 firstTask 10 20; secondTask 10 20
複製代碼
Deferred
- 做用：
- 異步處理事件
- ajax回調地獄解決方案
- 說明：
- Deferred對象具有註冊事件和執行事件的功能
- 註冊事件API done：成功狀態 fail：失敗狀態 progress：等待狀態
- 觸發事件API resolve：成功狀態; reject：失敗狀態; notify：等待狀態
- Deferred對象的promise方法返回只具有註冊功能的Deferred對象
- 若是觸發了resolve或reject，那麼其餘狀態註冊的函數不會再執行，若是觸發的是notify，會隨機觸發resolve，reject其中的一個
function getScore() {
// 獲取deferred對象
var df = $.Deferred();
setInterval(function () {
var score = Math.random() * 100;
if (score > 60) {
// 觸發成功事件 註冊API done
df.resolve(score);
} else if (score < 50) {
// 觸發失敗事件 註冊API fail
df.reject(score);
} else {
// 觸發等待事件 註冊API progress
df.notify(score)
}
}, 1500);
// 返回df註冊功能(防止在函數外觸發df註冊的事件)
return df.promise()
}
var df = getScore();
// 註冊成功事件
df.done(function (score) {
console.log('成功', score);
});
// 註冊失敗事件
df.fail(function (score) {
console.log('失敗', score);
});
// 註冊等待事件
df.progress(function (score) {
console.log('等待', score);
});
複製代碼
then
- 參數
- function: resolve
- function: reject
- function: progress
- 做用：
- 簡化Deferred的註冊步驟
- 便於鏈式調用, 結構清晰
function getScore() {
// 獲取deferred對象
var df = $.Deferred();
setInterval(function () {
var score = Math.random() * 100;
if (score > 60) {
// 觸發成功事件 註冊API done
df.resolve(score);
} else if (score < 50) {
// 觸發失敗事件 註冊API fail
df.reject(score);
} else {
// 觸發等待事件 註冊API progress
df.notify(score)
}
}, 1500);
// 返回df註冊功能(防止在函數外觸發df註冊的事件)
return df.promise()
}
var df = getScore();
df.then(function (score) { // df對象註冊resolve, reject, progress函數
console.log('成功', score);
var innerDf = $.Deferred();
setTimeout(function () {
innerDf.resolve('成功'); // 觸發innerDf對象的resolve
}, 1000);
return innerDf.promise(); // 建立innerDf對象，便於後面的鏈式調用
}, function (score) {
console.log('失敗', score);
var innerDf = $.Deferred();
setTimeout(function () {
innerDf.reject('失敗');
}, 1000);
return innerDf.promise();
}, function (score) {
console.log('等待', score);
var innerDf = $.Deferred();
setTimeout(function () {
innerDf.progress('等待');
}, 1000);
return innerDf.promise();
}).then(function (res) { // innerDf對象註冊resolve, reject, progress函數(鏈式調用)
console.log('第二次resolve' + res);
}, function (res) {
console.log('第二次reject' + res);
}, function (res) {
console.log('第二次notify' + res);
});
複製代碼
相關文章
- 1. 9.jQuery工具方法
- 2. JQuery工具方法整理
- 3. 擴展jquery中的工具類方法
- 4. 淺談jQuery中的工具方法
- 5. jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()
- 6. jquery 經常使用工具方法
- 7. jQuery經常使用工具方法（二）
- 8. Jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()
- 9. jQuery源碼解讀：部份jQuery工具方法實現
- 10. appium 工具工具方法
- 更多相關文章...
- • jQuery Mobile 工具欄 - jQuery Mobile 教程
- • netwox網絡工具集入門教程 - TCP/IP教程
- • PHP開發工具
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
