To call a jQuery function after a certain delay, use the siteTimeout() method. Here, jQuery fadeOut() function is called after some seconds.You can try to run the following code to learn how to work with setTimeout() method in jQuery to call a jQuery function after a delay −ExampleLive Demo         $(document).ready(function(){     $("#button1").bind("click",function() {       setTimeout(function() {         $('#list').fadeOut();}, 2000);     });   });                    Voice        Speak      Write         The above content will fade out after 2 seconds

To make a jQuery function call after “X” seconds, use the siteTimeout() method.On button click, set the following and fade out the element. Here, we have also set the milliseconds. This is the delay that would occur before fading an element:$("#button1").bind("click",function() {    setTimeout(function() {       $('#list').fadeOut();}, 4000); });You can try to run the following code to learn how to work with setTimeout() method in jQuery:Example Live Demo               $(document).ready(function(){          $("#button1").bind("click",function() {             setTimeout(function() {                $('#list').fadeOut();}, 4000);             });          });               India       US       UK     The above data will fade out after 4 seconds

Use event delegation to include buttons for both add a new and delete a table row on a web page using jQuery.Firstly, set the delete button:XTo fire event on click of a button, use jQuery on() method:$(document).on('click', 'button.deletebtn', function () {    $(this).closest('tr').remove();    return false; });The following is the complete code delete a row from a table using jQuery:Example Live Demo            $(document).ready(function(){       var x = 1;       $("#newbtn").click(function () {          $("table tr:first").clone().find("input").each(function () {             $(this).val('').attr({       ... Read More

To add a new list element under a ul element, use the jQuery append() methodSet input type text initiallyValue: Now on the click of a button, add a new list element using the val() and append() methods in jQuery:$('button').click(function() {    var mylist = $('#input').val();    $('#list').append(''+mylist+'');    return false; });You can try to run the following code to learn how to add a new list element using jQuery:Example Live Demo               $(document).ready(function(){          $('button').click(function() {             var mylist = $('#input').val();         ... Read More

Use event delegations to include both add a new and delete a table row on a web page using jQuery.Firstly, set a button in HTML to add new row    Add new Row Now under the button click event, set the code:$("#newbtn").click(function () { }Example Live Demo    $(document).ready(function(){       var x = 1;       $("#newbtn").click(function () {          $("table tr:first").clone().find("input").each(function () {             $(this).val('').attr({                'id': function (_, id) {                 ... Read More

The jQuery :contains() Selector is used to check whether a string contains a substring in jQuery.Set the substring you are searching for in the contains() method as shown below:$(document).ready(function(){    $("p:contains(Video)").css("background-color", "blue"); });Now, let us see the complete code to check whether a string contains a substring or not:Example Live Demo               $(document).ready(function(){          $("p:contains(Video)").css("background-color", "blue");       });     Tutorialspoint This is demo text. Free Tutorials Free Video Tutorials

To make a textarea and input type read only, use the attr() method .For readonly, set the input type text and textarea as read only as shown below:$('input[type="text"], textarea').each(function(){    $(this).attr('readonly','readonly'); });The following is the code to set readonly to textarea and input type:Example Live Demo jQuery Example               $(document).ready(function() {          $('input[type="text"], textarea').each(function(){             $(this).attr('readonly','readonly');          });       });     readonly textarea

fTo disable and enable checkbox, use the attr() method.Initially set the input type checkbox and disable it −MaleNow on the click of a button, toggle between disabled and enabled checkbox −$("#button1").click(function() {    $("#sName").attr('disabled', !$("#sName").attr('disabled')); });Example Live Demo jQuery Example               $(document).ready(function() {          $("#button1").click(function() {             $("#sName").attr('disabled', !$("#sName").attr('disabled'));          });       });     Male

We can easily disable input box(textbox,textarea) using disable attribute to “disabled”.$(‘elementname’).attr(‘disabled’,’disabled’);To enable disabled element we need to remove “disabled” attribute from this element.$(‘elementname’).removeAttr(‘disabled’);Example    ed                      $(document).ready(function () {             $('#btn1').click(function () {                $('input').attr('disabled', 'disabled');             });             $('#btn2').click(function () {                $('input').removeAttr('disabled');             });          });              Disable    Enable

To globally disable an animation using jQuery, use the jQuery.fx.off() method.To enable animation:$("#enable").click(function(){    jQuery.fx.off = false; });To disable animation, set jQuery.fx.off() as true:$("#disable").click(function(){    jQuery.fx.off = true; });You can try to run the following code to globally disable an animation using jQuery:Example Live Demo The jQuery Example               $(document).ready(function() {          $("#enable").click(function(){             jQuery.fx.off = false;          });          $("#disable").click(function(){             jQuery.fx.off = true;          });   ... Read More