Jquery introduction

 


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

Post a Comment

0 Comments