Skip to main content
X

Explore your training options in 10 minutes

JavaScript Tutorials

A Closer Look at jQuery Selectors

Ryan Manchester - January 22, 2021


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

$('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.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

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!

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Ryan Manchester

About the author: Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.

Skip to main content