JavaScript: jQuery — a JavaScript Library

jQuery is a popular JavaScript library that you can use to take advantage of ready-made JavaScript functions. jQuery has a number of useful effects, such as fading in or out, expanding or collapsing, and more.

Integrating jQuery

To use the jQuery library, go to jquery.com and download the jQuery JavaScript file. You can choose either the production or minified versions. The minified version removes all the line breaks and compresses the scripts into as small a space as possible. It's not very readable this way, but it loads faster.

You reference the jQuery file similar to how you reference your other JavaScript files:

<script src="jquery.js"></script>

Sample jQuery Format

With regular JavaScript, if you wanted to initiate an action on an element, you would use the getElementById method, like this:

document.getElementById("top").className = "topNew";

In this example, the script gets the ID labeled "top" and replaces its class with "topNew".

With jQuery, you can run the same operation but more quickly and easily. Additionally, jQuery will add the class to the element rather than replace it. This allows you to keep the existing CSS of the element and build on its properties.

Here's the basic jQuery format:

jQuery("#someID").someAction();

You start by writing jQuery, followed by the style you want to select. Then add a dot and the method you want to apply.

Here's a more specific example:

jQuery("#top").addClass("topNew");

This will find the #top ID element and add the "topNew" style to it.

Interacting with IDs, Classes, and HTML Elements

jQuery lets you grab classes and HTML elements, not just IDs. Whether it's an ID, class, or HTML element, what you specify is generically referred to as a "selector."

Here's how you can add a new class to an existing element:

jQuery(".subtitle").addClass("bannersubtitle");

This script looks for the subtitle class and adds the bannersubtitle clas to it.

You can add a class to a general HTML element as well:

jQuery("li").addClass("newListStyle");

This script looks for list li elements and adds the newListStyle class to it.

You can also work with elements that have classes:

jQuery("p.ingredients").addClass("highlight");

This script looks for paragraph elements with the ingredients class and adds the highlight class to it.

Adding Style Properties

In addition to adding styles, you can also add special style properties to be even more specific. For example, you can add any of the following:

:first
:last
:contains()
:visible

Here's an example:

jQuery("li:last").addClass("lastliststyle");

This script looks for the last list item and adds the lastliststyle class to it.

You can also identify paragraph text that contains a certain word:

jQuery("p:contains('free')").addClass("largetext");

This script will look for any paragraph text that contains the word "free" and add the "largetext" class to it.

Other jQuery Classes

In addition to the .addClass method, jQuery has other methods as well:

removeClass removes a class from an element.

toggleClass adds a class to an element if element doesn't already have the class applied. If the class is already applied, toggleClass removes it.

The $ Shorthand for jQuery

Rather than writing out jQuery every time, you can write $ instead. The $ symbol is a short variable that replaces jQuery. Using this symbol, your jQuery statements look like this:

$("p.new").addClass("large");

This script looks for all paragraph elements with the new class and adds the large class to it.

The preceding statement is the same as if you had written out jQuery.

jQuery("p.new").addClass("large");

Events with jQuery

You apply jQuery styles so they initiate on certain events. The following are common jQuery events:

.hide
.show
.fadeOut
.fadeIn
.slideDown
.slideUp

You use these events in the same way we've been using addClass, except that these events take parameters. You can specify how long it takes for the action to take place by adding the time in milliseconds in parentheses.

$("li").hide(7000);

This statement hides all li elements in 7000 milliseconds.

Normally you wouldn't want to hide an element without the user clicking or otherwise acting on it, so you need to integrate an event first. You do this by adding an anonymous function after the event.

//when list elements are clicked
$("li").click(function() {
//slide the li elements up in 3000 ms
$("li").slideUp(3000);
});

You could also add some text to the element by using the text method. Here's an example using the text method.

//When the p.more class is clicked
$("p.more").click(function() {
//add this text
$("p.more").text("Here are more details...");
});

Using "This" in jQuery

You can also use the word this so that an action is applied only to the element selected rather than applied to all elements. In the function, replace the element name with the more generic this.

//when the .widgetTitle class is clicked
$(".widgetTitle").click(function() {
//write this text
$(this).text("Hi there");
});

This will add the word "Hi there" when a user clicks an element with the .widgetTitle class. However, it will write the text only for the specific .widgetTitle class that was clicked. It won't write it to every element on the page that has the same class.

Here's another example with a different method applied:

//when the p.more class is clicked
$("p.more").click(function() {
//fade out the element in 3000 ms
$("this").fadeIn(3000);
});

In this script, when a paragraph with the more class is clicked, the paragraph will fade out in 3000 milliseconds.

Running Scripts When the DOM Loads

If you want to run a jQuery script once the DOM loads, there's a special way of writing it. You use the (document).ready method. Unlike with the traditional JavaScript for the window.onload method, which can only be run once per page, you can use jQuery's (document).ready multiple times on the same page.

Here's the format for running a script when the DOM loads:

//when the page loads, run this function
$document.ready(function () {
//write this text
$("p").text("Finished loading!");
});

After the page loads, the text "Finished loading!" will appear.

About Tom Johnson

I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.

If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.