JS jQuery

JS jQuery

jQuery is a popular JavaScript library that simplifies DOM selection, manipulation, events, and AJAX. Modern browsers can do most of these tasks with vanilla JavaScript, but you may still see jQuery in legacy projects.

To use jQuery, you must include it first (example):

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

jQuery Selectors

jQuery uses CSS selectors. $(selector) returns a jQuery object.

$(document).ready(function () {
  const title = $("h1");
  const items = $(".item");

  console.log(title.text());
  console.log(items.length);
});

Common selector examples:

$("#id");
$(".class");
$("div p");
$("input[type=checkbox]");

Vanilla JS equivalents (modern):

document.querySelector("h1");
document.querySelectorAll(".item");

jQuery HTML

Read or change text and HTML:

const el = $("#box");

console.log(el.text());      // read text
el.text("Hello");            // set text

console.log(el.html());      // read HTML
el.html("<strong>Bold</strong>"); // set HTML

Add elements:

$("#list").append("<li>New item</li>");
$("#list").prepend("<li>First item</li>");

jQuery CSS

Change styles and classes:

const panel = $("#panel");

panel.css("padding", "12px");
panel.css({
  borderRadius: "8px",
  border: "1px solid #ddd"
});

panel.addClass("active");
panel.removeClass("active");
panel.toggleClass("hidden");

Vanilla JS equivalents:

const el = document.querySelector("#panel");
el.style.padding = "12px";
el.classList.toggle("hidden");

jQuery DOM

DOM traversal and manipulation helpers:

const item = $("#item1");

item.parent();          // parent element
item.children();        // children
item.find(".child");    // find inside
item.next();            // next sibling
item.prev();            // previous sibling

Event handling (often paired with DOM ops):

$("#btn").on("click", function () {
  $("#box").toggleClass("active");
});

Event delegation (useful for dynamic lists):

$("#list").on("click", "li", function () {
  $(this).toggleClass("done");
});

Modern Advice

• If you are starting a new project, prefer modern DOM + Fetch APIs.
• If you maintain legacy code, jQuery knowledge is still valuable.
• Mixing jQuery and modern frameworks can be tricky; keep boundaries clear.

Next Step

Continue with JS Graphics or JS Examples (or keep building on AJAX/JSON with real mini apps).