Welcome to our third lesson on jQuery for absolute beginners. In this lesson we will be covering jQuery selectors. If you missed the previous lessons, I encourage you to go through them first. Click on the following links to do so: lesson 1 and lesson2.
jQuery offers a very powerful technique for selecting and working on a collection of elements—CSS selectors. At this this point you must already be familiar with CSS selectors.
You can use practically all css selectors.
The basic syntax for selecting an element or tag you wish to perform some manipulation with in jQuery is:
$('selector');
Basic Selectors
ID Selectors
Supposing we have the following HTML structure:
In CSS to select the <p> element with an id of ‘message’, you do something like:
#lesson3 {}
Well for jQuery, from the basic syntax from above you do this:
$('#lesson3');
The pound sign (#) must precede the id name.
So for example to change the color of the p tag, you’d do something like this
$('#lesson3').css({'color', 'red'});
Element Selectors
Similarly you can select element by tag name in jQuery just as in css.
In CSS to select the <a> or <h1> element, you’d simply do:
a {} or h1{}.
To achieve the same in jQuery, you’d do the following:
$(‘a’) or $(‘h1’);
So for example, to change the link text:
$('a').text('www.facebook.com');
Class Selectors
Suppose we have the following HTML structure
In CSS to select the <p> element with an class of ‘lorem’, you do something like:
.lorem {}
Well in the case of jQuery, from the basic syntax from above you do this:
$('.lorem');
The dot sign (.) must precede the class name.
So for example to set the display property of the p tag to none, you’d do something like this:
$('.lorem').hide();
Advanced Selectors
Descendant selectors
A lot of times in CSS, for one reason or the other you cannot simply select a single element. You have to select several elements before you get to the specific element you wish to style. For example:
Suppose we have the following HTML structure:
Now, how do we go about selecting the <li> tags in CSS?
There are several ways to achieve this but I’d pick one.
.child-div ul li {}
To translate this selection in jQuery is similar:
$('.child-div ul li');
This is known as the descendant selectors. Since it would be difficult to select the li element by itself, you look for its nearest parent and start moving downwards till you get the li tag. The element you wish to select must come last.
Note: do not abuse this method by first selecting 5, 10 parents etc. At most you don’t want to use more than two.
Child selectors
These are used to select a tag that is a direct child of another tag. A child tag is the direct descendant of another tag.
From the HTML structure above, how do we target the first h1 tag?
In css you might be tempted to do this:
.main-div h1 {}
Sorry, this won’t get the job done!
Why? Because since we selected h1 from it’s parent .main-div, all h1 that are children of .main-div will be selected including the last h1. Indeed the last h1 is a child although more precisely a grand-child, .child-div is simply it’s most immediate parent or ancestor.
To target the first h1 accurately you do the following:
.main-div > h1 {}
The greater than symbol (>) indicates that the element on the right is a direct child, not grand-child or great-grand-child of the element on the left.
So to translate this to jQuery, you’d do the following:
$('.main-div > h1');
Adjacent Sibling
Selectors let you select a tag that appears directly after another tag. The easiest way to understand this is to think about the relationship of siblings i.e brothers or sisters having the same immediate parent or ancestor.
Looking at the HTML structure above, can you identify elements that are siblings?
Starting from the main parent div .main-div, you can easily see that it has 3 direct children
The first h1, p and div with a class of .child-div. This means that they are all siblings. But .child-div also has it’s own children, which are:
h1, a and p.
Now how can we select the p tag immediately after i.e adjacent the h1 tag?
Note: there is only one p tag in this case that is adjacent to a h1.
In CSS you’d select like so:
h1 + p {}
Similarly in jQuery you’d do this:
$('h1 + p');
To create an adjacent sibling selector, a plus sign (+) needs to be between two selectors (which can be any type of selector: IDs, classes, or elements). The selector on the right is the one to select, but only if it comes directly after the selector on the left.
Attribute selectors
If you are not already familiar with attributes in HTML, I’d quickly give examples.
<img src='' alt='a flower image'/>
<a href='' target='_blank' name=''></a>
<input type='text' value='' placeholder='' disabled='true'>
<p data-point=''></p> etc
I am sure by now you already have an idea of what an attribute is.
src, alt, target, name, href, placeholder, data-point etc are known as attributes.
jQuery lets you select elements based on whether the element has a particular attribute or attribute value.
For example you could target every <a> tag that have a particular href value or that open in a new window with target=’_blank’.
$('a[href]');,
$('a[href="www.google.com"]');,
$('a[target="blank"]');
To target an img with an alt attribute:
$('img[alt]');
or to select all img tags that have an alt of ‘a flower image:
$('img[alt="a flower image"]');
To select inputs of type text:
$('input[type="text"]');
This is just a basic introduction to jQuery selectors. Please visit this link for more information: http://api.jquery.com/category/selectors/
I hope you have been able to at least grasp the basic method of selecting elements in jQuery.
In our next lesson we will cover jQuery filters and traversal apis.
