jQuery Articles - Page 30 of 73

The :It selector in jQuery is used to select elements with an index number less than a specified number.SyntaxThe syntax is as follows −$(":lt(index)")With the index parameter, you can set which element to select.ExampleLet us now see an example to implement the jQuery :It Selector −    .demo {       background-color: blue;       color: white;       font-size: 18px;       border: 2px orange solid;    }    $(document).ready(function(){       $("tr:lt(2)").addClass("demo");    }); Result Rank Points Player 1 100 Virat Kohli 2 80 Steve Smith 3 75 David Warner 4 60 Kane Williamson 5 50 Ben Stokes 6 45 Rohit Sharma OutputThis will produce the following output −

The :last-of-type selector in jQuery is used to select all elements that are the last child of a particular type of their parent.SyntaxThe syntax is as follows −$(":last-of-type")ExampleLet us now see an example to implement the jQuery :last-of-type Selector −    .one {       color: white;       background-color: green;       font-size: 16px;       border: 2px blue solid;    }    $(document).ready(function(){       $("p:last-of-type").addClass("one");    }); Examination Details Date: 25th October 2019 Timings: 10AM TO 1PM All the best for exams! OutputThis will produce the following output −

The :last-child selector in jQuery is used to select all elements that are the last child of their parent.SyntaxThe syntax is as follows −$(":last-child")ExampleLet us now see an example to implement the jQuery :last-child Selector −    .one {       color: white;       background-color: green;       font-size: 16px;       border: 2px blue solid;    }    $(document).ready(function(){       $("p:last-child").addClass("one");    }); Examination Details Date: 25th October 2019 Timings: 10AM TO 1PM All the best for exams! OutputThis will produce the following output −

The :last selector in jQuery is used to select the last element.SyntaxThe syntax is as follows −$(":last")ExampleLet us now see an example to implement the jQuery :last Selector −    .one {       color: black;       background-color: orange;       font-size: 16px;       border: 2px blue solid;    }    $(document).ready(function(){       $("p:last").addClass("one");    }); Examination Details Date: 25th October 2019 Timings: 10AM TO 1PM All the best for exams! OutputThis will produce the following output −

The :lang() selector in jQuery is used to select all elements with the specific language set as the parameter.SyntaxThe syntax is as follows −$(":lang(language)")Here, the parameter language can be en, en-us, en-uk, etc. These are language codes.ExampleLet us now see an example to implement the :lang() selector −    .demo {       background-color: blue;       color: white;       border: 2px yellow dashed;    }    $(document).ready(function(){       $("p:lang(fr)").addClass("demo");    }); Language We are learning French Nous apprenons le français OutputThis will produce the following output −

The :input selector in jQuery is used to select all input elements.SyntaxThe syntax is as follows −$(":input")ExampleLet us now see an example to implement the :input selector −    .demo {       background-color: blue;       color: white;       border: 2px yellow dashed;    }    $(document).ready(function(){       $(":input").addClass("demo");    }); Login Student Name: Student ID: OutputThis will produce the following output −

The :image selector in jQuery is used to select all input elements with type=”image”.SyntaxThe syntax is as follows −$(":image")ExampleLet us now see an example to implement the :image() selector −    .demo {       background-color: gray;       border: 2px yellow dashed;    }    $(document).ready(function(){       $(":image").addClass("demo");    }); Login Student Name: Student ID: Learn MySQL: OutputThis will produce the following output −

The :hidden selector in jQuery is used to select all hidden elements.SyntaxThe syntax is as follows −$(":hidden")ExampleLet us now see an example to implement the :hidden() selector −    $(document).ready(function(){       $("h2:hidden").show();    }); Fill the form ID: Rank: Fav. Subjects: Maths: English OutputThis will produce the following output. Here, we are displaying the hidden element −

The :header selector in jQuery is used to select all header elements to .SyntaxThe syntax is as follows −$(":header")ExampleLet us now see an example to implement the :header() selector −    .demo {       background-color: blue;       color: white;       font-size: 18px;       border: 2px orange solid;    }    $(document).ready(function(){       $(":header").addClass("demo");    }); Cricket Rankings ODI Rank Points Player 1 100 Virat Kohli 2 80 Steve Smith 3 75 David Warner 4 60 Kane Williamson 5 50 Ben Stokes 6 45 Rohit Sharma OutputThis will produce the following output −

The :has() selector in jQuery is used to select elements that contain at least one element matching the specified selector.SyntaxThe syntax is as follows −$(":has(selector)")Here, the parameter selector specifies the element to select.ExampleLet us now see an example to implement the :has() selector −    .demo {       background-color: blue;       color: white;       font-size: 18px;       border: 2px orange solid;    }    $(document).ready(function(){       $("tr:has(th)").addClass("demo");    }); Result Rank Points Player 1 100 Virat Kohli 2 80 Steve Smith 3 75 David Warner 4 60 Kane Williamson 5 50 Ben Stokes 6 45 Rohit Sharma OutputThis will produce the following output −