jQuery Tutorial
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
jQuery Useful Resources
Selected Reading
- jQuery - AJAX
- jQuery - Attributes
- jQuery - Events
- jQuery - Selectors
- jQuery - Syntax
- jQuery - Basics
- jQuery - Overview
- jQuery - Home
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
- jQuery - Weather.js
- jQuery - Megadropdown.js
- jQuery - Producttour.js
- jQuery - Blockrain.js
- jQuery - Checkout.js
- jQuery - Whatsnearby.js
- jQuery - Filer.js
- jQuery - LogosDistort.js
- jQuery - Tagsort.js
- jQuery - Drawsvg.js
- jQuery - Slideshow.js
- jQuery - Progressbar.js
- jQuery - Alertify.js
- jQuery - Rowgrid.js
- jQuery - Slidebar.js
- jQuery - Multiscroll.js
- jQuery - Flickerplate.js
- jQuery - PagePiling.js
- jQuery - Plugins
jQuery Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery - Syntax
jQuery - Syntax
jQuery is used to select any HTML element from an HTML document and then perform any action on that selected element. To select an HTML element, jQuery selectors are used, we will study these selectors in detail in the next chapter. For now let s have a look of basic jQuery Syntax to Find out or to Select or to Query an element and then perform an action on the selected element.
Document Ready Event
Before we look into jQuery Syntax, let s try to understand what is Document Ready Event. Actually, before we execute any jQuery statement, we would pke to wait for the document to be fully loaded. This is because jQuery works on DOM and if complete DOM is not available before executing jQuery statements, then we will not get desired result.
Following is basic syntax of a Document Ready Event:
$(document).ready(function(){
// jQuery code goes here...
});
Alternatively you can also use the following syntax for document ready event:
$(function(){
// jQuery code goes here...
});
You should always keep Document Ready Event block inside <script>...</script> tags and you can keep this script tag either inside the <head>...</head> tags or at the bottom of the page before closing <body> tag.
You can use either of these two syntax to keep your jQuery code inside the block which will be executed only when complete DOM is downloaded and ready to be parses.
jQuery Syntax
Following is the basic syntax for selecting HTML elements and then performing some action on the selected element(s):
$(document).ready(function(){
$(selector).action()
});
Any jQuery statement starts with a dollar sign $ and then we put a selector inside the braces (). This syntax $(selector) is enough to return the selected HTML elements, but if you have to perform any action on the selected element(s) then action() part is required.
The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript pbrary where $ sign is confpcting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().
Examples
Below are few examples to illustrate the basic jQuery Syntax. Following example will select all the <p> elements from an HTML document and will hide those elements. Try to cpck the icon 
to run the following jQuery code:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("p").hide()
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<p>This is another p tag</p>
<span>This is span tag</span>
<span>This is span tag</span>
</body>
</html>
Let s re-write the above example using jQuery() method instead of $():
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
jQuery("p").hide()
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<p>This is another p tag</p>
<span>This is span tag</span>
<span>This is span tag</span>
</body>
</html>
Following is the jQuery Syntax to change the color of all the <h1> elements to red. Try to cpck the icon to run the following jQuery code:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("h1").css("color", "red")
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<span>This is span tag</span>
<span>This is span tag</span>
</body>
</html>
Similar way you can change the color of all the elements whose class is "red". Try to cpck the icon to run the following jQuery code:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$(".red").css("color", "red")
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<span>This is span tag</span>
<span class="red">This is span tag</span>
</body>
</html>
So far, we have seen you very basic examples of jQuery Syntax to give you clear understanding on how exactly jQuery is going to work on an HTML document. You can modify the code given in the above boxes and then try to run these programs to see them pve in action.
Advertisements