jQuery – czytanie i porównanie z czystym JS

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<ul id="oceny">
  <li>Matematyka: 4</li>
  <li>Informatyka: 6</li>
  <li>Polski: 3</li>
</ul>
<p id="info"></p>

// jQuery: jeden łańcuch działa na wszystkich li
$('#oceny li').css('color', '#555').first().css('font-weight', 'bold');
$('#info').text('Pozycji: ' + $('#oceny li').length);

// to samo w czystym JS
const pozycje = document.querySelectorAll('#oceny li');
pozycje.forEach((li) => (li.style.color = '#555'));
pozycje[0].style.fontWeight = 'bold';
document.getElementById('info').textContent += ' | vanilla: ' + pozycje.length;

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<label>Cena za kg <input id="cena" type="number" value="12"></label>
<label>Kilogramy <input id="kg" type="number" value="2.5"></label>
<button id="oblicz-jq">Oblicz (jQuery)</button>
<button id="oblicz-js">Oblicz (vanilla)</button>
<p id="wynik"></p>

label { display: block; margin-bottom: 4px; }

// jQuery
$('#oblicz-jq').on('click', function () {
  var cena = parseFloat($('#cena').val());
  var kg = parseFloat($('#kg').val());
  $('#wynik').text('Koszt: ' + (cena * kg).toFixed(2) + ' zł').css('color', 'navy');
});

// czysty JS – identyczny efekt
document.getElementById('oblicz-js').addEventListener('click', () => {
  const cena = parseFloat(document.getElementById('cena').value);
  const kg = parseFloat(document.getElementById('kg').value);
  const wynik = document.getElementById('wynik');
  wynik.textContent = `Koszt: ${(cena * kg).toFixed(2)} zł`;
  wynik.style.color = 'darkgreen';
});

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<nav>
  <button class="zakladka aktywna" data-cel="klient">Klient</button>
  <button class="zakladka" data-cel="adres">Adres</button>
  <button class="zakladka" data-cel="kontakt">Kontakt</button>
</nav>
<section id="klient" class="panel">Dane klienta…</section>
<section id="adres" class="panel" hidden>Ulica, miasto…</section>
<section id="kontakt" class="panel" hidden>E-mail, telefon…</section>
<p><label><input type="checkbox" id="tryb"> użyj wersji vanilla</label></p>

.zakladka { padding: 6px 12px; border: 1px solid #999; background: #eee; cursor: pointer; }
.zakladka.aktywna { background: #15171c; color: #f2d338; }
.panel { padding: 10px; border: 1px solid #ccc; margin-top: 6px; }

// wersja jQuery
$('nav').on('click', '.zakladka', function () {
  if ($('#tryb').prop('checked')) return;            // przełącznik tylko do porównania
  $('.zakladka').removeClass('aktywna');
  $(this).addClass('aktywna');
  $('.panel').hide();
  $('#' + $(this).data('cel')).show();
});

// wersja vanilla – ten sam efekt
document.querySelector('nav').addEventListener('click', (e) => {
  const przycisk = e.target.closest('.zakladka');
  if (!przycisk || !document.getElementById('tryb').checked) return;
  document.querySelectorAll('.zakladka').forEach((z) => z.classList.remove('aktywna'));
  przycisk.classList.add('aktywna');
  document.querySelectorAll('.panel').forEach((p) => {
    p.hidden = true;
    p.style.display = ''; // usuń styl wpisany wcześniej przez .hide()/.show() jQuery
  });
  document.getElementById(przycisk.dataset.cel).hidden = false;
});

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<button id="jq">jQuery fadeToggle</button>
<button id="js">vanilla (klasa + transition)</button>
<p id="kom-jq" class="kom">Zapisano (jQuery)</p>
<p id="kom-js" class="kom widoczny">Zapisano (vanilla)</p>

.kom { padding: 8px; background: #eef8f1; border-left: 4px solid #2e7d4f; }
#kom-js { opacity: 0; transition: opacity 0.4s; }
#kom-js.widoczny { opacity: 1; }

$('#jq').on('click', function () {
  $('#kom-jq').fadeToggle(400);          // animuje opacity i na końcu ustawia display:none
});

document.getElementById('js').addEventListener('click', () => {
  document.getElementById('kom-js').classList.toggle('widoczny');
});

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<form id="form"><input id="tytul" placeholder="Nowe zadanie" required> <button>Dodaj</button></form>
<ul id="lista"></ul>
<p id="licznik">Wykonane: 0 z 0</p>

li { cursor: pointer; }
li.wykonane { text-decoration: line-through; color: #888; }

function odswiezLicznik() {
  $('#licznik').text('Wykonane: ' + $('#lista li.wykonane').length + ' z ' + $('#lista li').length);
}

$('#form').on('submit', function (e) {
  e.preventDefault();
  var tytul = $('#tytul').val().trim();
  if (!tytul) return;
  $('#lista').append($('<li>').text(tytul).hide().fadeIn(300));
  $('#tytul').val('');
  odswiezLicznik();
});

// delegacja: li dodane później też reagują
$('#lista').on('click', 'li', function () {
  $(this).toggleClass('wykonane');
  odswiezLicznik();
});

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<button id="jq">$.getJSON</button>
<button id="js">fetch</button>
<pre id="out"></pre>

var URL_TODO = 'https://jsonplaceholder.typicode.com/todos/1';

$('#jq').on('click', function () {
  $.getJSON(URL_TODO)
    .done(function (todo) { $('#out').text('jQuery: ' + JSON.stringify(todo)); })
    .fail(function (xhr) { $('#out').text('Błąd ' + xhr.status); });
});

document.getElementById('js').addEventListener('click', async () => {
  const out = document.getElementById('out');
  try {
    const res = await fetch(URL_TODO);
    if (!res.ok) throw new Error(res.status);
    out.textContent = 'fetch: ' + JSON.stringify(await res.json());
  } catch (e) {
    out.textContent = 'Błąd ' + e.message;
  }
});