Detailed examples of 16 methods on how to replace JQuery with native js

Bring you a simple implementation of native JS replacing some JQuery methods. I think it’s pretty good, so I’d like to share it with everyone and give it as a reference.

1. Select elements

// jQuery
var els = $('.el');

// Native
var els = document.querySelectorAll('.el');

// Shorthand
var $ = function (el) {
 return document.querySelectorAll(el);
}

querySelectorAll method returns a NodeList object, which needs to be converted into an array.

myList = Array.prototype.slice.call(myNodeList)

2.Create element

// jQuery
var newEl = $(&#39;<p/>&#39;);

// Native
var newEl = document.createElement(&#39;p&#39;);

3.Add event

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

});

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

 }, false);
});

4.get/setAttributes

// jQuery
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');

// Native
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');

5. Add and remove styles Class

The DOM element itself has a readable and writable className attribute, which can be used to operate classes.

HTML 5 also provides a classList object with more powerful functions (not supported by 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');

6. Append elements

Append elements to the tail:

// jQuery
$(&#39;.el&#39;).append($(&#39;<p/>&#39;));

// Native
document.querySelector(&#39;.el&#39;).appendChild(document.createElement(&#39;p&#39;));

Append elements to the head:

//jQuery
$(‘.el&#39;).prepend(&#39;<p></p>&#39;)

//Native
var parent = document.querySelector(&#39;.el&#39;);
parent.insertBefore("<p></p>",parent.childNodes[0])

7 .Clone element

// jQuery
var clonedEl = $('.el').clone();

// Native
var clonedEl = document.querySelector('.el').cloneNode(true);

8.Remove element

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

// Native
remove('.el');

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

 toRemove.parentNode.removeChild(toRemove);
}

9.Get parent element

// jQuery
$('.el').parent();

// Native
document.querySelector('.el').parentNode;

10. Get the previous/next element (Prev/next element)

// jQuery
$('.el').prev();
$('.el').next();

// Native
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

11.XHR and AJAX

// jQuery
$.get('url', function (data) {

});
$.post('url', {data: data}, function (data) {

});

// Native

// get
var xhr = new XMLHttpRequest();

xhr.open('GET', url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open('POST', url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});

12 .Empty the child elements

//jQuery
$("#elementID").empty()

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

13.Check whether there are child elements

//jQuery
if (!$("#elementID").is(":empty")){}

//Native
if (document.getElementById("elementID").hasChildNodes()){}

14.$(document).ready

When the DOM is loaded, the DOMContentLoaded event will be triggered, which is equivalent to jQuery's $(document).ready method.

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

15. Data storage

jQuery objects can store data.

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

HTML 5 has a dataset object, which has similar functions (not supported by IE 10), but it can only save strings.

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

16. Animation

jQuery’s animate method is used to generate animation effects.

$foo.animate('slow', { x: '+=10px' }

jQuery’s animation effects are largely based on DOM. But currently, CSS 3 animation is far more powerful than DOM, so you can write animation effects into CSS, and then display the animation by manipulating the classes of DOM elements.

foo.classList.add('animate')

If you need to use callback function for animation, CSS 3 also defines corresponding events.

el.addEventListener("webkitTransitionEnd", transitionEnded);
el.addEventListener("transitionend", transitionEnded);

The above is the detailed content of Detailed examples of 16 methods on how to replace JQuery with native js. For more information, please follow other related articles on the PHP Chinese website!