📘 30 Most Useful jQuery Snippets

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('[email protected]');

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