jQuery to native js /

Переход от jQuery на чистый js

22 / 11 / 2020 69 js Aвтор: Фрилансер

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 = new 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, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some 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 = new 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) }));

 

3 случайных Поста

Card image cap
Отправка emoji в телеграм через API
Card image cap
Url fix на wordpres и не только
Card image cap
Woocommerce "Нет в наличие"

коммент.

Freelancehunt.com — простой и честный фриланс Freelancehunt.com — простой и честный фриланс © SiteBlog designer