jQuery Syntax Basics

jQuery syntax is designed to be simple and easy to use. At its core, jQuery works by selecting HTML elements using some selector and then performing actions on them. There are basically two aliases of jQuery syntax:

$() Function Syntax

We can start by using the basic jQuery dollar sign `$()` function to target elements with CSS-like selectors.

$() Selector Syntax

Copy
Try in CodeLab
An Example of $() selector function
$(document).ready(function(){
	$("#hideBtn").click(function(){
		$("#myPara").hide();
	});
});

jQuery() Function Syntax

We can also write the same selection logic with the full jQuery() function instead of the shorter $() alias. Both work exactly the same.

jQuery() Selector Syntax

Copy
Try in CodeLab
Basic Example of jQuery() selector function
jQuery(function(){
  jQuery("#toggleBtn").on("click", function(){
    jQuery("#infoText").toggle();
  });
});

When to Use jQuery() Instead of $() Selector Function?

Since both $() and jQuery() serve the same purpose, $ is simply a shorter and more convenient alias for jQuery() selector function. Additionally, we might avoid using the $() function in situations like:

  • When another library (such as Prototype.js or MooTools) also uses the $ symbol.
  • If $ has been reassigned or is causing conflicts in your scripts.
  • When you enable jQuery's noConflict mode to prevent naming issues.

noConflict Mode

Copy
Try in CodeLab
var $jq = jQuery.noConflict();

// Use $jq instead of $
$jq(document).ready(function() {
	$jq("body").css("background", "#eee");
	$jq("h1").text("jQuery noConflict() is working!");
});

jQuery Ready Wrappers

A jQuery ready wrapper wraps your code to ensure the entire HTML document is fully loaded before any jQuery runs. It guarantees that the jQuery library and all elements are available, preventing errors caused by accessing elements too early.

This is important because if you try to manipulate elements that haven’t been loaded yet, your script will fail.

jQuery Wrapper Types

There are several syntaxes of jQuery wrappers that we can utilize.

  • $(document).ready(function() {});
  • $(document).ready(() => {});
  • $(function() {});
  • $(() => {});
  • jQuery(document).ready(function() {});
  • jQuery(document).ready(() => {});
  • jQuery(function() {});
  • jQuery(() => {});
  • var $j = jQuery.noConflict(); $j(document).ready(function() {});
  • var $j = jQuery.noConflict(); $j(function() {});

Key Facts About jQuery Wrappers

  • Wrappers ensure the DOM is fully loaded before running your code, preventing errors with missing elements.
  • Arrow functions (() => {}) keep the outer this context, while regular functions (function(){}) create their own this.
  • jQuery.noConflict() helps avoid conflicts with other libraries that also use the $ symbol.
  • $(function(){}) and $(document).ready() behave the same way, but since jQuery 3.0, you usually don’t need them if your script tag is placed at the end of the <body>.
  • Before HTML5 and modern script loading, wrappers were critical to make sure scripts waited for the page to load.
  • If you are developing WordPress themes or plugins, always wrap your code to avoid conflicts and race conditions.

Using Vanilla JavaScript DOM Ready with jQuery

You can also rely on plain JavaScript's DOMContentLoaded event to initialize your jQuery code. This helps you keep native event listeners while still taking advantage of jQuery’s powerful methods.

Using JS DOM Ready with jQuery

Copy
Try in CodeLab
document.addEventListener("DOMContentLoaded", function() {
	$("#swapBtn").on("click", function() {
		var box1 = $(".box1");
		var box2 = $(".box2");
		// Swap background colors
		var color1 = box1.css("background-color");
		var color2 = box2.css("background-color");
		box1.css("background-color", color2);
		box2.css("background-color", color1);
	});
});