A Closer Look at jQuery Selectors

Selectors are the foundation of the jQuery library. They will always be used when using jQuery to manipulate the DOM. Selectors operate as a function to return a matching element. They come with the jQuery library and are ready to use out of the box. 

The selector function has a distinctive look. It begins with a dollar sign ($) followed by parentheses.  

$()

What is accepted inside the parentheses is the name, id, or class of the element to be selected. After an element is selected, methods to change that element can be chained onto the selector function using dot notation.

$('p').html("Some new content rendered from jQuery")

This selects all of the paragraph elements on the page and replaces the HTML inside of them with a string. jQuery was built to quickly access any element or elements and use methods to make the desired changes. This functionality takes the guesswork out of creating a dynamic web application.

What is a jQuery Selector?

The jQuery selector is a function that comes with the jQuery library. It is required to use jQuery. It accepts the name, class, and/or id as a string for its parameters. From here, a jQuery method can be chained on to perform a manipulation of the DOM.

Why is this useful? jQuery introduces shorthand built in to the methods that can be verbose in plain JavaScript, using a selector to directly refer to an element rather than calling document.querySelector() or document.querySelectorAll().

A jQuery selector reduces the JavaScript querySelector() to $(). It is implicitly called on the document rather than explicitly, which also reduces required code.

jQuery Selector Syntax

So far we’ve talked abstractly about the jQuery selector function. We now know that it is a function that directly references a specified DOM element. All that is required is the element name, class, or id. The name can also be combined with a class or id depending on how your HTML is organized.

The selector can be as general as selecting all of the elements on the page:

$('*')

Using jQuery like this is generally not recommended. A more common practice is selecting a group of the same elements. For example, if we wanted to change all of the paragraph elements we could select them directly:

$('p')

We have now selected all <p> tags on the current page. From here, we chain a jQuery method to make a change.

$('p').html('Replace original paragraph HTML with this.')

The html() method replaces the HTML attributes of all selected <p> tags.

What if we only wanted a specific paragraph element? Suppose we had multiple <p> tags. One of them has an id of ‘new-content.’ We can select it directly.

$('p#new-content')

The jQuery selectors use CSS references to the elements (# = id, . = class). Now only the paragraph element with the id of ‘new-content’ is selected and ready to be changed. 

Finally lets select an element with an assigned class. Our app has several <div> elements. A few are wrapped inside a <div> with the class of ‘main-content’. If we want to select the main content to dynamically change, we pass the name and class to the selector.

$('div.main-content')

Now all of the content wrapped in the selected <div> is ready to be manipulated.

Conclusion

The jQuery selector function is what drives the library. It is essential to know how to work with the selector function and how to chain the jQuery methods to it to realize the full power of jQuery. We learned what the jQuery selector is and the syntax involved in selecting elements.

By now, you should have a clear understanding of what the jQuery selector is and how to use it. From here, practice using selectors and chaining jQuery methods to it for some real fun! Happy coding!