Learn how to build and design websites with our tutorials.

jQuery Syntax Tutorial

View Tutorial Contents


The Document Ready Event

Your jQuery/Javascript code should be run once the HTML document is finished loading. To do this, jQuery has the document ready event.


$(document).ready(function(){

   // your jQuery code goes here

});

There is also a shorthand version, which is shown below.


$(function(){

   // your jQuery code goes here

});

The $(document).ready(function(){...}); version is more commonly because it easier to read. Which one you use is up to you.


Where To Place jQuery Code

When placing your jQuery code in your HTML documents, the best practice is to place right before the ending </body> tag, for example:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>


<script>
	$(document).ready(function(){

		// your jQuery code goes here

	});
</script>
</body>
</html> 


jQuery Syntax

The basic syntax for jQuery is:


$(selector).action()

Below are some examples of and explanations.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

	$(document).ready(function(){
		$("p").hide();
	});

</script>
</body>
</html> 

The jQuery code example above selects all of the paragraph elements on the HTML document and hides them.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

	$(document).ready(function(){
		$("h1").hide();
	});

</script>
</body>
</html> 

The jQuery code example above selects all of the level one heading elements on the HTML document and hides them.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<p>
This is a paragraph.
</p>

<p id="test">
This is a paragraph.
</p>

<script>

	$(document).ready(function(){
		$("p#test").hide();
	});

</script>
</body>
</html> 

The jQuery code example above selects the paragraph element on the HTML document with the id of "test" and hides it.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1 id="test">
Heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

	$(document).ready(function(){
		$("#test").hide();
	});

</script>
</body>
</html> 

The jQuery code example above selects the element on the HTML document with the id of "test" and hides it.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1 class="test">
Heading
</h1>

<p>
This is a paragraph.
</p>

<p class="test">
This is a paragraph.
</p>

<p class="test">
This is a paragraph.
</p>

<script>

	$(document).ready(function(){
		$("p.test").hide();
	});

</script>
</body>
</html> 

The jQuery code example above selects all of the paragraph elements with a class of "test" on the HTML document and hides them.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1 class="test">
Heading
</h1>

<p>
This is a paragraph.
</p>

<p class="test">
This is a paragraph.
</p>

<script>

	$(document).ready(function(){
		$(".test").hide();
	});

</script>
</body>
</html> 

The jQuery code example above selects all of the HTML elements with a class of "test" on the HTML document and hides them.