为什么说不要过度依赖JQuery呢？从项目方面来讲，一些项目在开发中实际用到JQuery内置功能不多，这样会造成项目臃肿；另一方面，目前的主流已经倾向于原生开发。
而在之前一篇《不要过度依赖JQuery（一）》一文中已经介绍了部分使用原生JavaScript实现JQuery功能的代码，这一章将继续列举。
1、位置
获取相对于文档的位置
$('#test').offset()
function offset(elem) {
var rect = elem.getBoundingClientRect()
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
}
offset(document.getElementById('test'));
获取相对于具有定位（非static）的父元素（祖先元素）的位置：
$('#test').position()
var t = document.getElementById('test');
var position = {top: t.offsetTop, left: t.offsetLeft};
获取相对于可视区左上角的位置
var offset = $('#test').offset();
var position = { top: offset.top - document.body.scrollTop,
left: offset.left - document.body.scrollLeft
}
var position = document.getElementById('test').getBoundingClientRect();
2、尺寸
获取包含内边距（padding）和边框（border）的元素高宽
var width = $('#test').outerWidth();
var height = $('#test').outerHeight();
var t = document.getElementById('test');
var width = t.offsetWidth;
var height = t.offsetHeight;
获取元素内容的总高度
var t = document.getElementById('test');
/*在没有滚动条的情况下，元素内容的总高度*/
t.scrollHeight
/*在没有滚动条的情况下，元素内容的总宽度*/
t.scrollWidth
视口大小
var pageWidth = window.innerWidth || document.documentElement.clientWidth;
var pageHeight = window.innerHeight || document.documentElement.clientHeight;
3、绑定自定义数据
/*绑定*/
$('#test').data('name', 'TG');
/*读取*/
$('#test').data('name');
/*移除*/
$('#test').removeDate('name');
var t = document.getElementById('test');
/*绑定*/
t.dataset.name = 'TG';
/*读取*/
t.dataset.name
/*移除*/
delete t.dataset.name
4、事件
绑定事件
$('#test').on('click', function(){})
var addEvent = function(dom, type, handle, capture) {
if(dom.addEventListener) {
dom.addEventListener(type, handle, capture);
} else if(dom.attachEvent) {
dom.attachEvent("on" + type, handle);
}
};
var t = document.getElementById('test');
addEvent(t, 'click', function(){});
移除事件
$('#test').off('click', fn);
var deleteEvent = function(dom, type, handle) {
if(dom.removeEventListener) {
dom.removeEventListener(type, handle);
} else if(dom.detachEvent) {
dom.detachEvent('on' + type, handle);
}
};
var t = document.getElementById('test');
deleteEvent(t, 'click', fn);
事件代理
$(document).on('click', '.test', fn);
function eventBroker(e, className, fn) {
var target = e.target;
while(target) {
if(target && target.nodeName == '#document') {
break;
} else if(target.classList.contains(className)) {
fn();
break;
};
target = target.parentNode;
};
}
addEvent(document, 'click', function(e){
eventBroker(e, 'test', function(){});
});
获取Event对象
$('#test', 'click', function(event){
event = event.originalEvent;
});
var t = document.getElementById('test');
addEvent(t, 'click', function(event){
event = event || window.event;
});
DOM加载完毕
$(document).ready(function(){});
function ready(fn) {
if (document.readyState != 'loading'){
// ie9+
document.addEventListener('DOMContentLoaded', fn);
} else {
// ie8
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading'){
fn();
}
});
}
}
指定事件触发
$('#test').trigger('click');
function trigger(elem, type) {
if (document.createEvent) {
var event = document.createEvent('HTMLEvents');
event.initEvent(type, true, false);
elem.dispatchEvent(event);
} else {
elem.fireEvent('on' + type);
}
}
var t = document.getElementById('test');
trigger(t, 'click');
5、AJAX
GET
$.get("test.php", { name: "TG"},
function(data){
console.log(data);
});
var xhr= new XMLHttpRequest();
xhr.open('GET', 'test.php?name=TG', true); // false（同步）
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 400) {
// 成功
var data = JSON.parse(xhr.responseText);
} else {
// 错误
}
}
};
xhr.send(null);
POST
$.post("test.php", { name: "TG"},
function(data){
console.log(data);
});
var xhr= new XMLHttpRequest();
xhr.open('POST', 'test.php', true); // false（同步）
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 必需
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 400) {
// 成功
var data = JSON.parse(xhr.responseText);
} else {
// 错误
}
}
};
var data = {name: "t"};
xhr.send(data);
Fetch 请求
GET
fetch(url).then(function (response) {
return response.json();
}).then(function (jsonData) {
console.log(jsonData);
}).catch(function () {
console.log('出错了');
});
POST
fetch(url,{
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'name=TG&love=1'
}).then(function(response){})
6、数组
判断元素是否在数组内
$.inArray(item, array)
array.indexOf(item)
判断是否是数组
$.isArray(arr)
Array.isArray(arr)
数组迭代
$.map(arr, function(value, index) {})
arr.map(function(value, index) {})
7、特效
隐藏显示
$('#test').hide();
var t = document.getElementById('test');
t.style.display = 'none';
$('#test').show();
t.style.display = 'block';
原文链接：不要过度依赖JQuery（二）
如有错误，欢迎指正！如有更好建议，欢迎留言！
