jQuery to native js /

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

22 / 11 / 2020 440 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
Telsender bot telegram
Card image cap
Отправка любых файлов Telegram bot API
Card image cap
Csv file local to json

коммент.

Вы должны авторизоваться, чтобы оставлять комментарии.

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