What is Jquery ? How to use Jquery? | Tutorial

Jquery means “Write less, do more”. jQuery is javaScript’s library. This is not a programming language. There is an added advantage of having jQuery cross-browser compatible. Jquery makes HTML document easier for web development easier, event handling, animating, and Ajax interaction.

Jquery is lightweight and easy to use in webpages. In Javascript, we have to write more code, but in Jquery, we can do the same thing in the less code. It is very easy and simple to use.

How to JavaScript and jQuery are written. We can also compare using the below example.

document.getElementById('demo').innerHTML = 'Hello, World!'
$('#demo').html('Hello, World!')

Jquery library & Features

The jQuery library contains the following features:

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

How to use jQuery?

There are two simple and easy to use jQuery in HTML/Webpages.

  • Download & Use jQuery − You can download jQuery library and include it in your HTML code.
  • Use jQuery CDN (Content Delivery Network) − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).

Download & Use jQuery

Go to the jQuerySite to download the latest version of jquery.
After downloading jquery library latest version, place jquery library in your project folder.

Example

Now you can include jquery library in your HTML Or Webpages.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>jQuery Example</title>
    <script src="/jquery/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>

  </body>
   <script>
    alert("window is loaded");
   </script>
</html>

Use jQuery CDN

You can include jQuery library into your HTML code or webpages directly from Content Delivery Network (CDN). There are few providers for content delivery of latest jquery library below.

Example

Now you can include jquery library CDN in your HTML Or Webpages.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>jQuery Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>

  </body>
   <script>
   alert("window is loaded");
   </script>
</html>

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *