Front End Technology Articles - Page 478 of 860

The add() method in jQuery is used to add elements to an existing group of elements.SyntaxThe syntax is as follows −$(selector).add(ele, context)Above, ele is the selector expression, whereas context specifiesfrom where the selector expression should begin matching.ExampleLet us now see an example to implement the jQuery add() method −    .one {       color: white;       background-color: blue;    }    $(document).ready(function(){       $("h2").add("p").addClass("one");    }); Products Out-of-stock products Let us now see some products. We had Accessories We also had Books, which are now ... Read More

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

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 −