jQuery

Introduction

  • jQuery is a JavaScript Library.
  • jQuery simplifies huge complicated things from JavaScript, like AJAX calls and DOM manipulation.
  • jQuery can be used by downloading the library or using CDN
  • jQuery plugin is great helper to reduce your code and save time! link: https://plugins.jquery.com/

Prerequisites

You have to learn html, css and JavaScript at first before starting jQuery.

jQuery Syntax

jQuery Basic syntax is: $(selector).action()

Here selector is used to select HTML element and action() is an event to perform action on selected html elements.

Example: $(".data").hide() – hides all elements with class=”data”.

A basic example is given below with explanation for better understanding.

Output
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<p>I love my Country</p>

<button>Hide paragraph</button>

</body>
</html>

Here jQuery library is included from the Google CDN (Content Delivery Network). It’s essential to include jQuery before using it in your JavaScript code.

$(document).ready() function ensures that the code runs when the document is fully loaded and ready.$(“button”).click(function(){ … });: This line is used to select all elements on the page and attaches a click event handler to them. $(“p”).hide();: This line selects all elements on the page and hides them when the button is clicked. The .hide() function is a jQuery method that sets the CSS display property of the selected elements to “none,” effectively hiding them from view.

So, when you load this HTML page in a web browser and click the “Hide paragraph” button, the element containing “I love my Country” will disappear from the page because it’s hidden using jQuery’s .hide() method.