jQuery Interactive Exercises: Enhance Web Interactivity

Posted on Jan 5, 2025 in Computers

Exercise 1

Listing

Count
  • Record 1 Up Down Duplicate Delete
  • Record 2 Up Down Duplicate Delete
  • Record 3 Up Down Duplicate Delete

Plugin Code

    
(function($) {
  $.fn.up = function() {
    this.on("click", function() {
      $(".up").parent().insertBefore($(this).parent().prev());
    })
  }
  $.fn.down = function() {
    this.on("click", function() {
      $(this).parent().insertAfter($(this).parent().next());
    })
  }
  $.fn.duplicate = function() {
    this.on("click", function() {
      $(this).parent().clone(true).insertAfter($(this).parent());
    })
  }
  $.fn.delete = function() {
    this.on("click", function() {
      $(this).parent().remove();
    })
  }
  $.fn.count = function() {
    return $(this).find("li").length;
  }
})(jQuery);

Exercise 2

Exercise 2

0
0
0

Exercise 3

Exercise 3 Hello Effect: Fade Slide
Time:

Lorem ipsum dolor sit amet,