Introduction to jQuery

JavaScript, jQuery, where to begin? This is a classic chicken and egg problem when learning programming. You need to know a little JavaScript in order to use jQuery, but jQuery can save you a ton of energy doing things that'd take forever in ordinary JavaScript. In this course, we'll consider the two concepts in parallel from a beginner level.

JavaScript is a programming language invented by Brendan Eich in 1995, and jQuery is an open-source JavaScript library invented by John Resig in 2006. Writing pure JavaScript (the programming language) in your web projects can change how your pages behave. It complements the HTML and CSS of your site, which determine your content and your page appearance, by adding a layer of interactivity to the page.

jQuery (the open-source JavaScript library) allows you to harness the power of JavaScript to accomplish a myriad of awesome things on your webpage. With jQuery, you might:

• Add, delete, or modify HTML elements within your page.

• Change the styles of elements on the page by modifying their associated CSS.

• Animate elements on your page.

• Send and receive data from a server via AJAX (asynchronous JavaScript and XML) so your page doesn't have to be reloaded after submitting a form.

• And more!

At the same time, using jQuery will also allow you to enjoy increased cross-browser functionality. Pure JavaScript is known for being finicky across different browsers like Internet Explorer, Chrome, Safari, etc, that could all potentially manifest your JavaScript code differently. jQuery saves you this headache because it's designed with maximum compatibility in mind.

This compatibility happens via jQuery's use of CSS selectors. Selecting elements becomes faster and more direct than selecting elements in classic JavaScript, and since most web developers already understand CSS selectors, this knowledge lets them use jQuery easily.

What do JavaScript and jQuery look like?

Here's a sample chunk of JavaScript that adds a "starred" class to each list item.

var listItems = document.querySelectorAll('li');
var i;
for (i = 0; i < listItems.length; i++) {
    listItems[i].className = 'starred';
}

Here's a sample chunk of jQuery that does the same thing:

$("li").addClass("starred");

You'll notice a lot of semicolons and brackets in JavaScript, and many $ (dollar signs) in jQuery. For all of these wild symbols, you can accomplish the same things with both JavaScript and jQuery. However, you can often do the same things with less effort and code using the latter.

For all of its broad features, jQuery is simply a JavaScript file! To use jQuery in your projects, you must include it in the web page, which you will see how to do in part 2. Including the jQuery file in your project will let you:

1. Select elements using selectors

2. Do things to the selected elements via methods

These two basic actions allow you to accomplish all the possible use jQuery use cases mentioned above. You'll then organize your JavaScript files the same way you'd organize CSS or other languages in your projects; either as external files or directly within your HTML.