This guide assumes no prior knowledge of jQuery, and will cover the following topics:
How to install jQuery in a web project.
The definitions of important web development concepts such as API, DOM, and CDN.
Common jQuery selectors, events, and effects.
Examples to test the concepts learned throughout the article.
Before you begin this guide you'll need the following:
A basic knowledge of HTML and CSS. You should already know how to set up a simple website, and have an understanding of CSS selectors such as ids, classes, and pseudo elements.
Setting Up jQuery
Download a local copy.
Link to a file via Content Delivery Network (CDN).
Note: A Content Delivery Network (CDN) is a system of multiple servers that deliver web content to a user based on geographical location. When you link to a hosted jQuery file via CDN, it will potentially arrive faster and more efficiently to the user than if you hosted it on your own server.
Note: If you downloaded a local copy of jQuery, save it in your js/ folder and link to it at js/jquery.min.js.
At this point, the jQuery library is now being loaded into your site, and you have full access to the jQuery API.
Note: An Application Programming Interface (API) is an interface that allows software programs to interact with each other. In this case, the API for jQuery contains all the information and documentation needed to access jQuery.
The outermost layer of the DOM, the layer that wraps the entire <html> node, is the document object. To begin manipulating the page with jQuery, we need to ensure the document is "ready" first. Create the file scripts.js in your js/ directory, and type the following code:
// all custom jQuery will go here
In the introduction of this article, you saw a simple "Hello, World!" script. To initiate this script and print text to the browser with jQuery, first we'll create an empty block-level paragraph element with the ID demo applied to it.
jQuery is called with and represented by the dollar sign ($). We access the DOM with jQuery using mostly CSS syntax, and apply an action with a method. A basic jQuery example follows this format.
Since an ID is represented by a hash symbol (#) in CSS, we will access the demo ID with the selector #demo. html() is a method that changes the HTML within an element.
We're now going to put our custom "Hello, World!" program inside the jQuery ready() wrapper. Add this line to your scripts.js file within the existing function:
Once you've saved the file, you can open your index.html file in your browser. If everything worked properly, you will see the output Hello, World!.
If you were confused by the DOM before, you can see it in action now. Right click on the "Hello, World!" text on the page and choose Inspect Element. The DOM will now display <p id="demo">Hello, World!</p>. If you View Page Source, you will only see <p id="demo"></p>, the raw HTML we wrote.
Selectors are how we tell jQuery which elements we want to work on. Most jQuery selectors are the same as what you're familiar with in CSS, with a few jQuery-specific additions. You can view the full list of jQuery selectors on their official documentation pages. To access a selector, use the jQuery symbol $, followed by parentheses ().
Double-quoted strings are preferred by the jQuery style guide, though single-quoted strings are often used as well. Below is a brief overview of some of the most commonly used selectors.
selects every element on the page.
selects the current element being operated on within a function.
selects every instance of the <p> tag.
selects every element that has the example class applied to it.
selects a single instance of the unique example id.
selects any element with text apptred to the type attribute.
selects the first <p>.
Generally, classes and ids are what you will encounter the most — classes when you want to select multiple elements, and ids when you want to select only one.
In the "Hello, World!" example, the code ran as soon as the page loaded and the document was ready, and therefore required no user interaction. In this case, we could have written the text directly into the HTML without bothering with jQuery. However, we will need to utilize jQuery if we want to make text appear on the page with the click of a button. Return to your index.html file and add a <button> element. We will use this button to listen for our click event.
Our <button> element has an ID called trigger, which we select with $("#trigger"). By adding click(), we're telling it to listen for a click event, but we're not done yet. Now we'll invoke a function that contains our code, inside the click() method.
Save the scripts.js file, and refresh index.html in the browser. Now when you click the button, the "Hello, World!" text will appear. An event is any time the user interacts with the browser. Usually this is done with the mouse or keyboard. The example we just created used a click event. From the official jQuery documentation, you can view a full list of jQuery event methods. Below is a brief overview of some of the most commonly used event methods.
executes on a single mouse click.
executes when the mouse is hovered over an element. mouseenter() and mouseleave() apply only to the mouse entering or leaving an element, respectively.
executes when a form is submitted.
executes when the screen is scrolled.
executes when you press down on a key on the keyboard.
To make images animate or fade in as a user scrolls down the screen, use the scroll() method. To exit a menu using the ESC key, use the keydown() method. To make a dropdown accordion menu, use the click() method. Understanding events is essential to creating dynamic website content with jQuery.
jQuery effects work hand-in-hand with events by allowing you to add animations and otherwise manipulate elements on the page. We will make an example where we open and close a popup overlay. While we could use two IDs – one to open the overlay and another to close it – we'll instead use a class to open and close the overlay with the same function.
Delete the current <button>and <p> tags from within the body of your index.html file, and add the following to your HTML document:
Refresh index.html. You will now be able to toggle the visibility of the modal by clicking on the buttons. You can change toggle() to fadeToggle() or slideToggle() to see a few other built-in jQuery effects. Below is a brief overview of some of the most commonly used effect methods.
switches the visibility of an element or elements. show() and hide() are the related one-way effects.
switches the visibility and animates the opacity of an element or elements. fadeIn() and fadeOut() are the related one-way effects.
toggles the visibility of an element or elements with a sliding effect. slideDown() and slideUp() are the related one-way effects.
performs custom animation effects on the CSS property of an element.
We use jQuery events to listen for a user interaction such as the click of a button, and we use jQuery effects to further manipulate elements once that action takes place.
In this guide, we learned how to select and manipulate elements with jQuery, and how events and effects work together to make an interactive web experience for the user. From here, you should have a deeper understanding of the capabilities of jQuery, and be on your way to writing your own code.