min项目可以放弃jquery了：常用jQuery函数的原生JS写法

很多前端工程师都是外行（非计算机行业）转入的，学点html+css，

其中关键的js，只知道个大概，然后看下jquery文档，然后就干活了！

搞了几年的前端，js还是，low……

一旦开始使用纯JavaScript来完成所有工作的时候你确实会变得对他们很熟悉。

下面，是汇总一些常用的的方法，

Document Ready 事件

在jQuery中，你们中的许多人可能过去常常像这样使用 document.ready ：

$(document).ready(function() {
  // Code
});

但是你知道，你可以将所有的JavaScript放在页面的底端，但他们确实是一回事吗？JavaScript同样拥有一个DOM内容加载事件的侦听器，而不是使用jQuery的document.ready:

document.addEventListener("DOMContentLoaded", function() {
  // Code
}, false);

添加事件

// jQuery
$('.el').on('event', function() {

});

// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) {
  el.addEventListener('event', function() {

  }, false);
});

添加和移除样式Class

DOM元素本身有一个可读写的className属性，可以用来操作class。

HTML 5还提供一个classList对象，功能更强大（IE 9不支持）。

// jQuery
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');

// Native
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');

尾部追加元素：

// jQuery
$('.el').append($('<div/>'));

// Native
document.querySelector('.el').appendChild(document.createElement('div'));

头部追加元素：

//jQuery
$(‘.el’).prepend('<div></div>')

//Native
var parent = document.querySelector('.el');
parent.insertBefore("<div></div>",parent.childNodes[0])

移除元素

Remove
// jQuery
$('.el').remove();

// Native
remove('.el');

function remove(el) {
  var toRemove = document.querySelector(el);

  toRemove.parentNode.removeChild(toRemove);
}

数据储存

jQuery对象可以储存数据。

$("body").data("foo", 52);

HTML 5有一个dataset对象，也有类似的功能（IE 10不支持），不过只能保存字符串。

element.dataset.user = JSON.stringify(user);
element.dataset.score = score;

判断一个元素是否在视图窗口中

通过使用getBoundingClientRect方法，你可以获取页面中任何元素的位置。以下是一个简单的函数来表明它有多简单和多强大。这个函数有一个参数，那就是你想要检查的元素。当元素为可见时，函数将返回true：

// Determine if an element is in the visible viewport
function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );
}

清空子元素

//jQuery
$("#elementID").empty()
 
//Native
var element = document.getElementById("elementID")
while(element.firstChild) element.removeChild(element.firstChild);

参考文章：

http://ourjs.com/detail/535556a1ed9add0e26000002

http://www.cnblogs.com/xiaopen/p/5540884.html

转载本站文章《min项目可以放弃jquery了：常用jQuery函数的原生JS写法》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2017_0110_7937.html