Admin
In this Online jQuery tutorial, we are going to see all about jQuery syntax. jQuery syntax is the best way to understand jQuery code. In the previous tutorial, we have seen how to install jQuery on web pages.
Our jQuery tutorial is designed for beginners as well as professionals. Before using jQuery, First, you have to know about jquery syntax, That means the rule to use jQuery in your projects or web pages.
Headings of Contents
jQuery Syntax
jQuery provides a facility to select HTML elements and perform an action on an element. The standard syntax of jQuery starts with a dollar sign ( $ ) and ends with a semicolon ( ; ).
Let’s consider the example code of jQuery syntax and understand. jQuery code always placed within the <script> and </script> tags.
<script>
$(document).ready(function(){
// jQyery method code will be here to be execution
});
</script>Explaination of above jQuery syntax
let’s understand all the above jQuery syntax’s line so that you can understand in a better way.
- jQuery is a just JavaScript library so it is mandatory to place all the jQuery code within the <script> and </script> tags If you are using jQuery in the same file.
- $ (Doller sign ):- denote the define/access jQuery.
- (document).ready(handler):- This is typically known as a ready event. Where the handler is basically a function that is passed into the ready() method to be executed.
Further, inside handler function, you can select any HTML DOM ( Document Object Model ) element and perform action on them, Like $(selector).action().
where the selector represents any HTML element and action represents any jQuery events.
To understand the above process, Let’s take a simple example of jQuery.
jQuery Example
In this jQuery example, we will display a message in the alert() box on a button click.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Tutorial</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>Welcome to Programming Funda jQuery Tutorial</h1>
<button id="btn"> Click Now</button>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
alert('Welcome to Programming Funda Portal..')
})
});
</script>
</html>
In the above jQuery example code, we have displayed a simple message “Welcome to Programming Funda Portal.” in the alert box on button click. Where (‘#btn’) denoted the $(selector) and click() function denoted the jQuery event.
When you run the above HTML code inside the browser, a button “Click Now” will be shown, When you clicked on that button, a message “Welcome to Programming Funda Portal.” will appear in the alert() box.
Conclusion
In this jQuery tutorial, you have learned about jQuery syntax. jQuery syntax is the easiest way to understand jQuery code.
jQuery provides lots of facilities to deal with HTML elements. Using jQuery we can select any HTML element and perform an action on them.
I hope this article will help you, If you like this article please comment and share with your friends who want to learn jQuery from scratch to advanced.
For More Information:- Click Here
