Found 766 Articles for JQuery

jQuery :header Selector

AmitDiwan
Updated on 05-Nov-2019 10:22:39

158 Views

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 −

jQuery :has() Selector with example

AmitDiwan
Updated on 05-Nov-2019 10:19:03

117 Views

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 −

jQuery :gt() Selector

AmitDiwan
Updated on 05-Nov-2019 10:16:43

168 Views

The :gt() selector in jQuery is used to select elements with an index greater than mentioned in the index parameter.SyntaxThe syntax is as follows −$(":gt(index)")Here,The parameter index is the specified index. The elements above this index is selected.ExampleLet us now see an example to implement the :gt() selector −    .demo {       background-color: blue;       color: white;       font-size: 18px;       border: 2px orange solid;    }    $(document).ready(function(){       $("tr:gt(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 −

jQuery :focus Selector

AmitDiwan
Updated on 05-Nov-2019 10:12:27

410 Views

The :focus selector in jQuery is used to select the element which currently has focus.SyntaxThe syntax is as follows −$(":focus")ExampleLet us now see an example to implement the :focus() selector −    .one {       color: brown;       background-color: orange;       font-size: 16px;       border: 2px blue solid;    }    $(document).ready(function(){       $("input").focus();       $(":focus").addClass("one");    }); Fill the form ID: Rank: Fav. Subjects: Maths: English OutputThis will produce the following output −

jQuery :first-of-type Selector

AmitDiwan
Updated on 05-Nov-2019 10:10:07

127 Views

The :first-of-type selector in jQuery is used to select elements, which are the first element of their parent.SyntaxThe syntax is as follows −$(":first-of-type")ExampleLet us now see an example to implement the :first-of-type() selector −    .demo {       background-color: red;       color: white;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("p:first-of-type").addClass("demo");    }); This is the first line! This is the second line! This is the third line! One Two Three Four A B This is the last line. OutputThis will produce the following output −

jQuery :first-child Selector

AmitDiwan
Updated on 05-Nov-2019 10:06:38

222 Views

The :first-child selector in jQuery is used to select all elements, which are the first child of their parent.SyntaxThe syntax is as follows −$(":first-child")ExampleLet us now see an example to implement the :first-child() selector −    .demo {       background-color: red;       color: white;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("p:first-child").addClass("demo");    }); This is the first line! This is the second line! This is the third line! One Two Three Four This is the last line. OutputThis will produce the following output −

jQuery :first Selector

AmitDiwan
Updated on 05-Nov-2019 07:37:24

189 Views

The :first selector in jQuery is used to select the first DOM element.SyntaxThe syntax is as follows −$(":first")ExampleLet us now see an example to implement the :first() selector −    .demo {       background-color: red;       color: white;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("input:first").addClass("demo");    }); Job Application Applicant Name: Rank: Resume: OutputThis will produce the following output −

jQuery :file Selector

AmitDiwan
Updated on 05-Nov-2019 07:24:41

418 Views

The :file selector in jQuery is used to select all input elements with type=”file”.SyntaxThe syntax is as follows −$(":file")ExampleLet us now see an example to implement the :file() selector −    .demo {       background-color: blue;       color: white;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $(":file").addClass("demo");    }); Job Application Applicant Name: Rank: Resume: OutputThis will produce the following output −

jQuery :even Selector

AmitDiwan
Updated on 05-Nov-2019 07:21:45

129 Views

The :even selector in jQuery is used to select even elements i.e. with even index number.Note − The :even selector deprecated in jQuery 3.4SyntaxThe syntax is as follows −$(":even")ExampleLet us now see an example to implement the :even() selector −    .one {       background-color: blue;       color: white;       font-size: 18px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("tr:even").addClass("one");    }); 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 −

jQuery :enabled Selector

AmitDiwan
Updated on 05-Nov-2019 07:18:35

148 Views

The :enabled selector in jQuery is used to select all enabled input elements.SyntaxThe syntax is as follows −$(":enabled")ExampleLet us now see an example to implement the :enabled() selector −    .one {       background-color: orange;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $(":enabled").addClass("one");    }); Result Username: Password: OutputThis will produce the following output −

Advertisements