jQuery Selectors

Selecting Elements with jQuery

JavaScript is often used to retrieve or change the content or value of HTML elements on a page, as well as to apply effects like showing, hiding, and animations. However, before you can take any action, you first need to find or select the specific HTML element.

Selecting elements using traditional JavaScript methods can be cumbersome, but jQuery simplifies this process significantly. Its ability to make DOM element selection straightforward and effortless is one of its most powerful features.

In the upcoming sections, you'll learn about common methods for selecting elements on a page and performing actions on them using jQuery.

Selecting Elements by ID

You can use the ID selector to target a single element with a unique ID on the page.

For instance, the jQuery code below will select and highlight an element with the ID attribute id="mark" when the document is ready to be manipulated.

<script>
$(document).ready(function(){
// Highlight element with id mark
$("#mark").css("background", "yellow");
});
</script>

In the example above, $(document).ready() is an event used to safely manipulate a page with jQuery. Code inside this event executes only once the page's DOM is fully loaded. We'll delve deeper into events in the next chapter.

Selecting Elements by Class Name

The class selector is used to target elements with a specific class.

For instance, the jQuery code below will select and highlight elements with the class attribute class="mark" when the document is ready.

<script>
$(document).ready(function(){
// Highlight elements with class mark
$(".mark").css("background", "yellow");
});
</script>

Selecting Elements by Name

The element selector is used to target elements based on their element name.

For example, the jQuery code below will select and highlight all paragraph elements (i.e., <p> elements) in the document when it is ready.

<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "yellow");
});
</script>

Selecting Elements by Attribute

The attribute selector allows you to target an element based on one of its HTML attributes, such as a link's target attribute or an input's type attribute.

For instance, the jQuery code below will select and highlight all text input elements (i.e., <input> elements) with the attribute type="text" when the document is ready.

<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "yellow");
});
</script>

Selecting Elements by Compound CSS Selector

You can combine CSS selectors to make your element selection more specific.

For example, you can combine a class selector with an element selector to target elements in a document that have a specific type and class.

<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");

// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");

// Highlight li elements inside the ul elements
$("ul li").css("background", "red");

// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");

// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");

// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>

jQuery Custom Selector

Alongside the CSS selectors defined selectors, jQuery offers its own custom selectors to enhance the ability to select elements on a page.

<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");

// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");

// Highlight first paragraph element
$("p:first").css("background", "red");

// Highlight last paragraph element
$("p:last").css("background", "green");

// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");

// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");

// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>