jquery function

jQuery is a fast and concise JavaScript library created by John Resig in 2006. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for Rapid Web Development.

Write less , do more
jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Prerequisites -

  1. HTML
  2. CSS
  3. Javascript
  4. Document Object Model (DOM)

we are going to develop web based application using jQuery, it will be good if you have understanding on how internet and web based applications work.

important core features supported by jQuery -

  1. DOM manipulation −

    The jQuery made it easy to select DOM elements, negotiate them and modifying their content by using cross-browser open source selector engine called Sizzle.

  2. AJAX Support −

    The jQuery helps you a lot to develop a responsive and featurerich site using AJAX technology.

  3. Cross Browser Support −

    The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

  4. Animations −

    The jQuery comes with plenty of built-in animation effects which you can use in your websites.

  5. Event handling −

    The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.

  6. Lightweight −

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

How to use jQuery in html ?

There are two ways to use jQuery in your html.

  1. Local

    You can download jquery and link it inyour html head .

  2. CDN

    You can use live CDN (content delivery network) in your head in html , here you have no need to download it. It is preffered method to use jquery

How to use localy

Download latest version of jquery https://code.jquery.com/jquery-3.5.1.min.js
copy this code and saved in a file with .js extension like jquery.js.

you can include jquery library in your HTML file as follows −

    <html>
    <head>
       <title>The jQuery Example</title>
       <script type = "/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 produce following result −

    Hello, World!

CDN method

There are many cdn you can use any one

  1. Microsoft CDN
  2. CDNJS CDN
  3. jsDelivr CDN
  4. Google CDN

You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Google and Microsoft provides content deliver for the latest version.

We are using Google CDN version of the library throughout this tutorial.

Example

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

This will produce following result −

    Hello, World!