Introduction
HTML, CSS, and JavaScript are three fundamental languages of the internet. Websites are structured with HTML, styled with CSS, and interactive functionality is added with JavaScript. Most animations or actions that happen as a result of a user clicking, hovering, or scrolling are constructed with JavaScript.
jQuery is the “Write Less, Do More” JavaScript library. It is not a programming language, but rather a tool used to make writing common JavaScript tasks more concise. jQuery has the added benefit of being cross-browser compatible, meaning you can be certain the output of your code will render as intended in any modern browser.
This guide assumes no prior knowledge of jQuery. You will go through installation of jQuery in a web project. Important web development concepts such as API, DOM, and CDN will be defined in relation to jQuery. Once you have this base of knowledge and jQuery installed, you will learn to use common selectors, events, and effects.
Prerequisites
Before you begin this guide you’ll need the following:
A basic knowledge of HTML and CSS.
An understanding of the fundamentals of programming. While it is possible to begin writing jQuery without an advanced knowledge of JavaScript, familiarity with the concepts of variables and data types will help significantly.
Setting Up jQuery
jQuery is a JavaScript file that you will link to in your HTML. There are two ways to include jQuery in a project, which is to download a local copy or 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.
A CDN will be used to reference jQuery here in the examples. You can find the latest version of jQuery in Google’s Hosted Libraries. If instead you wish to download it, you can get a copy of jQuery from the official website.
You will begin this exercise by creating a small web project. It will consist of style.css in the css/ directory, scripts.js in the js/ directory, and a main index.html in the root of the project.
project/
├── css/
| └── style.css
├── js/
| └── scripts.js
└── index.html
To begin, make an HTML skeleton and save it as index.html:
index.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
Link to the jQuery CDN right before the closing </body> tag, followed by your own custom JavaScript file, scripts.js:
index.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
Your JavaScript file (scripts.js) must be included below the jQuery library in the document or it will not work.
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.
Using jQuery
By comparing a simple “Hello, World!” program in both JavaScript and jQuery, you can see the difference of how they’re both written.
JavaScript
document.getElementById("demo").innerHTML = "Hello, World!";
jQuery
$("#demo").html("Hello, World!");
This short example demonstrates how jQuery can achieve the same end result as plain JavaScript in a succinct manner. At its core, jQuery is used to connect with HTML elements in the browser via the DOM.
The Document Object Model (DOM) is the method by which JavaScript (and jQuery) interact with the HTML in a browser. To view exactly what the DOM is, in your web browser, right click on the current web page select “Inspect”. This will open up Developer Tools. The HTML code you see here is the DOM.
Each HTML element is considered a node in the DOM – an object that JavaScript can touch. These objects are arranged in a tree structure, with <html> being closer to the root, and each nested element being a branch further along the tree. JavaScript can add, remove, and change any of these elements.
If you right click on the site again and click “View Page Source”, you will see the raw HTML output of the website. It’s easy at first to confuse the DOM with the HTML source, but they’re different – the page source is exactly what is written in the HTML file. It is static and will not change, and will not be affected by JavaScript. The DOM is dynamic, and can change.
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, you need to ensure the document is “ready” first.
Create the file scripts.js in your js/ directory, and type the following code:
js/scripts.js
$(document).ready(function() {
// all custom jQuery will go here
});
All jQuery code you write will be wrapped in the above code. jQuery will detect this state of readiness so that code included inside this function will only run once the DOM is ready for JavaScript code to execute. Even if in some cases JavaScript won’t be loaded until elements are rendered, including this block is considered to be best practice.
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 you’ll create an empty block-level paragraph element with the ID demo applied to it:
index.html
...
<body>
<p id="demo"></p>
...
jQuery is called with and represented by the dollar sign ($). You access the DOM with jQuery using mostly CSS syntax, and apply an action with a method. A basic jQuery example follows this format:
$("selector").method();
Since an ID is represented by a hash symbol (#) in CSS, you will access the demo ID with the selector #demo. html() is a method that changes the HTML within an element.
You’re now going to put your custom “Hello, World!” program inside the jQuery ready() wrapper. Add this line to your scripts.js file within the existing function:
js/scripts.js
$(document).ready(function() {
$("#demo").html("Hello, World!");
});
Once you’ve saved the file, you can open your index.html file in your browser. If everything works 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 you wrote.
Selectors
Selectors are how you tell jQuery which elements you 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 ():
$("selector")
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.
$("*") Wildcard: This selects every element on the page.
$(this) Current: This selects the current element being operated on within a function.
$("p") Tag: This selects every instance of the <p> tag.
$(".example") Class: This selects every element that has the example class applied to it.
$("#example") Id: This selects a single instance of the unique example id.
$("[type="text"]") Attribute: This selects any element with text applied to the type attribute.
$("p:first-of-type") Pseudo Element: This 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.
jQuery Events
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, you could have written the text directly into the HTML without bothering with jQuery. However, you will need to utilize jQuery if you 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. You will use this button to listen for your click event:
index.html
...
<body>
<button id="trigger">Click me</button>
<p id="demo"></p>
You will use the click() method to call a function containing your “Hello, World!” code:
js/scripts.js
$(document).ready(function() {
$("#trigger").click();
});
Your <button> element has an ID called trigger, which you select with $("#trigger"). By adding click(), you’re telling it to listen for a click event, but you’re not done yet. Now you’ll invoke a function that contains your code, inside the click() method:
function() {
$("#demo").html("Hello, World!");
}
Here’s the final code:
js/scripts.js
$(document).ready(function() {
$("#trigger").click(function() {
$("#demo").html("Hello, World!");
});
});
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 you 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.
click() Click: This executes on a single mouse click.
hover() Hover: This executes when the mouse is hovered over an element. mouseenter() and mouseleave() apply only to the mouse entering or leaving an element, respectively.
submit() Submit: This executes when a form is submitted.
scroll() Scroll: This executes when the screen is scrolled.
keydown() Keydown: This 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
jQuery effects work hand-in-hand with events by allowing you to add animations and otherwise manipulate elements on the page.
You will make an example where you open and close a popup overlay. While you could use two IDs – one to open the overlay and another to close it – you’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:
index.html
...
<body>
<button class="trigger">Open</button>
<section class="overlay">
<button class="trigger">Close</button>
</section>
...
In your style.css file, you will use a minimal amount of CSS to hide the overlay with display: none and center it on the screen:
css/style.css
.overlay {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
background: gray;
}
Back in the scripts.js file, you’re going to use the toggle() method, which will toggle the CSS display property between none and block, hiding and showing the overlay when clicked:
js/scripts.js
$(document).ready(function() {
$(".trigger").click(function() {
$(".overlay").toggle();
});
});
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.
toggle() Toggle: This switches the visibility of an element or elements. show() and hide() are the related one-way effects.
fadeToggle() Fade Toggle: This switches the visibility and animates the opacity of an element or elements. fadeIn() and fadeOut() are the related one-way effects.
slideToggle() Slide Toggle: This toggles the visibility of an element or elements with a sliding effect. slideDown() and slideUp() are the related one-way effects.
animate() Animate: This performs custom animation effects on the CSS property of an element.
You can use jQuery events to listen for a user interaction such as the click of a button, and jQuery effects to further manipulate elements once that action takes place.
Conclusion
In this guide, you 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.
