对jQuery说放手

所有人都用jQuery，可事实上你自己也可以封装类似的函数。下面这些简单的例子也许对你有启发。

jQuery在前端开发者中很受欢迎，是程序员们偏爱的JS库。可即使jQuery能简化你的JS开发过程并让你看到更多可能性，你依然有不能用jQuery的时候。这里的一些小例子也许在jQuery不能使用时对你有帮助。

Document Ready

一个页面直到文档加载完毕才能被操作，所以我们习惯于将所有的JS代码都放在jQuery的$(document).ready()函数内：

$(document).ready(function() {
    console.log( "ready!" );
});

我们用JS也能实现相同效果：

document.addEventListener(‘DOMContentLoaded‘, function () {
    console.log( "ready!" );
});

Add Event Listeners

监听事件是JS里重要的一部分。jQuery能起轻松实现事件监听：

$(someElement).on(‘click‘,function(){
    //TODO event handler logic
});

当然，下面是JS的实现方法：

someElement.addEventListener(‘click‘,function(){
    //TODO event handler logic
});

Select Elements

jQuery通过ID，class name,tag name来选择元素超级方便，比如：

//by id
$(‘#myElement‘);

//by class name
$(‘.myElement‘);

//by tag name
$(‘div‘);

//children
$(‘#myParents‘).children();

//complex selecting
$(‘article#first p.summary‘);

原生JS有许多选择元素的方法。所有方法均能在IE8+的现代浏览器中使用。

//by id
document.querySelector(‘#myElement‘);

//by class name
document.querySelectorAll(‘.myElement‘);

//by tag name
document.querySelectorAll(‘div‘);

//children
$(‘#myParent‘).children();

//complex selecting
document.querySelectorAll(‘article#first p.summary‘);

Ajax

众所周知，Ajax可以创建异步Web应用。

下面用jQuery的get函数来做示范：

$.get("ajax/text.html",function(data){
    $(".result").html(data);
    alert("Load was performed.");
});

jQuery的确使ajax更易用，下面是JS的实现：

var request = new XMLHttpRequest();
request.open(‘GET‘,‘ajax/test.html‘,true);

request.onload = function(e){
  if (request.readyState == 4)
    //check if the get was successful

     if (request.status == 200){
        console.log(request.responseText);
 } else {
     console.error(request.statusText);
 }
}

Add and Remove Classes

如果你需要为元素添加或移除class,jQuery有两个专用的方法：

//add a class
$(‘#foo‘).addClass(‘bold‘);

//remove a class
$(‘#foo‘).removeClass(‘bold‘);

用JS同样很简单：

//add a class
document.getElementByID(‘foo‘).className += ‘bold‘;

//remove a class
document.getElementById(‘foo‘).className = document.getElementById(‘foo‘).className.replace(/^bold$/,‘‘);

Fade In
下面的例子证明了为何jQuery这么受欢迎。实现元素的fade in效果只需要一行代码：

$(el).fadeIn();

下面的JS实现显然有点复杂：

function fadeIn(el) {
  el.style.opacity = 0;
  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}
fadeIn(el);

source:http://stackoverflow.com/questions/35393807/how-to-animate-a-style-property-in-plain-vanilla-javascript

Hide and Show elements

隐藏或展示元素应用很普遍，jQuery提供了hide()和show()方法来实现元素的隐藏或显示：

// Hiding element
$(el).hide();
// Showing element
$(el).show();

当然，JS 的实现一点也不复杂：

// Hiding element
el.style.display = ‘none‘;
// Showing element
el.style.display = ‘block‘;

DOM 操纵

使用jQuery操纵DOM非常简单。让我们看看向容器里添加元素;

$("#container").append("<p>more content</p>");

JS的实现同样轻松：

document.getElementById("#container").innerHTML += "<p>more content</p>";

扩展阅读：

下面的链接有更多的原生JS例子。

1.http://blog.garstasio.com/you-dont-need-jquery/why-not/

2.http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/

3.http://blog.wearecolony.com/a-year-without-jquery/

4.https://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/

注：本文为译文

原文链接：https://dzone.com/articles/javascript-without-jquery-tips-and-practical-examp