jQuery Selectors Tutorial

What are selectors used for in jQuery?

Selectors in jQuery are used to select elements on a web page. They're especially helpful for selecting elements based on data, such as categories or attributes. Selectors are also easy to use when defining CSS styles. jQuery provides several ways to make selectors easier to use.

As the name suggests, a selector is used to find specific elements on a web page. Developers choose which elements they want to highlight and then write code that identifies those elements. Although they can be overused, jQuery's selectors allow developers to quickly identify elements on a page.

Syntax of a selector in jQuery

The syntax of a selector is critical- if the syntax is incorrect, the code will not function as intended. First, a selector must identify the element on which it will perform an action. Next, the selector must identify the action that it will perform on that element.

A complete selector looks like this:

'.navigation > h1 > a + body > p' 

Although this example uses HTML tags, jQuery selectors can be applied to many different kinds of data, which makes it easy to find specific information.

For example, you can use selectors to highlight part of an image or to target YouTube video text while playing back the video.

What is a selector used for in jQuery?

A selector can be used in many ways- from finding specific content to creating dynamic navigation menus and formatting pages based on data.

Unlike regular CSS styles, selectors don't limit you to applying styles to individual elements. Instead, they allow you to apply styles to groups of elements based on data.

For example, you could create a style sheet that formats specific sections of a PDF document based on the contents within those sections. To do this, you would first identify all of the section headers within your document using a selector. Then you would assign those headers that contain relevant content to style classes. After doing so, you could apply formatting to only those sections without affecting other portions of your document.

Selectors are very helpful when writing custom JavaScript code

Selectors are very helpful when writing custom JavaScript code or unit tests for your website's code base.

For example, you could use selectors when writing code that runs periodically and updates website content based on user behavior data. You could also use selectors when testing your website's code with Jest and Chrome's developer tools: these tools let you simulate user actions and verify whether your website responds as expected. In fact, jQuery has an entire library devoted to making these tasks easier: chaining methods in chaining libraries allows developers to write less duplicated test code and extract more complex behaviors from their selectors.

Selectors in jQuery make it easy to find specific elements on a web page or apply dynamic styling based on data. They're especially useful for identifying data relevant to your project- although easy to use, jQuery's selectors are difficult to write and understand if the syntax is incorrect.

Own Selectors in jQuery

Next we show the main exclusive selectors only in jQuery:

• .eq(index) : To select the element that is in the index position among all those selected with the selector of which it is a suffix. It is currently deprecated and the .eq() function is used, which has already been discussed previously.
• .has("...) : For elements that contain at least one element of the selector that I pass as parameter.
• :contains() : All elements containing a specific text.
• :even or :odd : For elements that are in the for or odd position within the parent. They are depreciated selectors but are still widely used.
• :input : For selecting any element of a form, be it an input, textarea, select or button.
• :gt(index) or :lt(index) : To select elements whose position among the selected elements is greater(gt) or less(lt) than the position expressed in index.
• :first or :last : To select the first or the last of the elements selected by the selector suffix. They are also depreciated and the functions .first() or .last() are used instead by chaining.

Using has to find an attribute in an html form

 We identify if an html form has an input of type password, if it has it we change its color of letter to red. Try to write inside the form and indeed the color of the letter will be red.

    <script>
       $(document).ready(function(){
         $("form").has("input[type='password']").css('color', 'red')
       });
    </script>

Try it YourSelf

JQuery find out if it contains a certain text inside an html element

We select a div with a class called 'cont'. If the content contains the text 't1', we change the font color to red.

    <script>
       $(document).ready(function(){
         $(".cont:contains('1')").css('color', 'red');
       });
    </script>

Try it YourSelf

jQuery odd even to change the properties of elements

We have a div with a class cont. Inside this class we have 6 different divs. We will select the odd divs to change their color to red, and the even divs to increase their font size to 18px.

    <script>
       $(document).ready(function(){
         $(".cont div:even").css('color', 'red');
         $(".cont div:odd").css('font-size', '18px');
       });
    </script>

Try it YourSelf

Select all the inputs of a web page

    <script>
       $(document).ready(function(){
         $(":input").css('background-color', 'red');
       });
    </script>

jQuery gt() and lt() selector

We have a table with 9 images. We use the selector gt(4) to choose the images starting from the fourth image starting from zero. We use lt(1) to choose the images that are before image 1 starting from zero.

   <script>
       $(document).ready(function(){
         $("img:gt(4)").hide();
         $("img:lt(1)").css('width', '200px');
       });
    </script>

Try it YourSelf

Using first and last to select html elements in jquery

We have a table in which we choose the first column and the last column to insert text.

    <script>
       $(document).ready(function(){
         $("table td").first().html('Hello');
         $("table td").last().html('bye');
       });
    </script>

Try it YourSelf

Using nth-child and contains selectors in jquery

We select with nth-child the second child of td, that is to say, the second column of a table, and of this column we select the one that contains the text 5 and we insert an html code with a link. Then we select the second column, the one that contains the text 'part 2' and replace it with the text 'Column2 >>'

    <script>
       $(document).ready(function(){
         $("td:nth-child(2):contains('5')").html('<a href="#">Column 5 Click</a>');
         $("td:nth-child(2):contains('part 2')").text('Column 2 >>');
       });
    </script>

Try it YourSelf

Using eq, gt and lt selectors to choose elements in jQuery

From a table, in the first part of the script we select the columns starting from 1, and the columns smaller than 3 starting from 0. In the second part of the script we select the column between td 3 and td 5. Note that the second part of the script overwrites the first part.

    <script>
       $(document).ready(function(){
         $("td:gt(1):lt(3)").html('<a href="#">Column Click</a>');
         $("td:eq(3),img:eq(5)").text('Column selected');
       });
    </script>

Try it YourSelf