摘要：在這里先拜個(gè)年，祝大家新年快樂，闔家幸福，步步高升回歸正題，在不要過度依賴一和不要過度依賴二兩篇文章中已經(jīng)列舉了大量的使用原生替代的例子，在本文中將繼續(xù)列舉表單獲取焦點(diǎn)失去焦點(diǎn)實(shí)時(shí)監(jiān)控判斷類型判斷類型判斷是否為一個(gè)函數(shù)判斷是否為數(shù)字判斷是

在這里先拜個(gè)年，祝大家新年快樂，闔家幸福，步步高升！

回歸正題，在不要過度依賴JQuery（一）和不要過度依賴JQuery（二）兩篇文章中已經(jīng)列舉了大量的使用原生JavaScript替代JQuery的例子，在本文中將繼續(xù)列舉！

1、表單

獲取焦點(diǎn)

$("#test").focus(); ?
$("#test").focus(function(){});

var t = document.getElementById("test");
function addEvent(dom, type, handle, capture) { ? ? ??
? if(dom.addEventListener) { ? ? ??
? ? dom.addEventListener(type, handle, capture); ? ? ? ?
? } else if(dom.attachEvent) { ? ? ??
? ? dom.attachEvent("on" + type, handle); ? ? ??
? }?
};?
function focus(elem, fn) {
? if(fn && typeof fn === "function") {
? ? addEvent(elem, "focus", fn);
? } else {
? ? elem.focus();
? }
}

focus(t, function(){});

失去焦點(diǎn)

$("#test").blur();
$("#test").blur(function(){});
? ?
function blur(elem, fn) { ? ?
? if(fn && typeof fn === "function") { ? ?
? ? addEvent(elem, "blur", fn); ? ?
? } else { ? ?
? ? elem.blur(); ? ?
? } ??
} ? ?

blur(t, function(){});

實(shí)時(shí)監(jiān)控

$("#test").on("input propertychange", fn);

function inputChange(dom, fn, capture) { ??
? capture = capture || false; ??
? addEvent(dom, "input", fn, capture);
? addEvent(dom, "propertychange", fn, capture); ??
}

inputChange(t, function(){});

2、判斷類型

判斷類型

$.type(obj);

Object.prototype.toString.call(obj).replace(/^[object (.+)]$/, "$1").toLowerCase();

判斷是否為一個(gè)函數(shù)

$.isFunction(fn)

function isFunction(fn){
? return typeof fn === "function";
}

判斷是否為數(shù)字

$.isNumeric(num);

function isNumber(num) {
? var type = typeof num;
? return ( type === "number" || type === "string") &&?
? ? ? !isNaN( num - parseFloat( num ) );
}

判斷是否為數(shù)組

$.isArray(obj);

function isArray(obj) {
? if( Array.isArray ) {
? ? return Array.isArray(obj);
? } else {
? ? return Object.prototype.toString.call(obj) === "[object Array]";
? }
}

3、時(shí)間

獲取當(dāng)前時(shí)間

$.now()

new Date().getTime();

/* 更簡單 */
+new Date();

4、改變上下文（this）

$.proxy(fn, context);

fn.bind(context);

5、空函數(shù)

創(chuàng)建一個(gè)空函數(shù)

var fn = $.noop();

var fn = function() {}

6、數(shù)組

合并數(shù)組

$.merge(arr1, arr2)

function (arr1, arr2) {
? return arr1.concat(arr2);
}

類數(shù)組對象轉(zhuǎn)換成數(shù)組

var divs = document.querySelectorAll("div");

var arr = $.makeArray(divs);

var arr = Array.prototype.slice.call(divs);

// ES6?
var arr = Array.from(divs)

7、Iframe

獲取iframe的document

$("#iframe").contents();

var iframe = document.getElementById("iframe");
iframe.contentDocument;

8、元素包含關(guān)系

檢查一個(gè)DOM元素是另一個(gè)DOM元素的后代

$.contains(parent, child);

function contains(root, el) {?
? /* Chrome / Firefox */ ?
? if (root.compareDocumentPosition) { ?
? ? return root === el || !!(root.compareDocumentPosition(el) & 16); ?
? }?
? /* IE */
? if (root.contains && el.nodeType === 1){ ??
? ? return root.contains(el) && root !== el; ??
? } ??
? while ((el = el.parentNode)) { ?
? ? if (el === root) {?return true; } ?
? ? return false; ??
? }
}

9、scroll

設(shè)置/獲取window滾動(dòng)位置

/*獲取*/
$(window).scrollTop();

(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop

/*設(shè)置*/
$(window).scrollTop(10);

(document.documentElement && document.documentElement.scrollTop = 10) || document.body.scrollTop = 10;

設(shè)置某個(gè)元素滾動(dòng)位置

$("#test").scrollTop(10);

var t = document.getElementById("test");

t.scrollTop = 10;

注意：別加單位！

10、節(jié)點(diǎn)

獲取元素的最近的祖先定位（position非static）元素

$("#test").offsetParent();

var t = document.getElementById("test");
t.offsetParent;

到這里，《不要過度依賴JQuery》系列就告一段落了！

原文鏈接：不要過度依賴JQuery（三）

如有錯(cuò)誤或建議，歡迎在下方評論區(qū)留言！