50 Most Useful Jquery Snippets latest trending

1. Check if Element Exists

if ($('#myElement').length) {
  console.log('Element exists!');
}

2. Iterate Over Each Element

$('.items').each(function(index, element) {
  console.log(index, $(element).text());
});

3. Toggle Class

$('#btn').click(function() {
  $('#box').toggleClass('active');
});

4. Smooth Scroll to Element

$('html, body').animate({
  scrollTop: $('#target').offset().top
}, 500);

5. Click Outside to Close

$(document).mouseup(function(e) {
  if (!$('#popup').is(e.target) && $('#popup').has(e.target).length === 0) {
    $('#popup').hide();
  }
});

6. Get Data Attribute

const value = $('#item').data('value');

7. Trigger Function on Enter Key

$('#input').keypress(function(e) {
  if (e.which === 13) {
    alert('Enter pressed!');
  }
});

8. Change Element Text

$('#message').text('New message!');

9. Validate Input Not Empty

if ($.trim($('#name').val()) === '') {
  alert('Name is required!');
}

10. Debounce Input Event

let timeout;
$('#search').on('input', function() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    console.log('Search:', this.value);
  }, 300);
});

11. Append Element

$('#list').append('<li>New Item</li>');

12. Empty Element

$('#content').empty();

13. Remove Element

$('.ad-banner').remove();

14. Change CSS Dynamically

$('#box').css({
  backgroundColor: 'blue',
  fontSize: '18px'
});

15. Get Element Height

const height = $('#header').outerHeight();

16. Prevent Default Form Submit

$('form').submit(function(e) {
  e.preventDefault();
  alert('Form prevented!');
});

17. Fade In Element

$('#modal').fadeIn(300);

18. Fade Out Element

$('#overlay').fadeOut(300);

19. Slide Toggle

$('#toggle-btn').click(function() {
  $('#panel').slideToggle();
});

20. Get Selected Option Text

const selected = $('#dropdown option:selected').text();

21. Set Input Value

$('#email').val('[e-mail]');

22. Disable a Button

$('#submitBtn').prop('disabled', true);

23. Enable a Button

$('#submitBtn').prop('disabled', false);

24. Randomize Array Elements

function shuffleArray(arr) {
  return arr.sort(() => 0.5 - Math.random());
}

25. Clone Element

const clone = $('#template').clone().appendTo('#container');

26. Find Child Element

const child = $('#parent').find('.child-class');

27. Delay an Action

$('#box').fadeOut(0).delay(500).fadeIn(300);

28. Loop Through JSON Data

const data = [{ name: 'Alice' }, { name: 'Bob' }];
$.each(data, function(i, item) {
  console.log(item.name);
});

29. Load HTML via AJAX

$('#container').load('/content.html');

30. Send AJAX POST Request

$.post('/submit', { name: 'Parth' }, function(response) {
  console.log('Success:', response);
});

31. Animate Element Width

$('#box').animate({ width: '300px' }, 400);

32. Toggle Attribute

$('#checkbox').attr('checked', !$('#checkbox').attr('checked'));

33. Get Input Value

const value = $('#username').val();

34. Disable Right Click

$(document).on('contextmenu', function() {
  return false;
});

35. Scroll to Top Button

$('#toTop').click(function() {
  $('html, body').animate({ scrollTop: 0 }, 500);
});

36. Detect Window Resize

$(window).resize(function() {
  console.log('Resized:', $(window).width());
});

37. Swap Image Src

$('#image').attr('src', 'new-image.jpg');

38. Hide Element on Scroll

$(window).scroll(function() {
  if ($(this).scrollTop() > 50) {
    $('#header').fadeOut();
  } else {
    $('#header').fadeIn();
  }
});

39. Check if Checkbox is Checked

if ($('#terms').is(':checked')) {
  console.log('Checked!');
}

40. Set Multiple Attributes

$('#link').attr({
  href: 'https://example.com',
  target: '_blank'
});

41. Hover Effect

$('#btn').hover(
  function() { $(this).css('background', 'yellow'); },
  function() { $(this).css('background', ''); }
);

42. Focus Input

$('#search').focus();

43. Blur Input

$('#search').blur();

44. Count Elements

const count = $('.items').length;

45. Highlight Text

$('#text').css('background-color', 'yellow');

46. Toggle Visibility

$('#box').toggle();

47. Check Screen Width

if ($(window).width() < 768) {
  console.log('Mobile view');
}

48. Submit Form via AJAX

$('#myForm').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: '/submit',
    data: $(this).serialize(),
    success: function(response) {
      console.log('Form submitted!', response);
    }
  });
});

49. Hide After Timeout

setTimeout(function() {
  $('#alert').fadeOut();
}, 3000);

50. Scrollspy Navigation

$(window).on('scroll', function() {
  $('section').each(function() {
    if ($(window).scrollTop() >= $(this).offset().top - 50) {
      const id = $(this).attr('id');
      $('.nav a').removeClass('active');
      $('.nav a[href="#' + id + '"]').addClass('active');
    }
  });
});