jQuery Introduction - Get Started

Home Next ↦

jQuery Introduction:  jQuery is a lightweight javascript library, used to manipulated DOM, event handling, with some cool animation effects, and also provide ajax to update content without page refresh. It is open-source and easy to learn.

jQuery is the write less, do more JavaScript Library.

Its powerful features and ease of use have made it the most popular client-side JavaScript framework for the Web.

jQuery makes developer life easy because using jQuery it easy to find the elements of a document, and then manipulate those elements by adding content, editing HTML attributes and CSS properties,  defining event handlers, and performing animations.

It also has Ajax utilities for dynamically making  HTTP requests and general-purpose utility functions for working with objects and arrays.

Usage of jQuery

To work with jQuery, the first step is we have to add a jQuery library on your web page .i.e HTML page. We can download the jQuery library from its official website jQuery.com.

The jQuery Library is a single JavaScript file, and we have to give its reference with the HTML <script> tag and that script tag should be inside the <head> of our HTML page.

Sample Code: jQuery library downloaded and added on webpage

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

Alternatively, we can also give jQuery references from CDN Option 1, Option 2, I use the Google-hosted library in the below sample code. 

Sample Code: jQuery library added from CDN, Google Hosted
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

Now we have done imported jQuery Library, it's ready to write jQuery code.

The jQuery Library Defines a single global function named Jquery().

This function is so Frequently used that the library also defines the global symbol $ as a shortcut for it.

Sample Code: Simple jQuery alert Hello World
 $(document).ready(function() {
   alert("Hello World, Welcome to Codepedia");
});

Every jQuery code should be written inside the document.ready.

This ensures that the document is ready for manipulation. ie it prevents any jQuery code from running before the document is finished loading.

Alternatively we can use shorthand i.e $() instead of $(document).ready()

// Shorthand for $(document).ready()
$(function() {
    alert('Hello World, Welcome to Codepedia');
});


The jQuery() function (a.k.a. $()) is the most important one in the jQuery library.

When we pass a jQuery selector string to $(), it returns a jQuery object that represents the set of matched (or "selected") elements.

jQuery selectors are very much like the CSS selectors that we use in stylesheets for example as shown below:

div // all <div> elements
#content // the element with id="content"
.warning // all elements with class="warning"

Will discuss jQuery Selector in detail in the next article.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Home Next ↦
👳 Want to thank me? Buy Me a Coffee
↥