What is jQuery?

Web Development Jargons Explained in 5 Different Ways

TLDR: jQuery is a JavaScript library that helps front-end web engineers add interactive features to a website. In essence, it is a collection of commonly used stand alone tools that front-end engineers use to build websites.


Explain like I only speak in plain English

jQuery is a JavaScript library that helps front-end web engineers add interactive features to a website. In essence, it is a collection of commonly used stand alone tools that front-end engineers use to build websites.

Since many engineers end up building similar things, someone decided to package those custom tools into a library, and named it jQuery. jQuery is a collection of tools that extends pure JavaScript and makes web engineers' lives easier.

All the tools in jQuery are written in pure JavaScript. Most of the jQuery tools just carry out trivial tasks but those tools are not available in standard JavaScript. You can create the tools yourself if you want, and not use jQuery. But using jQuery can reduce the size of your program and development time drastically.

Explain like I'm a total nerd

jQuery was first released in 2006 by John Resig. It is now a staple amongst front-end web engineers and one of the first libraries beginners should learn when they pick up front-end web development.

jQuery is present in 73.2% of all websites surveyed in this report. BuiltWith ranks jQuery as the top used JavaScript library for top million sites with 14% coverage.

jQuery's tool box includes DOM selection, DOM manipulation, Events, Animations, Ajax and more. Most engineers will call the jQuery library using its alias $ instead of its actual variable name jQuery.

Explain like I'm an artist

Using jQuery for development is like using rulers, compass, and templates when sketching versus doing it all free hand. jQuery assists engineers by providing them an array of tools to help them do trivial tasks easier. Instead of drawing a straight line free hand, they use a ruler. Instead of drawing circles free hand, they use a compass.

css_cat.jpg

Explain like I like examples

jQuery can help reduce the amount of code we write drastically. The following code adds a paragraph to the beginning of a container. In pure JavaScript, it would require 7 lines of code. Using jQuery reduces it to 1 line of code.

var container = document.body.querySelector("#container");
var p = document.createElement('p');
p.innerHTML = 'Hello World';
var prependChild = function(newNode) {
  this.insertBefore(newNode, this.firstChild);
}
prependChild.call(container, p);



With jQuery

$('#container').prepend('<p>Hello World</p>');

Explain like I already know it

With the increase in popularity of React, Angular and other more opinionated front-end frameworks. jQuery is no longer the first choice for new projects. However, for simple websites, jQuery would probably still be good as its setup cost is much lower.

When using jQuery with other JavaScript libraries that uses the $. It would be wise to run jQuery in no-conflict mode.

We also need to remember that jQuery events are synthetic events and might not have the exact same behavior as native browser events. You can inspect the original browser event through event.originalEvent.

We are trusted by

Students and instructors from world-class organizations

Imperial College London
Carnegie Mellon University
City University of Hong Kong
Hack Reactor
Cisco Meraki
University of Oxford
Swift
Bazaarvoice
Waterloo
Uber
AtlanTech
Tumblr
Boston College
Bombardier Aerospace
University of St. Andrews
New York University
Minerva Schools at KGI
Merrill Lynch
Riot Games
JP Morgan
Morgan Stanley
Advanced Placement®
Google
KPMG
The University of Hong Kong
University of Toronto
SCMP
Moat
Zynga
Hello Toby
Deloitte
Goldman Sachs
Yahoo
HSBC
General Assembly
Tesla
McGill University
Microsoft

Join the upcoming Cohort #72

Enroll for December 5th, 2022