jQuery Syntax
Trace a short expression instead of treating dollar-sign code as a different programming language.
How it works
jQuery calls are ordinary JavaScript. A selector identifies elements, a method performs work and a callback can run later or once for each match. Parentheses call functions; quotes create strings. This example uses each to derive labels from two existing rows, then joins the collected text. The callback receives an index and element. A traditional function can also use this as the current element, while an arrow keeps its surrounding this.
Run in a separate local browser lab
Save this complete HTML source as index.html in an empty folder. Put the pinned full jQuery 4.0.0 file beside it and preserve the MIT licence notice. The document includes its own CSS and JavaScript. Bhylu’s shared website theme does not load jQuery globally.
Open index.html directly in a normal browser. You may also use the optional loopback fixture server with Node 22 if you want the same HTTP setup as the network lessons.
jQuery examples do not run in Bhylu’s current playground: it blocks external libraries and network access. No Apache, MySQL or website configuration change is needed. Review the full-build setup before using Ajax, effects or plugins.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Read the Receiver, Method and Callback Separately</title>
<style>
:root {
font:
18px/1.6 system-ui,
sans-serif;
color: #16304e;
background: #fff;
color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
max-width: 50rem;
margin: auto;
padding: 1.25rem;
}
h1 {
font-size: 1.8rem;
line-height: 1.2;
}
h2 {
font-size: 1.3rem;
}
button,
input,
select,
textarea {
font: inherit;
max-width: 100%;
}
button {
margin: 0.2rem;
padding: 0.4rem 0.7rem;
background: #034fa0;
color: white;
border: 1px solid #034fa0;
border-radius: 0.3rem;
}
button:disabled {
opacity: 0.6;
}
label {
display: block;
margin: 0.5rem 0;
}
input:not([type='checkbox']),
select,
textarea {
display: block;
padding: 0.3rem;
}
a {
color: #034fa0;
}
output {
display: block;
}
article,
section,
fieldset {
padding: 0.75rem;
margin-block: 0.75rem;
border: 1px solid #a9bcd1;
}
ul {
padding-left: 1.5rem;
}
:focus-visible {
outline: 3px solid #0078d4;
outline-offset: 3px;
}
.chosen {
border: 3px solid #0078d4;
}
.highlight {
font-weight: 700;
}
.muted {
opacity: 0.7;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
:root[data-theme='dark'] {
color: #d6e7fb;
background: #061d30;
color-scheme: dark;
}
:root[data-theme='dark'] a {
color: #8ecbff;
}
</style>
</head>
<body>
<main>
<h1>Neighbourhood book swap</h1>
<ul>
<li>River Paths</li>
<li>Small Gardens</li>
</ul>
<output></output>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
const labels = [];
$('li').each(function (index, element) {
labels.push(index + 1 + ': ' + $(element).text());
});
$('output').text(labels.join(' / '));
});
</script>
</body>
</html>
Expected result
The output reads 1: River Paths / 2: Small Gardens.
The local array is ordinary JavaScript, and wrapping element allows use of the text getter. The collection order follows the document order here. Avoid attaching a click handler inside each when a single on call can attach the same handler to the collection. Keep loops for work that genuinely differs by element rather than adding repetition automatically.
Use jQuery’s official API documentation for exact method and return contracts.