Porównanie kodu jQuery i JavaScript — Kurs jQuery

Selekcja elementów - jQuery

										
// selekcja elementu o id 'block' i zmiana tekstu
$('#myElement').text('Nowy tekst');


// selekcja elementów z klasą 'myClass' ukrycie ich
$('.myClass').hide();

Selekcja elementów - JavaScript

										
// selekcja elementu o id 'myElement' i zmiana jego tekstu
let element = document.getElementById('myElement');
element.textContent = 'Nowy tekst';

// selekcja elementów z klasą 'myClass' i ukrycie ich
let elements = document.querySelectorAll('.myClass');
elements.forEach(function(element) {
    element.style.display = 'none';
});

Obsługa zdarzeń - jQuery

										
// obsługa kliknięcia na element o id 'myButton'
$('#myButton').on('click', function() {
    alert('Kliknięto przycisk!');
});

Obsługa zdarzeń - JavaScript

										
// obsługa kliknięcia na element o id 'myButton'
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Kliknięto przycisk!');
});

Animacja elementów jQuery

										
// animacja ukrywania i pokazywania
// elementu o id 'myElement'

$('#myElement').toggle('slow');

// animacja zmiany koloru tła
// elementu o id 'myElement'

$('#myElement').animate({backgroundColor:

'#000000'}, 'slow');

Animacja elementów JavaScript

										
// animacja ukrywania i pokazywania elementu o id 'myElement'
let element = document.getElementById('myElement');

if (element.style.display === 'none') {
    element.style.display = 'block';
}

else {
    element.style.display = 'none';
}

// animacja zmiany koloru tła elementu o id 'myElement'
let element = document.getElementById('myElement');
element.style.transition = 'background-color 0.5s ease-in-out';
element.style.backgroundColor = '#000000';