不要过度依赖JQuery二

前言

为什么说不要过度依赖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,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,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,function(e){
eventbroker(e,'test',function(){});
});

获取Event对象

$('#test',function(event){ event = event.originalEvent; }); 

var t = document.getElementById('test');
addEvent(t,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",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';