JQuery few examples

Example of handling a button click event and changing the text of an element:

$(document).ready(function() {
  $('#myButton').click(function() {
    $('#myElement').text('Button Clicked!');
  });
});

In this example, when the button with the ID "myButton" is clicked, the text of the element with the ID "myElement" will be changed to "Button Clicked!".

Example of fading in and fading out an element:

$(document).ready(function() {
  $('#fadeInButton').click(function() {
    $('#myElement').fadeIn();
  });
  
  $('#fadeOutButton').click(function() {
    $('#myElement').fadeOut();
  });
});

In this example, clicking the "fadeInButton" will fade in the element with the ID "myElement", and clicking the "fadeOutButton" will fade out the element.

Example of making an AJAX request and updating the content of an element:
$(document).ready(function() {
  $('#loadButton').click(function() {
    $.ajax({
      url: 'data.json',
      type: 'GET',
      dataType: 'json',
      success: function(response) {
        $('#dataContainer').text(response.message);
      }
    });
  });
});

Leave a Reply

Your email address will not be published. Required fields are marked *