jQuery Selectors — The Absolute Basics

Transitioning from vanilla JavaScript to the jQuery library

Beginning with Vanilla JavaScript

<h1>Hello jQuery!</h1><p class="intro-content">Let's use some selectors.</p>
document.querySelector("h1");
document.querySelector(".intro-content");

Transitioning to jQuery

<h1>Hello jQuery!</h1><p class="intro-content">Let's use some selectors.</p>
// Vanilla JavaScript
document.querySelector("h1");
// jQuery
$("h1");
// Vanilla JavaScript
document.querySelector(".intro-content");
// jQuery
$(".intro-content");

Return Values, Properties, and Methods

<h1>Hello jQuery!</h1><p class="intro-content">Let's use some selectors.</p>
document.querySelector("h1").innerText = "Changed Heading!";
$("h1").text("Changed Heading!");
// Vanilla JavaScript
document.querySelector("h1").innerText = "Changed Heading!";
// jQuery
$("h1").text("Changed Heading!");
$("h1").innerText = "Changed Heading!";
document.querySelector("h1").text("Changed Heading!");
Uncaught TypeError: document.querySelector(...).text is not a function

Additional Resources (Not the Absolute Basics)

Software developer,Instructor at the Turing School of Software and Design.

Software developer,Instructor at the Turing School of Software and Design.