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

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

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

1、表單

獲取焦點

$("#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(){});

失去焦點

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

blur(t, function(){});

實時監控

$("#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();

判斷是否為一個函數

$.isFunction(fn)

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

判斷是否為數字

$.isNumeric(num);

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

判斷是否為數組

$.isArray(obj);

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

3、時間

獲取當前時間

$.now()

new Date().getTime();

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

4、改變上下文（this）

$.proxy(fn, context);

fn.bind(context);

5、空函數

創建一個空函數

var fn = $.noop();

var fn = function() {}

6、數組

合并數組

$.merge(arr1, arr2)

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

類數組對象轉換成數組

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、元素包含關系

檢查一個DOM元素是另一個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

設置/獲取window滾動位置

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

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

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

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

設置某個元素滾動位置

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

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

t.scrollTop = 10;

注意：別加單位！

10、節點

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

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

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

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

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

如有錯誤或建議，歡迎在下方評論區留言！