jQuery Syntax
Almost every line of jQuery follows the same simple pattern: select something, then do something to it.
The Basic Pattern
Example
$(selector).action();| Part | Meaning |
|---|---|
$ | The jQuery function (you can also write jQuery) |
(selector) | Which elements to find, using CSS selector text |
.action() | What to do with those elements |
Some examples:
Example
$("p").hide(); // hide all paragraphs
$("#title").text("Hi"); // change the text of the element with id="title"
$(".box").css("color", "blue"); // make every .box blue
$(this).fadeOut(); // fade out the current element (inside an event)The Document Ready Function
Your code should run only after the page has been fully read, otherwise the elements you look for may not exist yet. jQuery has a ready function for this:
Example
$(document).ready(function () {
// your jQuery code goes here
});There is also a short form that does exactly the same:
Example
$(function () {
// your jQuery code goes here
});Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script>
$(function () {
$("#status").text("The page is ready, and jQuery found this paragraph.");
});
</script>
</head>
<body>
<p id="status">Waiting...</p>
</body>
</html>The page is ready, and jQuery found this paragraph.
The script is in the <head>, before the paragraph, but it still works because the ready function waits for the page.
If your scripts are at the very end of <body>, the elements already exist and the ready function is not strictly needed. Many developers still use it as a safe habit.
Chaining
Most jQuery methods return the same selection again, so you can call several methods one after another. This is called chaining.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<p id="news">Admissions open for the new batch!</p>
<button id="go">Announce</button>
<script>
$(function () {
$("#go").click(function () {
$("#news")
.css("color", "white")
.css("background", "#0769ad")
.css("padding", "10px")
.slideUp(600)
.slideDown(600);
});
});
</script>
</body>
</html>Getters and Setters
Many methods do two jobs. With no value they get (read); with a value they set (change).
Example
let name = $("#name").val(); // get the value of an input
$("#name").val("Ayesha"); // set it
let colour = $("p").css("color"); // get
$("p").css("color", "green"); // setWhen you get a value from a selection with many elements, jQuery returns the value of the first one. When you set, it changes all of them.
jQuery Objects and DOM Elements
$("p") returns a jQuery object, a list of elements with jQuery methods. It is not a normal DOM element.
Example
const $title = $("#title"); // jQuery object
const titleEl = $title[0]; // the plain DOM element inside it
const again = $(titleEl); // wrap a DOM element to use jQuery on itMany developers start jQuery variable names with $ to remember which is which.
Exercise
Exercise
Which line hides every element with the class "ad"?