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:
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:
Selecting by Class
To get all the elements with a class name, just preface the class name with a
. symbol, just like above:
Selecting by Element Type
You can get all elements of a certain type (
p, etc) by simply using the element type:
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 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 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!