Found 730 Articles for JQuery

jQuery :gt() Selector

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

239 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

514 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

214 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

312 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

255 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

593 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

172 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

206 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 −

jQuery :empty Selector

AmitDiwan
Updated on 05-Nov-2019 07:13:15

249 Views

The :empty selector in jQuery is used to select all elements which are empty.SyntaxThe syntax is as follows −$(":empty")ExampleLet us now see an example to implement the :empty() selector −    .demo {       color: brown;       background-color: orange;       font-size: 16px;       border: 2px blue dashed;       width:100px;       height:70px;    }    $(document).ready(function(){       $("p:empty(.one)").addClass("demo");    }); Enter details ID: Rank: Fav. Subjects: Maths: English OutputThis will produce the following output −

jQuery :disabled Selector

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

291 Views

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

Advertisements