Web Development Articles - Page 571 of 1049

The after() method in jQuery is used to insert specified content after the selected elements.ExampleLet us now see an example to implement the jQuery after() method −    $(document).ready(function(){       $("#btndemo").click(function(){          $("img").after("Text inserted after!");       });    }); Insert specified content OutputThis will produce the following output −Click on the above button to display the text −

To add elements in jQuery, let us see two methods: jQuery after() methodThe after() method in jQuery is used to insert specified content after the selected elements.ExampleLet us now see an example to implement the jQuery after() method −    $(document).ready(function(){       $("#btndemo").click(function(){          $("img").after("Text inserted after!");       });    }); Insert specified content OutputThis will produce the following output −Click on the above button to display the text −jQuery before() methodThe before() method in jQuery is used to insert specified content before the ... Read More

The #id selector in jQuery is used to select the element with the particular id.SyntaxThe syntax is as follows −$("#id")ExampleLet us now see an example to implement the jQuery #id selector −    .one {       color: white;       background-color: blue;    }    $(document).ready(function(){       $("#demo").addClass("one");    }); Car Details Car: Chevrolet Equinox 4-link rear suspension Automatic Emergency Braking Fuel Tank Capacity: Approx 14.9 gal OutputThis will produce the following output −

The [attribute!=value] selector in jQuery is used to select each element that isn’t having the specified attribute and value.SyntaxThe syntax is as follows −$("[attribute!='value']")ExampleLet us now see an example to implement the jQuery [attribute!=value] selector −    .one {       color: white;       background-color: orange;       font-size: 16px;       border: 2px blue dashed;    }    $(document).ready(function(){       $("p[class!='demo']").addClass("one");    }); Car Details Car is XUV500 2179 cc Independent Suspension Fuel Tank Capacity: 70 litres OutputThis will produce the following output −

The .class selector in jQuery is used to select all elements with the specific class.SyntaxThe syntax is as follows −$(".class")Above, the parameter class specify the class of the elements.ExampleLet us now see an example to implement the jQuery .class selector −    .one {       background-color: blue;       color: white;       font-size: 18px;       border: 2px blue dashed;    }    $(document).ready(function(){       $(".demo").addClass("one");    }); Heading One Heading Two Demo text 1... Demo text 2... Demo text 3... Demo text 4... OutputThis will produce the following output −

The :visible selector in jQuery is used to select elements that are currently visible.SyntaxThe syntax is as follows −$(":visible")ExampleLet us now see an example to implement the jQuery :visible selector −    $(document).ready(function(){       $("p:visible").css("color", "red");    }); Heading One Heading Two Demo text 1... Demo text 2... Demo text 3... Demo text 4... OutputThis will produce the following output −

The :text selector in jQuery is used to select input elements with type text.SyntaxThe syntax is as follows −$(":text")ExampleLet us now see an example to implement the jQuery :text selector −    .one {       background-color: green;       color: white;       font-size: 15px;       border: 2px blue dashed;    }    $(document).ready(function(){       $(":text").addClass("one");    }); Fill the Form Username: Set Password: Reserved: Unreserved Products: Accessories Clothing Footwear Electronics Books Submit OutputThis will produce the following output −

The :submit selector in jQuery is used to select button and input elements with type submit.SyntaxThe syntax is as follows −$(":submit")ExampleLet us now see an example to implement the jQuery :submit selector −    .one {       background-color: green;       color: white;       font-size: 18px;       border: 2px blue dashed;    }    $(document).ready(function(){       $(":submit").addClass("one");    }); Fill the Form Username: Set Password: Reserved: Unreserved Products: Accessories Clothing Footwear Electronics Books Submit OutputThis will produce the following output −

The :selected selector in jQuery is used to selects option elements that are pre-selected.SyntaxThe syntax is as follows −$(":selected")ExampleLet us now see an example to implement the jQuery :selected selector −    .one {       background-color: green;       color: white;       font-size: 18px;       border: 2px blue dashed;    }    $(document).ready(function(){       $(":selected").addClass("one");    }); Fill the Form Username: Set Password: Reserved: Unreserved Products: Accessories Clothing Footwear Electronics Books Submit OutputThis will produce the following output −

The :root selector in jQuery is used to select the document's root element.SyntaxThe syntax is as follows −$(":root")ExampleLet us now see an example to implement the jQuery :root selector −    $(document).ready(function(){       $(":root").css("color", "red");    }); Heading One Heading Two Demo text... OutputThis will produce the following output −