JQuery vs. Native JavaScript Operations

What made jQuery Popular?
jQuery has become so popular lately, mainly due to it’s ease of use, robustness, small size (< 50kb). However, the secret to jQuery’s success in my opinion is it’s reliable cross-browser support. Anyone who attempted building a reliable front end application knows how difficult it can get, especially if you are catering to older browsers such as IE7 and IE8. This roots from the fact that each browser maintained it’s own JavaScript JIT compiler (SpiderMonkey in Mozilla, Chakra in IE and Webkit in Chrome/Safari … etc). These JavaScript engines did not always follow the EcmaScript specifications closely and in many cases maintained their own syntax. This is particularly true in early versions of IE. This increased the demand for a uniform JavaScript platform that runs equally on all browsers. jQuery successfully satisfied this demand. However, as modern browsers’ JavaScript support got better over the years, the decision of including a library such as jQuery in one’s application became less justified. Especially after the increase of size in the jQuery library. Even though jQuery started supporting custom builds of their library, it is not a straight forward task, and several steps are involved. Whether one is trying to decide on whether to include jQuery in their application, or if you trying to improve your front end JavaScript skills, it is extremely crucial to learn native JavaScript as well as jQuery. It is alarming how many developers lack the proper understanding of native JavaScript and rely heavily on the use of jQuery. Below is a comparison between native JavaScript and jQuery. Finding DOM Elements
In native JavaScript, there are several functions you can use to located elements on the DOM:

// To find the div by the id 'mainDiv'
document.getElementById("mainDiv");
// To find all elements of tag type 'p':
document.getElementsByTagName("p");
// To find an element using a CSS selector:
document.querySelector("div#mainDiv p"); // This returns the first element 'p' in the div with the ID mainDiv. If more than one element is found, then only the first is returned
// To find the input element with the class 'btn':
document.getElementsByClassName("btn"); // This is not supported in IE7/IE8
// To find all the elements of tag type 'p' using a generic CSS selector:
document.querySelectorAll("#mainDiv p"); // Uses CSS Selector

Finding DOM Elements in JQuery and Native JavaScript
There are several ways in JQuery to access queried DOM elements at a specific elements

// To find the second 'p' element that is a descendant of '#mainDiv'
$("#mainDiv p").eq(2); // returns a DOM element wrapped in a JQuery object
$("#mainDiv p").get(3); // returns a raw DOM element
$("#mainDiv p")[3]; // return a raw DOM element

In native JavaScript

document.querySelectorAll("#mainDiv p").item(2); // returns the DOM element at index 2
document.querySelectorAll("#mainDiv p")[2]; // returns the DOM element at index 2

Finding the First and Last DOM Elements in JQuery and Native JavaScript
In JQuery, there are several functions available for accessing the First and the Last elements from a DOM query result

$("#mainDiv p").first(); // returns the first 'p' element that is a descendant of '#mainDiv' wrapped in a JQuery object
// Alternativly you can use:
$("#mainDiv p").eq(0);
// To obtain the first 'p' element as a raw DOM element:
$("#mainDiv p").get(0);
$("#mainDiv p")[0];
// To obtain the last 'p' element from a JQuery DOM query
$("#mainDiv p").last(); // DOM element wrapped in a JQuery object
$("#mainDiv p").eq(-1); // DOM element wrapped in a JQuery object
// To obtain the same element as a raw DOM element
$("#mainDiv p").get(-1); 
// or
$("#mainDiv p")[$("#mainDiv p").length-1];

In Native JavaScript, you can retrieve the first and last elements from a DOM query

var pElements = document.querySelectorAll("#mainDiv p");
pElements[0];
// or
document.querySelector("#mainDiv p"); // This retrieves the first element
// To access the last element
pElements[pElements.length-1];
// or using the native array pop function
[].pop.call(pElements);

Finding the Next and the Previous Elements in JQuery and Native JavaScript
In JQuery, use the ‘prev()’ and the ‘next()’ function:

var prev = element.prev();
var next = element.next();

In Native JavaScript, the next and the previous elements are available on the previousElementSibling and nextElementSibling

var prev = element.previousElementSibling;
var next = element.nextElementSibling;

Matching Elements by Type in JQuery and Native JavaScript
JQuery contains the ‘is()’ for matching an element to a DOM element type. It returns a true or a false

$("#myDiv").is(".toolbar-icon");

Native JavaScript has the similar ‘matches()’ function.

document.getElementById("#myDiv").matches(".toolbar-icon");

However, the matches function is not currently supported by all browsers, so it cannot be relied upon.
In order to make the ‘matches()’ function work, it can be polyfilled using a “Vendor prefixed matches-selectors”

An example of the ‘matches()’ function prefill is available online on several sites. It may look something like the following:

if(Element && !Element.prototype.matches) {
     var proto = Element.prototype;
     proto.matches = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector || proto.webkitMatchesSelector;
}