jQuery to native js

Ajax 

get

$.ajax({
    url: "data.json"
  }).done(function(data) {
    // ...
  }).fail(function() {
    // Handle error
  });
//fetch
fetch("data.json")
  .then(data => {
    // Handle data
  }).catch(error => {
    // Handle error
});

//XMLHttpRequest
var request = новий XMLHttpRequest();
request.open('GET', 'data.json', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var data = JSON.parse(this.response);
  } else {
    / / We reached our target server, але it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of деякий sort
};

request.send();

POST 

$.ajax({
  type: 'POST',
  URL: '/my/url',
  data: data
});
//https://learn.javascript.ru/fetch
fetch('/my/url', {
        method: 'post',
        body: formData
}).then(data => {
   //data.json() , data.text(),...
  }).catch(error => {
    // Handle error
});


//============================
//XMLHttpRequest
var request = новий XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

Ефекти

// Вибираємо всі елементи .box
$(".content");
// Натомість, ми можемо вибрати перший елемент з .content
document.querySelector(".content");

// …або вибрати всі елементи .content
document.querySelectorAll(".content");

Fade In

 $(el).fadeIn();
el.classList.add('show');
el.classList.remove('hide');

/*
.show {
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
}

*/

// приклад

document.querySelector(".content").classList.add('show')
document.querySelector(".content").classList.add('hide')  

Fade Out

$(el).fadeOut();
el.classList.add('hide');
el.classList.remove('show');

/* add css
.show {
  opacity: 1;
}
.hide {
  opacity: 0;
  transition: opacity 400ms;
}

*/

//example

document.querySelector(".content").elem.classList.add('hide')
document.querySelector(".content").elem.classList.add('show')

Hide/Show

$(el).hide();

el.style.display = 'none';

//=======
$(el).show();

el.style.display = '';

Елементи

AddClass

// jquery
$(el).addClass(className);
// js
el.classList.add(className);

After

$(target).after(element);

// js

target.insertAdjacentElement('afterend', element);

Append

$(parent).append(el);

//js

parent.appendChild(el);

Before

$(target).before(element);

//js
target.insertAdjacentElement('beforebegin', element);

Children

$(el).children();

//js
el.children

Each

$(selector).each(function(i, el){

});
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){

});

Find 

$(el).find(selector);

// js
el.querySelectorAll(selector);

Attr

$(el).attr('tabindex');

// js
el.getAttribute('tabindex');

Height

$(el).height();


//js
parseFloat(getComputedStyle(el, null).height.replace("px", ""))

Width

$(el).width();

//js
parseFloat(getComputedStyle(el, null).width.replace("px", ""))

Has class 

$(el).hasClass(className);

// js
el.classList.contains(className);

Prepend

$(parent).prepend(el);

//js
parent.insertBefore(el, parent.firstChild);

Remove

$(el).remove();

//js
el.parentNode.removeChild(el);

Remove Attributes

$(el).removeAttr('tabindex');

//js
el.removeAttribute('tabindex');

Remove Class

$(el).removeClass(className);

//js
el.classList.remove(className);

Set Attributes

$(el).attr('tabindex', 3);

//js
el.setAttribute('tabindex', 3);

Set Style

$(el).css('border-width', '20px');

//js
el.style.borderWidth = '20px';

Set Text

$(el).text(string);

//js
el.textContent=string;

Toggle Class

$(el).toggleClass(className);

//js
el.classList.toggle(className);

EVENTS

$(".button").click(function(e) { /* handle click event */ });

$(".button").mouseenter(function(e) { /* handle click event */ });

$(document).keyup(function(e) { /* handle key up event */ });
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });

document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });

document.addEventListener("keyup", (e) => { /* ... */ });

// щоб повідомити подію на всі знайдені елементи

document.querySelectorAll(".button").forEach(element=> element .addEventListener("click", (e) => { console.log(e) }));