$('#button').on('click', () => alert('Click!'));

$('#button').off('click', callback);

$('.box').addClass('highlight');

$('.box').removeClass('highlight');

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

$('.box').hasClass('highlight');

$('#title').text('New text');

$('#content').html('Hello');

$('#name').val('Anna');

$('img').attr('alt', 'Image description');

$('img').removeAttr('alt');

$('#check').prop('checked', true);

$('.element').data('type', 'info');

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

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

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

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

$('#menu').slideToggle(300);

$('#list').append('
Item
');

$('#list').prepend('
First
');

$('.remove').remove();

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

let element = $('#box').detach();

let new = $('#button').clone();

$('#element').siblings();

$('#element').parents();

$('#element').next();

$('#element').prev();

$('.element').first();

$('.element').last();

$('li').filter((el, i) => i % 2 === 0);

$('div').not('.active');

$('li').eq(2);

$('#nav').find('a');

$('input').closest('form');

$('p').each((el, i) => console.log(el));

$('#check').is(':checked');

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

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

$(window).scrollTop(100);

$(window).scrollLeft(50);

$('#box').height(200);

$('#box').width(300);

let data = $('form').serialize();

$('.box').wrap(elementent);

$('.box').unwrap();

$('.box').toggleClass('active');

        $('.box').css({
            color: 'white',
            backgroundColor: 'black',
            padding: '10px'
          });
            const color = $('.box').css('color');
            console.log('Text color:', color);
            

                Querying a single variable:
        
                const color = $(':root').cssVar('--main-color');
        
                Setting a single variable:
        
                $('body').cssVar('--main-color', '#00f');
        
                To set multiple variables at once:
        
                $('body').cssVar({
                    '--main-color': '#0f0',
                    '--font-size': '18px'
                  });
        
            

                The width of the .box increases to 300px and its transparency decreases to 0.5 in 400 ms:
        
                $('.box').animate({
                width: '300px',
                opacity: 0.5
              }, 400);
            

                const data = $('form').serializeArray();

                console.log(data);
        
                // [
                //   { name: 'name', value: 'John' },
                //   { name: 'email', value: 'joe@example.com' },
                //   ...
                // ]
            

                const data = $('form').serializeObject();

                console.log(data);
        
                // {
                //   name: "John",
                //   email: "joe@example.com",
                //   tags: ["html", "css"]
                // }
        
                can be used:
                JSON.stringify($('form').serializeObject())
            

                Changes the backgroundColor to the given color in 600ms:
        
                $('.box').colorAnimate('backgroundColor', '#00ffcc', 600);
        
                Supported formats:
                    #hex, #rrggbb
                    rgb(r,g,b)
                   CSS colors (e.g. "red", "orange") also work because the RGB will be extracted from the canvas
            

                If the button is disabled, it removes it — if not, it adds it:
        
                $('#myButton').toggleAttr('disabled');
            

                 if ($('#myButton').hasAttr('disabled')) {
                    console.log('The button is disabled.');
                  }
            

                This scrolls to the #article element in 700ms:
        
                 $('#article').scrollTo(700);
        
                 They also work together:
        
                 $('#article')
                    .toggleAttr('aria-expanded')
                    .scrollTo(500);
            

$.ajax({
  url: '/api',
  method: 'POST',
  data: { name: 'Bob' }
});

$.get('/data', { id: 1 });

    $.post('url', {
                key1: 'value1',
                key2: 'value2'
            })
            .then(data => {
                console.log('Server response:', data);
            })
            .catch(error => {
                console.error('AJAX error:', error);
            });

$.ready(() => console.log('Ready!'));

$.reload();

$.redirect('/login');