Share
Explore

Understanding jQuery Selectors: html element name such as 'div', ID, and 'class' in AJAX (also JavaScript, CSS)

Learning Outcomes:

Students learn to explain and use the operation of html element selectors, ID selectors and class selectors.
You will make example html pages for html element, ID and class selectors with webpages that change the contents of an image when the user clicks a button.

jQuery selectors are a powerful aspect of the jQuery library, which allow us to select and manipulate HTML elements.
These selectors are based on the CSS selector syntax, and thus we can select elements by tag name, class, id, attributes, and more.
Today, we'll focus on the most commonly used selectors, the html tag name (in this case, a div) and the ID and the class selectors.

Understanding 'html element name' and '.class' selectors

Div Selector ("div"): This selector will select all <div> elements in the HTML document.
Class Selector (.className"): This selector will select all elements with a specific class. For instance, .image would select all elements with the class "image".
Let's create two simple webpages demonstrating these selectors and AJAX to change the content of an image when a button is clicked.

Example 1: Using 'div' Selector


<!DOCTYPE html><html><head> <title>jQuery div Selector Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body> <h1>Change Image</h1> <div id="imageContainer"> <img id="image" src="oldImage.jpg" alt="Old Image"> </div> <button id="changeImage">Change Image</button>
 <script> $(document).ready(function(){ $("#changeImage").click(function(){ $("div").html('<img id="image" src="newImage.jpg" alt="New Image">'); }); }); </script></body></html>
In this example, when you click the "Change Image" button, it selects the <div> element using the $("div") selector, and changes its HTML to display a new image.

Example 1B: Toggling Images

To toggle between the kitten and lion images, you can modify the code in the following way:

<!DOCTYPE html><html><head> <title>Image Toggle Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body> <h1>Toggle Image</h1> <div id="imageContainer"> <img id="image" src="./kitten.png" alt="Kitten Image"> </div> <button id="toggleImage">Toggle Image</button>
 <script> $(document).ready(function(){ $("#toggleImage").click(function(){ var currentImage = $("#image").attr("src"); var newImage = currentImage === "./kitten.png" ? "./lion.png" : "./kitten.png"; var newAltText = currentImage === "./kitten.png" ? "Lion Image" : "Kitten Image"; $("#image").attr("src", newImage); $("#image").attr("alt", newAltText); }); }); </script></body></html>
In this modification, I've changed the button ID to "toggleImage" and updated the jQuery click event accordingly. Instead of changing the entire HTML of the div, the code now checks the current image source and toggles between the kitten and lion images by updating the src and alt attributes of the image element.

Example 2: Using '.class' Selector

htmlCopy code<!DOCTYPE html><html><head> <title>jQuery Class Selector Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body> <h1>Change Image</h1> <div class="imageContainer"> <img class="image" src="oldImage.jpg" alt="Old Image"> </div> <button id="changeImage">Change Image</button>
 <script> $(document).ready(function(){ $("#changeImage").click(function(){ $(".image").attr("src", "newImage.jpg"); $(".image").attr("alt", "New Image"); }); }); </script></body></html>
In this example, the image has a class "image". When the "Change Image" button is clicked, the jQuery script selects the image element using $(".image") selector, and changes the source (src) and alternative text (alt) attributes to reflect the new image.
Note: In these examples, replace "oldImage.jpg" and "newImage.jpg" with the actual paths to your images.
In our joke example, selectors are also used in similar fashion. For instance, $("#getJoke") is an id selector that selects the element with id "getJoke", which is our button. When this button is clicked, the AJAX function is triggered to fetch a new joke. Similarly, $("#joke") is used to select the paragraph where we want to display our joke.
jQuery selectors form the backbone of DOM manipulation using jQuery and understanding them is key to leveraging the power of jQuery and AJAX.

Now extend to a third example showing this for the case of an ID selector

Learning Outcome: Illustrate the use of an ID selector in jQuery.

Example 3: Using '#id' Selector

The ID selector in jQuery is used to select a single element with a specific ID. It is represented by the hash symbol (#).
htmlCopy code<!DOCTYPE html><html><head> <title>jQuery ID Selector Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body> <h1>Change Image</h1> <div id="imageContainer"> <img id="image" src="oldImage.jpg" alt="Old Image"> </div> <button id="changeImage">Change Image</button>
 <script> $(document).ready(function(){ $("#changeImage").click(function(){ $("#image").attr("src", "newImage.jpg"); $("#image").attr("alt", "New Image"); }); }); </script></body></html>
In this example, the image has an id "image". When the "Change Image" button is clicked, the jQuery script selects the image element using $("#image") ID selector, and changes the source (src) and alternative text (alt) attributes to reflect the new image.
Note: In these examples, replace "oldImage.jpg" and "newImage.jpg" with the actual paths to your images.
In the context of our joke web app, we use the ID selector to select both the button and the paragraph where we display the joke. $("#getJoke") selects the button with the ID "getJoke", and when it's clicked, it triggers the AJAX request. Then $("#joke") selects the paragraph with the ID "joke" where we display the setup and punchline of the joke we receive from the server.
The ID selector is very powerful as it allows us to pinpoint specific elements in the DOM and manipulate them.

Highlighting the differences in selectors for : html element name such as div, class, and ID


Table 1
0
Selector Type
Syntax
Description
Number of Elements Selected
1
Element
$("div")
Selects all elements with the given tag name, e.g., div, p, a, etc.
Multiple
2
Class
$(".className")
Selects all elements with the given class name. This class can be applied to multiple elements in the HTML document, so it can select more than one element.
Multiple
3
ID
$("#idName")
Selects the single element with the given id. Each id should be unique in an HTML document, so this will only select one element.
Single
There are no rows in this table
⁠
Element Selectors: This is the most general type of selector, it selects all elements of a certain type within the DOM. For instance, $('div') selects all <div> elements.
Class Selectors: Class selectors target all elements that have a certain class attribute. In a single page, many elements can have the same class, which enables group styling and behavior.
ID Selectors: The ID selector targets elements based on their id attribute. According to HTML standards, each id should be unique within a page, which makes this the most specific selector.
Remember, although IDs must be unique, not all browsers will enforce this. If more than one element has the same ID, the browser will still show the page, but the jQuery selectors may not work as expected. Always make sure that each element has a unique ID if an ID is assigned.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.