Front End Technology Articles - Page 482 of 860

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 −

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 −

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 −

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 −

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 −

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 −

The :contain() selector in jQuery is used to select elements containing the specified text.SyntaxThe syntax is as follows −$(":contains(text)")Here, the parameter text is the text to find. The same elements are selected with the specified text.ExampleLet us now see an example to implement the :contains() selector −    .one {       color: brown;       background-color: orange;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("p:contains(the)").addClass("one");    }); Examination Timings: 10AM - 1PM The examination hall details would be emailed to the students. OutputThis will produce the following output −

The :checked selector in jQuery is used to look for all the checked radio button or checkboxes and selects them.SyntaxThe syntax is as follows −$(":checked")ExampleLet us now implement the :checked selector in jQuery − Favourite Subject Maths: English    $( "input" ).on( "click", function() {       $( "#content" ).html( $( "input:checked" ).val() + " is the favourite subject" );    }); OutputThis will produce the following output −Select “Maths” radio button above −Now, select “English” radio button −

The jQuery :checkbox selector is used to select input elements with type checkbox.SyntaxThe syntax is as follows −$(":checkbox")ExampleLet us see an example to implement the :checkbox selector in jQuery −    $(document).ready(function(){       $(":checkbox").wrap("");    }); Fill the form ID: Rank: Fav. Subjects: Maths: English OutputThis will produce the following output −ExampleLet us see another example −    $(document).ready(function(){       $(":checkbox").wrap("");    }); Hobbies Player Name: Fav Sports Football: Cricket OutputThis will produce the following output −

The jQuery :button selector is used to select button and input elements with type button.ExampleLet us now see an example to implement the :button selector −    $(document).ready(function(){       $(":button").css("border-width", "5px");    }); Username: Password: Demo Button OutputThis will produce the following output. The border of the “Demo Button” is changed using the :button selector −ExampleLet us now see another example −    .one {       color: white;       background-color: gray;       font-size: 16px;       border: 2px yellow dashed;    }    $(document).ready(function(){       $(":button").addClass( "one" );    }); ID: Rank: Demo Button OutputThis will produce the following output −