Found 730 Articles for JQuery

jQuery :parent Selector

AmitDiwan
Updated on 05-Nov-2019 12:23:54

179 Views

The :parent selector in jQuery is used to select all elements that are the parent of another element.SyntaxThe syntax is as follows −$(":parent")ExampleLet us now see an example to implement the jQuery :parent selector −    .one {       background-color: blue;       color: white;       font-size: 18px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("th:parent").addClass("one");    }); Result Rank 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 :only-of-type Selector

AmitDiwan
Updated on 05-Nov-2019 12:21:54

130 Views

The :only-of-type selector in jQuery is used to select elements which are the only child of its type of its parent.SyntaxThe syntax is as follows −$(":only-of-type")ExampleLet us now see an example to implement the jQuery :only-of-type selector −    .one {       color: white;       background-color: orange;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("p:only-of-type").addClass("one");    }); Match Details One Two Date: 29th October 2019 Timings: 3PM TO 8PM Ground: DY Patil Match Cancelled Ground: Indore Stadium Date: 29th October 2019 Timings: 8PM TO 11PM Ground: Eden Gardens Date: 30th October 2019 Three OutputThis will produce the following output −

jQuery :only-child Selector

AmitDiwan
Updated on 05-Nov-2019 12:19:47

280 Views

The :only-child() selector in jQuery is used to select elements that is the only child of its parent.SyntaxThe syntax is as follows −$(":only-child")ExampleLet us now see an example to implement the jQuery :only-child() selector −    .one {       color: white;       background-color: orange;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("p:only-child").addClass("one");    }); Match Details One Two Date: 29th October 2019 Timings: 3PM TO 8PM Ground: DY Patil Entry begins 2PM Date: 29th October 2019 Timings: 8PM TO 11PM Ground: Eden Gardens Country: India Date: 30th October 2019 Three OutputThis will produce the following output −

jQuery :odd Selector

AmitDiwan
Updated on 05-Nov-2019 12:17:55

103 Views

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

AmitDiwan
Updated on 05-Nov-2019 12:15:24

253 Views

The :nth-of-type() selector in jQuery is used to select all elements that are the nth child of a particular type of their parent.SyntaxThe syntax is as follows −:nth-of-type(n|even|odd|formula)Above, the n parameter is the index of each child to match. The even parameter selects even child element, whereas odd selects odd child element.ExampleLet us now see an example to implement the jQuery :nth-of-type() selector −    .one {       color: white;       background-color: orange;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){   ... Read More

jQuery :nth-last-of-type() Selector

AmitDiwan
Updated on 05-Nov-2019 12:12:41

134 Views

The :nth-last-of-type() selector in jQuery is used to select all elements that are the nth child, counting from the last child.SyntaxThe syntax is as follows −:nth-last-of-type(n|even|odd|formula)Above, the n parameter is the index of each child to match. The even parameter selects even child element, whereas odd selects odd child element.ExampleLet us now see an example to implement the jQuery :nth-last-of-type() selector −    .one {       color: white;       background-color: orange;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("p:nth-last-of-type(2)").addClass("one"); ... Read More

jQuery :nth-last-child() Selector

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

291 Views

The :nth-last-child() selector in jQuery is used to select all elements that are the nth child, counting from the last child.SyntaxThe syntax is as follows −:nth-last-child(n|even|odd|formula)Above, the n parameter is the index of each child to match. The even parameter selects even child element, whereas odd selects odd child element.ExampleLet us now see an example to implement the jQuery :nth-last-child() selector −    .one {       color: white;       background-color: green;       font-size: 16px;       border: 2px blue solid;    }    $(document).ready(function(){       ... Read More

jQuery :nth-child() Selector

AmitDiwan
Updated on 05-Nov-2019 12:08:00

577 Views

The :nth-child() selector in jQuery is used to select all elements that are the nth child, regardless of type, of their parent.SyntaxThe syntax is as follows −:nth-child(n|even|odd|formula)Above, the n parameter is the index of each child to match. The even parameter selects even child element, whereas odd selects odd child element.ExampleLet us now see an example to implement the jQuery :nth-child() selector −    .one {       color: white;       background-color: green;       font-size: 16px;       border: 2px blue solid;    }    $(document).ready(function(){     ... Read More

jQuery nextUntil() with Example

AmitDiwan
Updated on 05-Nov-2019 12:05:08

220 Views

The nextUntil() method in jQuery is used to return all next sibling elements between the selector and stop.SyntaxThe syntax is as follows −$(selector).nextUntil(stop, filter)Above, the stop parameter is to mention the expression to stop the search for next matching sibling elements and the filter parameter is a selector expression to narrow down the searchLet us now see an example to implement the jQuery nextUntil() method −    .one {       color: white;       background-color: green;       font-size: 16px;       border: 2px blue solid;    }   ... Read More

jQuery :not() Selector

AmitDiwan
Updated on 05-Nov-2019 11:13:59

123 Views

The :not selector in jQuery is used to select all elements except the specified element.SyntaxThe syntax is as follows −$(":not(selector)")Above, set the element which is to be ignored (not selected).ExampleLet us now see an example to implement the jQuery :not Selector −    .one {       color: white;       background-color: green;       font-size: 16px;       border: 2px blue solid;    }    $(document).ready(function(){       $("p:not(.demo)").addClass("one");    }); Match Details Date: 29th October 2019 Timings: 3PM TO 8PM Ground: Lords OutputThis will produce the following output −

Advertisements