Amazing JQuery 3.4.1

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

JQuery

It is a JavaScript library. Which is the lightweight and main use of jQuery is write less and do more.

The purpose of jQuery is to make easier use of JavaScript on your website.

Add Jquery to your project

Download lib file from jquery.com –https://jquery.com/download/

Include this lib into your Html.

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag.

<head>
<script src="jquery-3.4.1.min.js"></script>
</head>

jQuery CDN

If you don’t want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

Both Google and Microsoft host jQuery.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

jQuery Syntax

It starts with 3S

  1. $ – this is the first S which for jquery
  2. S – this for selector means you need to select the item first before doing any work on that
  3. 3S is for shoot the action means you need to call a function or doing some operation like that.

$(selector).shoot_the_action()

$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

How to prevent any jQuery code from running before the document is finished loading?

It is good practice to wait for a fully-loaded document and then you will work on that. For that, you need to use document ready function which runs after the Html document completely loads.

$(document).ready(function(){

  // jQuery methods go here...

});

What is the difference between the compressed, uncompressed and slim version of jQuery?

Current version 3.4.1 whose sizes as

  1. Uncompressed:-267 kb
  2. Compresses: 87 kb
  3. Slim: 69 kb

The uncompressed file is best used during development or debugging. the compressed file saves bandwidth and improves performance in production. 

Uncompressed Version:- the use of uncompressed version is mainly used in the development environment and main use of this allows you to see what’s causing problems and fix.

Compresses Version: it mainly used in a production environment, the file size much less it’s just 87kb.

In both versions, the core functionality of jQuery shouldn’t be tweaked.

Slim version: in jquery slim following features are removed

  1. Query.fn.extend
  2. jquery.fn.load
  3. jquery.each // Attach a bunch of functions for handling common AJAX events
  4. jQuery.expr.filters.animated
  5. ajax settings like jQuery.ajaxSettings.xhr, jQuery.ajaxPrefilter, jQuery.ajaxSetup, jQuery.ajaxPrefilter, jQuery.ajaxTransport, jQuery.ajaxSetup
  6. xml parsing like jQuery.parseXML,
  7. animation effects like jQuery.easing, jQuery.Animation, jQuery.speed
  8. the slim version saves weight by excluding the ajax and effects modules.

What are CDN and CDN fallback?

CDN– content delivery network refers geographically distributed group of servers which main work is to serve the content faster as per your geolocation. CDN allows you to the quick transfer of assets like Html page, CSS, javascript files, images, and videos.

In simple words, CDN means copy your website content to multiple locations and serves this content to the user as per their location. Means if I have hosted my content on 2 locations like the US and India. And a user whose location Texas if he accesses my site the content is delivered from US server which is nearer to user that’s the whole point of CDN.

Benefits of CDN

  • Improving website load times
  • Reducing bandwidth costs
  • Increasing content availability and redundancy
  • Improving website security

CDN Fallback

In our project, we use CDN mainly provided by Microsoft or Google. In some situation, if they are not responding or fail we need some alternative solution to include a jQuery in your project.

<html>
<head>
    <title>
        JQuery Demos
    </title>


    <script src="https://ajax.googleapis.com/ajax/libs/d3js/5.12.0/d3.min.j"></script>
    <script>
        window.jQuery || document.write(unescape("<script src='/libs/jquery-3.4.1.js' type='text/javascript'%3E%3C/script%3E"));
    </script>

</head>
<body>
    <h1>Hello Sagar</h1>
    <input type="text" id="txtname" />
    <script>
        $("#txtname").val('Jquery Is Present ')

    </script>

</body>


</html>

Above project we misspell the google CDN so it will not work then after that we check whether the jquery is present on-page or not. If It is not present then add local library file of jquery into our Html and rest is working fine.

Amazing JQuery 3.4.1

In CDN fallback means in case our google or Microsoft CDN is not working then we switch over local server or a local file to serve the content.

You may also like...

Leave a Reply

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