jQuery Selectors Tutorial Part 2 pseudoselectors

Selectors allow users to select elements on a webpage

Selectors are a feature in HTML5 and CSS3 that allow for efficient and flexible dynamic web page creation. They allow users to select elements on a webpage based on their natural language. This makes creating HTML, CSS and JavaScript much easier.

Anyone can easily create websites with Selectors

When creating webpages, designers most commonly use a list of elements or components. These elements include text, images and links to navigate the webpage. However, HTML lacks syntactic tags for these components. So, developers had to come up with their own way of specifying component types. That is where Selectors came in- they revolutionized the way websites were created. Now, anyone can see and easily create websites using natural language instead of code syntax.

Selectors help us navigate through our webpage creation process with natural language. For instance, you can navigate through your webpage using phrases such as 'show all text elements,' 'show all image elements' or 'show all links.' These phrases can be expressed using different natural language elements such as 'the +  element combination,' 'the  element' and 'the  element.' The possibilities are endless when it comes to specifying the elements you want to include on your webpage with Selectors.

Selectors make it easy to create efficient webpages

Since Selectors are used by both developers and non-developers alike, it's great for efficiency as well as flexibility. For developers, Selectors make it easy to create efficient webpages with minimal code. Plus, they're easy to modify and extend thanks to JavaScript which allows for customization via plugins and extensions. This makes creating HTML, CSS and JS much easier and allows for greater creativity by anyone with access to a computer and an internet connection.

Having access to Selectors drastically changed the way we design websites both functionally and aesthetically. They make it much easier for novices to create dynamic webpages using natural language. Furthermore, they're great for efficiency since they allow for easy customization as well as granular targeting capabilities. Therefore, we cannot thank jQuery enough for giving us something so revolutionary!

Important Selectors in jQuery

• :button, :file, :radio, :reset → To select any type of button (or with type='button') or the rest of elements of those types of a form.
• :submit, :text, :checkbok → For the corresponding input types.
• :password, :image → For the corresponding input types.
• :header → To select any type of header tag (h1,h2, h3...).
• :hidden or :visible → To select hidden or visible elements.
• parent → Those elements that have at least one child within the HTML tree.

Using input type password and input type image with selectors jQuery

We have two paragraphs with two types of input, one of type password and another image. We modify the width using css in jquery selecting the password input in position 0 and the image input in position 1.

    <script>
       $(document).ready(function(){
         $(':password').eq(0).css('width', '300px');
         $(':image').eq(1).css('width', '300px');
       });
    </script>

Try it Yourself

Using text and header selectors in jQuery

We have two inputs of type text, and headers of type h1, h2 and h3. With jQuery we select from the input of type text the equivalent to the number 0 and we insert the value 'Your Login'. We also select all the headers and we apply the red color to them.

    <script>
       $(document).ready(function(){
         $(':text').eq(0).val('Your Login');
         $(':header').css('color', 'red');
       });
    </script>

Try it Yourself

Using the parent selector in jQuery

We use parent to select the children of the selected elements.
We have 3 possible cases:

• We select all the children of parent tr and apply red color to the content.
• We select all the children of the id 'mySel' and we apply blue color to the content overwriting the previous case. As id is only valid for the first of the children.
• We select all the children of the class 'setClass' and we apply orange color overwriting the previous cases.

    <script>
       $(document).ready(function(){
         $("tr:parent").css('color', 'red');
         $("#mySel:parent").css('color', 'blue');
         $(".selClass:parent").css('color', 'orange');
       });
    </script>

Try it Yourself

Visible, hidden and eq selectors in jQuery

We will use the visible, hidden and eq selectors in three possible cases in this example:

1. We select all visible images and set them to a width of 200 by expanding their original width of 100.
2. We select all the hidden images and we show them, that is to say, the first and the last image hidden by css.
3. We select all the visible images and filter image 3 starting from zero and hide it.

    <script>
       $(document).ready(function(){
         $('img:visible').css('width', '200px');
         $("img:hidden").show();
         $('img:visible').eq(3).hide();
       });
    </script>

Try it Yourself