Web Development

How to use JQuery Selectors

May 13, 2019

Using JQuery for a landing page is like using a 52-tool Swiss Army Knife to hammer a nail into the wall. It’s completely overpowered and probably not the right tool.

However there comes a time when you want a nice little sliding animation but don’t want to go hunting for a JS plugin that only does animation. So thus here we are. In this tutorial we’re going to learn how to use JQuery Selectors.

What is a JQuery Selector?

A JQuery selector is very similar to a CSS selector, just with extended functionality. If you have done any work with CSS classes then you will find it very easy to get the hang of.

The syntax of a JQuery Selector goes like this: $('selector')

Just put your selector string inside a $( ) and your set!

Making a Selector String

There are a number of ways to select the element you are looking for. Below I’ll outline a few of the most common. Remember, you can chain as many of these together as you like.

Selecting by ID

To select an element by it’s ID attribute (<div id="some-id">), just preface the ID with a # symbol, like so: $('#some-id'). Easy!

Selecting by Class

To get all the elements with a class name, just preface the class name with a . symbol, just like above: $('.some-class-name').

Selecting by Element Type

You can get all elements of a certain type (divp, etc) by simply using the element type: $('div').

Selecting Children Elements

This is the part of JQuery Selectors that make them so extensible. In most cases, you can select a child by two ways – direct descendant or any descendant.

Direct Descendant

Direct descendant is pretty self-explanatory. Select a child element that is directly nested in the parent. The syntax for a direct descendant selector goes like this: $('parent > child'). Simply put a > character between the child and parent parts of the selector.

You can use any of the methods mentioned above to select a child. For example, if you wanted to select all children with the highlight class from an element with the paragraph id, you would use: $('#paragraph > .highlight').

Indirect Descendant

Indirect descendant means any child of the parent, no matter how far down it is nested. The syntax for indirect descendant looks like this: $('parent child'). The only difference between direct and indirect is that direct descendant picks elements that are only one level down from the parent.

Other Useful Selectors

There are some other selectors that you might find handy. Here are some of them:

$(':header')  //all header elements
$(':focus')   //the element with current focus
$(':empty')   //all empty elements
$(':hidden')  //all hidden elements
$(':visible') //all visible elements

Remember that you can chain as many of these together as you like!

The info I have covered here is a great start, however, as most things related to programming go, there is still more information to learn.

There is a great list of JQuery selectors here on W3 Schools, albeit not with as many examples and explanation as in this article. I highly recommend talking a look there when you feel that there is something you are missing, as well as tinkering around with different combinations of selectors. Thanks for reading!