NEXT ❯❯

JQUERY - BASIC

Are you interested in JavaScript? But do not want to write complex code in JavaScript. Well! In that case JQuery could be a solution.

What is JQuery?

JQuery is a light weight JavaScript library that is present in a single JavaScript file.

And as mentioned above, JQuery takes a lot of common task from JavaScript that needs tons of lines of code to accomplish and provides methods for those.

Why should you learn JQuery?

Easy to learn

JQuery code is quite easy to write due to its simple syntax.

Easy to use

You can perform operations like show/hide, fade-in/fade-out and so on using minimal lines.

Cross-browser support

jQuery provides an elegant cross-browser support with no extra code. i.e. You can write a piece of code in JQuery and you don't have to bother if it would run in Firefox, chrome, IE e.t.c.

Due to its cross browser support, it would run on any browser seamlessly.

Free

The great thing about JQuery is, it comes free of cost.

First JQuery Application

Let us write our first JQuery Application which just prints Hello World on the screen.

Example :

<html>
   <body>   
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      <script>
      
			$(document).ready(function () {
            	document.write("Hello World")
        	});
            
      </script>      
   </body>
</html>

Output :

Hello World

In the above code we are printing Hello World using the below statement :
```
document.write("Hello World")
```
We do not have to dig much into individual component in the output statement for now. We can just remember, document.write() is the statement used to print something on the screen.

Since, JQuery(Just like JavaScript) is used in web web. All JQuery codes should be written inside <html> and <body> tags,
```
<html>
	<body>

		....
		....

	</body>
</html>
```

Inside the <html> and <body> tags, there is a <script> tag. Now since, JQuery is a JavaScript library. So, JQuery code should be written inside the <script> tag.

And all we are trying to do is include the JQuery file in out programme.
```
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
```
Off course, you can download the JQuery file in your local system(Which we will be seeing in the next tutorial).

The next line specifies the actual JQuery code that is present inside the <script> tags.
```
<script>

	$(document).ready(function () {
		document.write("Hello World")
	});

</script>
```
Just remember a JQuery code starts with a $ and ends with a ;.

Let us break the above code a little more.
```
<script>

	$(document).ready(
		function () {
			document.write("Hello World")
		}
	);

</script>
```
Now, if you look at the above code, there is a ready() method with document keyword before it.
```
$(document).ready(...);
```
And inside the parenthesis () of ready() method, we define the function,
```
function () {
	document.write("Hello World")
}
```
That performs the print operation.
```
document.write("Hello World")
```

Moral of the Story

We have to write all our codes inside the $(document).ready(function () {}); method. And the $(document).ready() method should be inside <html>, <body> and <script> tags.

Example :

<html>
   <body>   
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      <script>
      
			$(document).ready(function () {
            	
            	//OUR CODE SHOULD BE WRITTEN HERE.
            	
        	});
            
      </script>     
   </body>
</html>

NEXT ❯❯