jQuery - Overview

jQuery - Overview

user-pcr user-pcr
Mar 5, 2022 - 20:48
0 5
jQuery - Overview

jQuery is a fast and concise JavaScript library created by John Resig in 2006 with a beautiful motto: write less, do more . jQuery simplifies HTML document traversal, event handling, animation, and Ajax interaction for fast web development. jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is a list of important core features supported by jQuery −

  • DOM Manipulation − JQuery has made it easy to select DOM elements, match them, and modify their content with an open source cross-browser engine called Sizzle .

  • Event Handling - jQuery offers an elegant way to capture a wide range of events, such as when a user clicks a link, without having to clutter up the HTML code itself with event handlers.

  • AJAX Support - jQuery helps you a lot in developing a responsive and feature rich website using AJAX technology.

  • Animations - jQuery comes with a lot of built-in animation effects that you can use on your sites.

  • Lightweight - jQuery is a very lightweight library - about 19KB in size (Minified and gzipped).

  • Cross Browser Support − jQuery has cross browser support and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+.

  • Latest technology - jQuery supports CSS3 selectors and basic XPath syntax.

DOM Manipulation − JQuery has made it easy to select DOM elements, match them, and modify their content with an open source cross-browser engine called Sizzle .

Event Handling - jQuery offers an elegant way to capture a wide range of events, such as when a user clicks a link, without having to clutter up the HTML code itself with event handlers.

AJAX Support - jQuery helps you a lot in developing a responsive and feature rich website using AJAX technology.

Animations - jQuery comes with a lot of built-in animation effects that you can use on your sites.

Lightweight - jQuery is a very lightweight library - about 19KB in size (Minified and gzipped).

Cross Browser Support − jQuery has cross browser support and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+.

Latest technology - jQuery supports CSS3 selectors and basic XPath syntax.

How to use jQuery?

There are two ways to use jQuery.

  • Local installation - You can download the jQuery library on your local machine and include it in your HTML code.

  • CDN based version. You can include the jQuery library in your HTML directly from the Content Delivery Network (CDN).

Local installation - You can download the jQuery library on your local machine and include it in your HTML code.

CDN based version. You can include the jQuery library in your HTML directly from the Content Delivery Network (CDN).

Local installation

  • Go to https://jquery.com/download/ to download the latest version available.

  • Now place the downloaded jquery-2.1.3.min.js file in your website directory, for example /jquery.

Go to https://jquery.com/download/ to download the latest version available.

Now place the downloaded jquery-2.1.3.min.js file in your website directory, for example /jquery.

example

Now you can include the jquery library in your html file like this:

<html> <head> <title> The jQuery Example </title> <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js" > </script>
   
      
            
      
		
      <script type = "text/javascript" > 
         $ ( document ). ready ( function () { 
            document . write ( "Hello, World!" ); }); </script> </head>    
         
      
   
	
   <body> <h1> Hello </h1> </body> </html>

This will give the following result −

CDN based version

You can include the jQuery library in your HTML directly from the content delivery network (CDN). Google and Microsoft provide content delivery for the latest release.

In this tutorial, we are using the Google CDN version of the library.

How to call jQuery library functions?

Like pretty much everything we do, when jQuery reads or manipulates the Document Object Model (DOM), we need to make sure we start adding events etc. as soon as the DOM is ready.

If you want the event to work on your page, you must call it inside the $(document).ready() function. Everything in it will load as soon as the DOM is loaded and before the page content is loaded.

To do this, we register a ready event for the document as follows −

$(document).ready(function() {
   // do stuff when DOM is ready
});

How to use custom scripts?

It's better to write our own code in a custom JavaScript file: custom.js like below :

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello world!");
   });
});

Using Multiple Libraries

You can use multiple libraries together without conflicting with each other. For example, you can use the jQuery and MooTool javascript libraries together. You can check jQuery's noConflict Method for more details.