Learn and Master jQuery

At last count, more than 90% of all websites were running JavaScript. As the most popular JavaScript library, jQuery is used by a majority of modern websites, and around 65% of the 10 million most popular sites on the web.

What this means is that if you want to be web developer, website designer, or webmaster, you need to know how to work with jQuery.

What is jQuery?

JavaScript is the programming language used to add interactivity to websites. jQuery is a library of pre-built JavaScript functions that handle tasks commonly managed with JavaScript. In essence, jQuery makes it easier and faster to use JavaScript.

jQuery is a library of commands that make it easy to locate, select, and manipulate HTML elements on a webpage in response to visitor activity. For example, using jQuery you can select a specific element, such as all of the <h2> header elements, and cause them to be manipulated in some way based on visitor activity - such as changing font size when the mouse hovers over them.

The strength of jQuery is in its ability to easily locate and select HTML elements without requiring that any additional attributes be applied to the HTML element.

jQuery Makes Hard Things Easy

Anything that you can do with jQuery you can also do with JavaScript. The difference is that many things that can be quite complicated to accomplish with JavaScript are very easy to do with jQuery. Let's look at two examples: toggle and trigger.

Hide or Display Page Elements With Toggle

The CSS display property can be used to hide HTML elements. Select any HTML element with a CSS selector and apply a value of none to the display property, and the element will be hidden from view. If you want to make an HTML element hide on command, the CSS display property is how you can make it happen.

It isn't very hard to use JavaScript to hide or show an HTML element by controlling the CSS display property. However, the jQuery toggle() method includes many built-in options that make it easy to produce powerful toggle effects that would be very hard to duplicate with JavaScript. If you include jQuery UI in addition to boilerplate jQuery in your HTML document, you can also use a number of jQuery UI effects to control how toggled elements are hidden and displayed.

If you want to learn how to use the jQuery toggle() method, there are lots of places to get started:

Execute a Script With the Trigger Event Handler

Another task that jQuery makes extremely easy is to trigger an event handler even if the actual event hasn't transpired. For example, let's say you have a script that is executed every time a specific button is clicked using the JavaScript onclick event. Now what if you also want that same script run anytime a different action takes place as if the button itself had been clicked? The trigger() event handler is the answer.

Basic usage of the trigger method involves applying the trigger method to a specific event, and using it to trigger a second event when the first event transpires. That might sound complicated, but basic use of the trigger method is straightforward. Use the following resources to cover the basics and also get a look at some more advanced uses of the method.

  • Triggering Event Handlers: use this link to go straight to the chapter on triggering event handlers in the Learn jQuery tutorial.
  • jQuery API Documentation: an overview of the trigger method and all of the parameters and options that can be used with it.
  • jQuery trigger() Method at W3Schools: an introduction to the jQuery trigger method and a code sandbox to test code.
  • How to Create Custom Events in jQuery: a Sitepoint tutorial that explains how to create custom jQuery events so that you can use the trigger method with custom events rather than built-in jQuery events.
  • Do Not Trigger Real Event Names With jQuery! Many developers use standard jQuery events such as "click" as the event type on which to trigger an event. However, this can create problems and David Walsh recommends using custom events with the trigger method.

Advantages to Using jQuery

If jQuery just makes it easier to use JavaScript, why do we use jQuery at all? Why not just stick with JavaScript and avoid having to learn a whole new set of commands and implementations?

According to Wikipedia, there are at least four advantages offered by jQuery.

  1. jQuery encourages the separation of scripting and HTML. While scripts can be written directly into HTML documents, the current thinking within the web design and development community is that HTML, CSS, and JavaScript should all be maintained separately. This is complicated by the fact that there must be a way to associate scripts to specific HTML elements and events. Without jQuery, the easiest way to do this is to add event attributes to the HTML document that call JavaScript functions. However, jQuery gets around the need to do this by providing a simple syntax for adding event handlers dynamically using JavaScript. This allows for complete separation of the JavaScript from the HTML document.
  2. jQuery encourages coders to write shorter clearer scripts. jQuery is designed for brevity. Anything you can do with jQuery you can also do with plain JavaScript. However, the jQuery code will typically be much shorter and clearer than the JavaScript code to accomplish the same task.
  3. Using jQuery eliminates cross-browser inconsistency. While JavaScript is rendered somewhat differently by different browser engines, jQuery has been developed to handle cross-browser differences and provide a consistent experience across browsers.
  4. jQuery is extensible. The jQuery library has been designed to be easily supplemented with new elements, events, and methods. Once these new items are added to the local jQuery library, they can be easily reused across a website as a plugin.

Getting Started with jQuery

If you're ready to start learning how to use jQuery, and you aren't already familiar with JavaScript, the first step to learning jQuery is to learn JavaScript.

As we've mentioned, jQuery is a library of JavaScript commands. As a result, jQuery follows the same basic syntax and structure as JavaScript. Having a strong grasp of JavaScript's syntax, structure, and basic functions is critical to mastering jQuery. According to the jQuery Foundation:

All the power of jQuery is accessed via JavaScript, so having a strong grasp of JavaScript is essential for understanding, structuring, and debugging your code. While working with jQuery regularly can, over time, improve your proficiency with JavaScript, it can be hard to get started writing jQuery without a working knowledge of JavaScript's built-in constructs and syntax.

Your Development Environment

Before you start coding, you'll need to get your development environment set up. The good news is that all you really need to get started writing jQuery is a web browser, a text editor, and a copy of jQuery.

While any web browser will do, developers use either Mozilla Firefox or Google Chrome. While you should also have Internet Explorer or Edge, Opera, and Safari available to test your code in multiple browsers, if you aren't already using Firefox or Chrome, go download and install the latest version of one or both of these free applications and use it for development purposes.

Sure, you could use Notepad to write code, but why would you? There are many great text editors available for free or very reasonable cost that provide many features designed to making coding easier and less error-prone. Some of our favorites are Atom, TextMate for Apple computers, Notepad++ for Windows computers, and Brackets.

Lastly, since jQuery is a library of commands built on JavaScript, you'll need to call the jQuery library from any document that uses jQuery. In order to do this you'll either need to download jQuery, or link to a jQuery library hosted online.

Resources

We've scoured the web for the best jQuery tutorials, ebooks, and interactive courses. Our recommendation is that you make use of several of these resources and work your way through the resources that best fit your learning style.

Our recommended training progression begins with some basic interactive tutorials that will show you the power of jQuery and demonstrate what is possible with the world's most popular JavaScript library. Next, dive deeper into jQuery by reviewing in-depth tutorials offered by some of the most-respected names in web development including the Mozilla Developer Network and the jQuery Foundation. Finally, master jQuery by working your way through an ebook or paperback text.

Free Interactive Courses

There's only so much that a written document can do to explain how a programming language works and what it can do. To really get a handle on the power of a language, you have to see it in action. Free interactive courses are one of the best ways to get a quick handle on the basic syntax of a programming language while also learning what it can really do.

Since the jQuery Foundation recommends learning JavaScript before you dive into jQuery, we recommend that you do the same. These free courses will have you writing basic JavaScipt in no time:

  • JavaScript Road Trip Part 1 from CodeSchool: Only part 1 of this road trip is free. The rest of the trip is hidden behind a pay wall. Run through the free content and then head to Codecademy to keep learning.
  • JavaScript by Codecademy: This content in this full-length online course is free. Access to quizzes is optional and does carry a price tag. The course should take about ten hours to complete, and will leave you capable of writing basic JavaScript code. With this course under your belt you'll be ready to tackle some jQuery.

There are two interactive jQuery courses you should take to get a good basic understanding of what is possible with jQuery. These courses include:

  • Try jQuery: A free introduction to jQuery put together by the jQuery Foundation in partnership with CodeSchool.
  • jQuery by Codecademy: This course will take about three hours to complete. Just as was the case with the JavaScript course, the content of the course is free but if you want to take the quizzes you'll have to pay for those. Our recommendation is to work through the free content and then move on to additional resources. By the time you finish, you'll know how to use jQuery to select HTML elements, how to style those elements, and how to tie website visitor actions to jQuery code so that the website responds interactively.

In-Depth Tutorials and Learning Guides from Industry-Leaders

Learning JavaScript and jQuery should go hand-in-hand. If you're ready to go deeper with jQuery, you'll also need to broaden your knowledge of JavaScript. One of the best places to learn about JavaScript is the Mozilla Developer Network (MDN). Check out these great resources:

  • JavaScript Basics: While you may have learned the basics of how to actually use JavaScript through the interactive courses we recommended, at MDN you'll learn how professional developers think about and use JavaScript. If you read through carefully, this document will take a couple of hours to fully digest.
  • JavaScript Guide: This extensive guide and tutorial will walk you through all of the foundational topics of the JavaScript language including functions, error handling, loops, grammar, expressions, and much more. Make it through this guide and you will know more JavaScript that the average web designers.

If you made it through the JavaScript resources at MDN, you'll be fully prepared to tackle the training offered by the jQuery Foundation. At the jQuery Foundation website you'll find an extensive Learning Center organized into chapters. Each chapter is dedicated to a specific topic such as About jQuery, Effects, Ajax, Plugins, and more. This authoritave resource is detailed and technical - just the thing you'll need if you're going to master jQuery.

Ebooks and Paperbacks

Once you work your way through the resources we've already covered you'll be ready to use jQuery to tackle any common web design scenario. In addition, you'll be knowledgeable enough to find the help you need to tackle more complex problems using the jQuery API.

Once you're ready to become an advanced jQuery developer, there are a few texts that can help you on your way.

Free Ebooks

We located two free ebooks that have an excellent reputation within the jQuery community. With some jQuery coding experience under your belt, develop a new level of understanding of the most popular JavaScript library by working your way through one or both of these high-quality texts:

  • jQuery Fundamentals by BoCoup, LLC.: Part ebook and part interactive tutorial, this text covers the jQuery both in written format and with practical examples.
  • jQuery Succinctly, written by Cody Lindley and hosted by Syncfusion: A hundred page text that covers the concepts essential to advanced jQuery development. If you're just getting started, this isn't the text for you, but if you're a reasonably competent JavaScript or jQuery developer ready to take the next step, this text is an excellent choice.

Paperback Texts

If you prefer a physical text, here are some of the best jQuery texts available today:

  • Learning jQuery: Karl Swedberg, a current member of the jQuery Foundation Board of Advisors, along with Jonathan Chaffer, a web developer and influential Drupal programmer, designed this text to be suitable for JavaScript newbies or experienced developers alike. This text is also available for Kindle.
  • JavaScript and JQuery, Interactive Front-End Web Development: This text by Jon Duckett complements his leading text on HTML and CSS, and may be the most popular JavaScript and jQuery text avaliable today.
  • jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa: Katz and De Rosa are both active members of the jQuery Foundation - Katz as a memeber of the Board of Advisors and De Rosa as a member of the Content team. This authoritative text is a fast-paced look at jQuery ideally suited to beginning JavaScript developers.

Further Reading and Resources

We have more guides, tutorials, and infographics related to coding and website development:

What Code Should You Learn?

Confused about what programming language you should learn to code in? Check out our infographic, What Code Should You Learn? It not only discusses different aspects of the languages, it answers important questions such as, "How much money will I make programming Java for a living?"