jQuery Syntax

$(selector).action() and document ready.

✍️ 3 exercises + code challenge in this lesson

The basic syntax is $(selector).action():

  • $ is the jQuery function.
  • selector finds HTML elements (CSS-style).
  • action() does something with them.

Document ready

Wrap code in $(function () { ... }); so it runs after the page has loaded.

Most jQuery methods return the jQuery object, so calls can be chained: $("p").addClass("x").fadeIn().

Key Takeaways: jQuery Syntax

Mastering jQuery Syntax helps you write clean and reliable jQuery code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

jQuery Syntax Code Example

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

<p>Paragraph one</p>
<p class="special">Paragraph two</p>

<script>
  $(function () {
    $("p").css("padding", "6px");
    $(".special").css({ background: "#FEF08A", fontWeight: "bold" }).append(" ← chained");
  });
</script>
Free sign-in required · Google login available

jQuery Syntax Practice Exercises

Check what you learned in “jQuery Syntax”.

/ 3 solved
Fill in the blank

Run code when the document is ready.

$( () {
  // code
});
✓ Correct! Not quite. Try again.
Multiple choice

Why can jQuery methods be chained?

✓ Correct! Not quite. Try again.
Code challenge

Chain two calls on all paragraphs: .css("color", "blue") and .addClass("done").

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services