What are Selectors in jQuery Part 2

In the last video we talked about how to use jQuery to select something or find something in the DOM. As shown below in the image, the area underlines in white is the find something part of jQuery while the area underlined in red is the do something part of jQuery.

In today's video we are going to go deeper and learn thirteen new types of selectors in jQuery. If you head over to the jQuery website and click API Documentation and scroll all the way to the selectors area, you will see there are different kinds of selectors in jQuery. A normal web developer does not remember all the selectors but the basic ones are the ones that must be remembered. We discussed these selectors in the previous video

If you head over to jQuery website you will see there are so many selectors, For instance if you use :animated Selector, It will select all elements that are in the progress of an animation at the time the selector is run. So lets say there's an animation going on, and :animated Selector triggers, the animated divs or the elements are going to be selected by that particular selector.

We are going to look at these 13 selectors as shown below

I have some basic HTML document opened, It has an header tag with a class of mysection, I have also imported CDN from cloud fare as shown below

1. Parent > Child
2. Ancestor descendant   

Let's look in to the first two kinds. I'm going to query the DOM and do something with it like add CSS to it 

$('parent > child').css('text-decoration','underlined');

$('ancestor descendant').css('color','blue');

Another thing I'm going to do is to go to my section and add some paragraph and in the paragraph add a span tag like such 

<section class="mysection"
  <p>Some normal text. <span>I am the child of p</span></p>
</section>

$('p > span').css('text-decoration','underlined');

Now if I save it, refresh the screen the span tag which is the child of p will be underlined as shown below

Ancestor descendant   
Now let's say you are the son of your dad, but in other words you are also a descendant of your dad. So if I put the P and the span tag like such 

$('p span').css('color','blue');

Now if I save it, refresh the screen the text is not only going to be underlined but also blue as well in color as shown below 

What if you have have another span tag inside the span tag? 

<section class="mysection"
  <p>Some normal text. 
     <span>
        I am the child of p
<span>I am the child of span, but the grandchild of p.</span>
     </span>
  </p>
</section>

In the code above, p has a child span, and span has another child of span. And the second span is the grandchild or descendant of p 

If I change it to span > span like such 

$('span > span').css('text-decoration','underlined');

Save it, refresh the screen and you see the span styling is only going to take effect on another span because the span is the child of another span as shown below

But in the second scenario

$('p span').css('color','blue');

the styling is going to effect all the spans because both the spans are the descendant of P tag. 

Let's look in to some more Selectors

3- :first-child Selector
4- :last-child Selector

For the demonstration purpose I'll have a ul tag with multiple li's

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul

 Those li's above are siblings. For example if you only want to style the first li you would write

$('ul > li:first-child').append('i am the first child');

Save it, refresh the screen and you see it applied the append function to the first li

If you want the same for the last child, you could simply write 

$('ul > li:last-child').append(' i am the last child');

Save it, refresh the screen and you see it applied the append function on the last child as well

If you want to select the second child, we are going to look at another two selectors

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>fourth</li>
  <li>fifth</li>
</ul

 If you want to select the third child, something in the middle, not the first not the last one, I can simply write 

$('ul > li:nth-child(2)').append(' i am the second child');

If you want to go backwards the second last or third last you could write

$('ul > li:nth-last-child(2)').append(' i am the second last child');

Save it, refresh the screen and you see the second last child is now appended

$('li:contains("three")').css('text-transform', 'uppercase');

Save it, refresh the screen and you see the third child which contains the text three has a text of uppercase now

If I want to find an element inside an element I can use the has selector. In the image below you see I have 3 p tags in a section tag 

$('section:has("p")').css('color', 'brown');

Save it, refresh the screen and you see the paragraph color is now changed to brown

Note

Selectors with a : at the start are called filter selectors

9- :hidden
10- :visible

Let's look in to some more selectors. I'm going to add some style to the footer area, so this way it's not going to be visible

<footer style="display:none">
  Copyright info Awesome Inc.
</footer>

If I refresh the screen you see our footer is gone
 

I'm going to write

$('*:hidden').show( );

Save it, refresh the screen and you see it showed the footer area

I can go write click and go to the inspect element, you see the style display is removed and now the footer is visible.

We can do the reverse as well. I can say find all the p tags which are visible and make them hidden like such

$('p:visible').hide( );

Save it, refresh the screen and you see all the p tags are now hidden

If you view in the source code, you will see the p tags have the style display set to none

11- :focus filter Selector

The focus filter selector applies more to form elements. I'm going to write some HTML for form 

<form action="">
  <input type="text">
  <input type="button" value="click me">
</form>

Save it, refresh the screen and you see it has a value of click me

I can simply write jQuery, find all the input fields and if they're focused then change the background color to pink 

$('input:focus').css('background-color', 'pink');

Save it, refresh the screen and nothing will happen, because the above function only works when the DOM loads and since we don't have anything focused in the form field, the above code is not going to work. Don't worry, in the future lesson, we will dive in to those aspects as well.

But for the demonstration I'm going to put the force focus on the input type like such 

$('input[type="text"]').focus();

Save it, refresh the screen and you see when the page loaded, it immediately changed the color to pink

12- :button

I'm going to write jQuery, select all elements which are the type of button and change their color to red 

$(':button').css('color', 'red')

Save it, refresh the screen 

The button filter applies to two kinds of buttons as shown below

 

13- :Selected

$(':selected').css('color', 'green')

The above code only works for the element of options, the form type options. I'm going some options as shown below

If I refresh the screen and nothing will happen because you can't really style the option of a select form type which is controlled by the browser. But we can use the text function like such 

$(':selected').text(' am selected')

Save it, refresh the screen and you see  such 

I hope you enjoyed this lesson, if you have any question please leave your comments below, I'll talk to you in the next lesson. Goodbye :)