Difference when using JQuery and pure Javascript

As everyone knows, jQuery is a new JavaScript library, created by John Resig in 2006 with a great motto: Write less, do more - Write less, do more. JQuery simplifies HTML transmission, event handling, dynamic animation and Ajax interaction.

Some examples between using jQuery and using pure Javascript:

Select 1 element Use jQuery

// Select by ID
$('#myElement');
//Select by Class
$('.myElement');
//Select by tag
$('div');

and some other functions as closest (), find (), children (), parent (), ... Use pure JavaScript

// Select by ID
document.querySelector('#myElement');
//Select by Class
document.querySelectorAll('.myElement');
//Select by Tag
document.querySelectorAll('div');

**Events **

Using jQuery

$(document).ready(function() {
    console.log('I am handsome!');
});

Or for click events

$('#myElement').on('click', function() {
    console.log('I am handsome!');
});

Use pure Javascript

document.addEventListener('DOMContentLoaded', function () {
    console.log('I am handsome!');
});

Or for click events

document.querySelector('#myElement').addEventListener('click', function() {
    console.log('I am handsome!');
});

**Handling hiding or displaying **

using jQuery

// hide element
$('.myElement').hide();
//show element
$('.myElement').show();

Use pure Javascript

// hide element
document.querySelectorAll('.myElement').style.display = 'none';
// show element
document.querySelectorAll('.myElement').style.display = 'block';

As we have seen, for simple events, the use of jQuery or pure Javascript is not much different. But for some of the following cases, jQuery can help us optimize our code a lot. **Effects fade in, fade out **

Use jQuery

$('.myElement').fadeIn();
$('.myElement').fadeOut();

Use pure Javascript

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

For fade in, fade out an object, jQuery just uses a line of code to execute, whereas pure java needs to write a much longer function. Also we can easily set the speed for effects when using jQuery as follows

$('.myElement').fadeIn('slow');
$('.myElement').fadeIn('fast');
$('.myElement').fadeIn(500);

Or for a very much-used Ajax user is **AJAX. **

Use jQuery

$.get( 'ajax/test.html', function( data ) {
    $('.myElement').html( data );
    alert( "Load was performed." );
});

Use pure Javascript

var request = new XMLHttpRequest();
request.open('GET', 'ajax/test.html', true);
request.onload = function (e) {
    if (request.readyState === 4) {
        alert( "Load was performed." );
        if (request.status === 200) {
            console.log(request.responseText);
        } else {
            console.error(request.statusText);
        }
    }
};

The above are examples to show the benefits that jQuery brings, but there are always "minus points" there, and the next part I will talk about some disadvantages when using jQuery.

The downside of jQuery

Impact on perception This is easy to see when we start using a framework without knowing its nature, its execution. The Framework provides us with methods for programming easily, so is jQuery. A proper sequence would be: Javascript> Web API> jQuery. But many people are immediately exposed to jQuery and do not understand the nature of the problems behind it. This will not be good for professional development. Must import libraries when using You can not just get a jQuery section for what you need. You have to import the entire library with a minimum size of around 300KB or use a minified library of about 30KB. You think this is a big problem. Imagine, on a beautiful day your website receives 1 million requests, jQuery downloads will be equivalent to 30GB. That is not to mention you probably will use dozens of additional plugins. There will be you replacing using the CDN but that will only reduce the load on the server rather than speeding up the page load. Processing Speed In essence, jQuery writes JavaScript handler handlers to be more user-friendly, which of course will result in slower processing speeds. Try a few tests to see how slow:

// jQuery 2.0
var c = $("#comments .comment"); // 4,649 ms
// jQuery 2.0
var c = $(".comment"); // 3,437 ms
// native querySelectorAll
var c = document.querySelectorAll("#comments .comment"); // 1,362 ms
// native querySelectorAll
var c = document.querySelectorAll(".comment"); // 1,168 ms
// native getElementById / getElementsByClassName
var n = document.getElementById("comments");
var c = n.getElementsByClassName("comment"); //107 ms
// native getElementsByClassName
var c = document.getElementsByClassName("comment"); //75 ms

Conclude

The article has outlined the advantages and disadvantages of the jQuery library. I hope you use Javascript can customize the purpose of selecting the appropriate Javascript library.