Learn and Master jQuery
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?
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
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.
If you want to learn how to use the jQuery
toggle() method, there are lots of places to get started:
- Learn jQuery: a free educational resource from the jQuery Foundation. The complete jQuery tutorial is worth completing and we link to in the resources at the end of this document. However, use this link if you want to go straight to the section that explains the toggle method.
- jQuery API Documentation: an overview of the toggle method and all of the options that can be used alongside it.
- jQuery UI Effects and Toggle: jQuery UI extends the toggle method with a number of effects. In addition, it has a live demo of how the effects complement the toggle method.
- jQuery toggle() Method at W3Schools: a quick introduction to the toggle method and a code sandbox where you can try it out.
- How to Hide, Show, or Toggle Your Div with jQuery: a tutorial that includes several complete code samples that demonstrate how to use toggle for a variety of purposes.
- jQuery Toggle Effect Tutorial by Akshay Jaiswal and jQuery Toggle effect by Harry Finn are two YouTube video tutorials that briefly demonstrate how to build an HTML document that includes jQuery and uses the toggle method to hide or display an HTML element.
Execute a Script With the Trigger Event Handler
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
According to Wikipedia, there are at least four advantages offered by jQuery.
- 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
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.
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.
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.
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.
In-Depth Tutorials and Learning Guides from Industry-Leaders
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.
- jQuery Fundamentals by BoCoup, LLC.: Part ebook and part interactive tutorial, this text covers the jQuery both in written format and with practical examples.
If you prefer a physical text, here are some of the best jQuery texts available today:
Further Reading and Resources
We have more guides, tutorials, and infographics related to coding and website development:
- Composing Good HTML: this is a solid introduction to writing well-formed HTML and using HTML validator software.
- CSS3 — Intro, Guides & Resources: this is a great place to start learning webpage layout.
- ASP.NET Resources: this guide will get you going with Microsoft's .NET framework for creating webpages.
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?"