Introduction:
- It is a lightweight javascript library.
Problems in JavaScript:
- long selectors
- complex animation
- lengthy DOM manipulation
- Lengthy Ajax Coding
Jquery Moto:
Write less,do more
Why use jquery:
- short selectors
- variety of animation functions
- easy DOM manipulation
- easy CSS styling
- easy DOM traversing
- simple Ajax code
Short selectors example:
- In JavaScript we use document.getElementsByClassName('classname')
but now in jquery, we will use $('.classname')
- In JavaScript we use document.getElementById('idname')
but now in jquery, we will use $('#idname')
- In JavaScript we use document.getElementsByTagName('tagname')
but now in jquery, we will use $('tagname')
Benefits of jquery:
- Browser independent(all browser support)
- Increase Coding Speed
Jquery Implementation:
Step1: Download the jquery.js file from Jquery official website.
Step2: include the source of this file in the script tag
<html>
<head>
<script src="jquery.js"></script>
</head>
</html>
we can also include CDN(Content Delivery Network) to add Jquery in our HTML file because it helps us to resolve load from multiple users.
Jquery CDN is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
Jquery Basic Syntax:
In JavaScript,
<script>
var a=document.getElementById('idname').innerHTML;
console.log(a);
</script>
Now in Jquery,
<script>
$(document).ready(function(){
var a=$('idname').html();
console.log(a);
});
</script>
OR
<script>
$(function(){
var a=$('idname').html();
console.log(a);
});
</script>
This only works when we place it in end of body tag
0 Comments