The data() method in jQuery is used to attach data to or gets data from selected elements.SyntaxThe syntax is as follows −$(selector).data(name) $(selector).data(name, value)Above, the name is the name of data to retrieve for the 1st syntax.For the 2nd syntax, the name is the name of data to set, whereas value is the value of data to set.ExampleLet us now see an example to implement the jQuery data() method − Live Demo    $(document).ready(function(){       $(".button1").click(function(){          $("div").data("student", "Jack Sparrow");          alert("Student Name = " +$("div").data("student"));       }); ... Read More

The index() method in jQuery is used to return the index position of specified elements relative to other specified elements.SyntaxThe syntax is as follows −$(selector).index()ExampleLet us now see an example to implement the jQuery index() method − Live Demo    $(document).ready(function(){       $("li").click(function(){          document.getElementById("demo").innerHTML = $(this).index();       });    }); Devices TV Laptop Headphone Earphone SSD Index = OutputThis will produce the following output −Now, to get the index of any of the list items, just click on it as shown below. We clicked “Headphone” here −

The toggleClass() method in jQuery is used to toggle between adding or removing one or more classes from selected elements.SyntaxThe syntax is as follows −$(selector).toggleClass(classname, func(index, currentclass), switch)Above, class name specifies one or more class names to add or remove, whereas func is a function that returns one or more class names to add or remove.ExampleLet us now see an example to implement the jQuery toggleClass() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("p").toggleClass("demo");       });    }); .demo {    background-color: orange;    color: white;   ... Read More

The removeData() method in jQuery is used to remove the data set with the data() method.SyntaxThe syntax is as follows −$(selector).removeData(name)Above, the name parameter is used to specify the name of the data to remove.ExampleLet us now see an example to implement the jQuery removeData() method − Live Demo    $(document).ready(function(){       $(".button1").click(function(){          $("div").data("student", "Jack Sparrow");          alert("Student Name = " +$("div").data("student"));       });       $(".button2").click(function(){          $("div").removeData("student");          alert("Student Name = " +$("div").data("Jack Sparrow"));       }); ... Read More

The replaceAll() method in jQuery is used to replace selected elements with new HTML elements.SyntaxThe syntax is as follows −$(content).replaceAll(selector)Above, the content parameter is the content to insert, whereas the selector specifies which elements to be replaced.ExampleLet us now see an example to implement the jQuery replaceAll() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("New Heading").replaceAll("h2");       });    }); div {    margin: 10px;    width: 60%;    border: 2px dashed orange;    padding: 5px;    text-align:justify; } Demo Heading 1 Demo ... Read More

The show() method in jQuery is used to display the hidden element.SyntaxThe syntax is as follows −$(selector).show(speed, easing, callback)Above, the parameter speed is the speed of the show effect, whereas easing is the speed of the element in different points of the animation. The callback function is a function that executes after the show() method completes.Let us now see an example to implement the jQuery show() method −Example Live Demo    $(document).ready(function(){       $(".btnhide").click(function(){          $("p").hide();       });       $(".btnshow").click(function(){          $("p").show();       }); ... Read More

The element ~ siblings selector in jQuery is used to select all elements that are siblings of the specified "element".SyntaxThe syntax is as follows −("ele ~ siblings")Above, the parameter ele is any valid selector, whereas siblings are the siblings of the ele parameter.ExampleLet us now see an example to implement the jQuery element ~ siblings selector − Live Demo    $(document).ready(function(){       $("div ~ p").css("color", "orange");    }); div {    border:1px solid black;    padding:10px; } Demo Heading This is demo text. span outside p element This is demo text. ... Read More

The not() method in jQuery is used to return elements that do not match specific criteria.SyntaxThe syntax is as follows −$(selector).not(criteria, func(index))Above, criteria are a selector expression, whereas func is the function to run for each element in the group.ExampleLet us now see an example to implement the jQuery not() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("h2").not(".demo").css("color", "orange");       });    }); h2 {    color: blue; } Student Info This is a demo text. Exam Info This is a demo text. Teacher's ... Read More

The parentsUntil() method in jQuery is used to return all ancestor elements between the selector and stop parameter value.SyntaxThe syntax is as follows −$(selector).parentsUntil(stop, filter)Above, the stop parameter is a selector expression, element or jQuery object. The filter parameter is a selector expression that narrows down the search for ancestors between the selector and the stops parameter.ExampleLet us now see an example to implement the jQuery parentsUntil() method − Live Demo div {    width:600px; } .demo * {    display: block;    border: 2px solid yellow;    color: blue;    padding: 10px;    margin: 10px; } ... Read More

The prop() method in jQuery is used to set or return the properties and values of the selected elements.SyntaxThe syntax is as follows −$(selector).prop(property)ExampleLet us now see an example to implement the jQuery prop() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          var $val = $("div");          $val.prop("font-size", "1.6em");          $val.append("Property value = " + $val.prop("font-size"));       });    }); Adding Property Property OutputThis will produce the following output −Click the button to add a property −