50 Most Useful Jquery Snippets latest trending

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$('#email').val('user@example.com');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$(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');
    }
  });
});