All Categories

Introduction to jQuery

If you are looking for comprehensive information on jQuery, then you have reached the right place. This post will help you get a clear understanding of the basics of jQuery, like how to write and execute a jQuery code, and know all about their important functionalities. This is mainly focused on the people who have an intermediate knowledge of the web development, HTML, and JavaScript.

Let’s start with a simple yet a clear definition of jQuery.

What is jQuery?

jQuery is a fast and concise JavaScript library created by John Resig in 2006. It follows the primary motto  Write less, do more. It is used for easier development of websites.

jQuery simplifies operations like HTML document traversing, event handling, animating, and Ajax interactions, with an easy-to-use API that works across a multitude of browsers, for rapid web development. With a combination of versatility and extensibility, jQuery has changed the way millions of people used to write JavaScript.

Let’s look at the simple jQuery code.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide(); // Hide Function
    });
});
</script>

Just like the hide function showed in the above example, there are several built-in functions in jQuery. The Hide function is used to hide a function. jQuery makes coding a much easier than JavaScript.

Android Programming

There are two ways to use jQuery:

  • Local Installation  You can download jQuery library onto your local machine and include it in your HTML code. Go to the https://jquery.com/download/ to download the latest version available. Now place the downloaded jquery-2.1.3.min.js file in a directory of the website you need, e.g. /jquery.
<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("Hi there??");
         });
      </script>
   </head>
<body>
</body>
</html>
  • CDN Based Version  You can include jQuery library into your HTML code directly from the Content Delivery Network (CDN).

Here we have included it from Google CDN:

<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”>
</script>
</head>

Basic Syntax Used in jQuery

The basic syntax used in jQuery is as follows:

$(selector).action

Here ‘$’is for defining/accessing jQuery, ‘(selector)’is for querying or finding HTML elements and ‘action’ is the action to be performed on the element(s).

Examples :

$(this).hide() – Hides the current element.

$(“p”).hide() – Hides all elements.

$(“.test”).hide() – Hides all elements with class=”test”.

$(“#test”).hide() – Hides the element with id=”test”.

AngularJS course details

Main Features of jQuery

jQuery has numerous functionalities. Here are some of its key features:

  • DOM Manipulation: 

jQuery has made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open-source selector engine called Sizzle. Some of the DOM elements are mentioned below:

Append – Appends after HTML to the selected element.

Prepend – Prepends before HTML to the selected element.

After – Adds HTML after the element.

Before – Adds HTML before the element.

HTML – Replaces an existing HTML inside an element and adds the provided HTML.

Remove – Removes an element from the DOM.

Syntax:  $(“#target”) .before(“add data”) adds content before the div

  • Event Handling:

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.

Syntax:

$('a').click(function(ev) {
$(this).css({backgroundColor: 'orange'});
ev.preventDefault();
});
  • AJAX Support: 

AJAX is the art of exchanging data with a server, and updating parts of a web page without reloading the whole page. The jQuery load() method is a simple but a powerful AJAX method. The load() method loads data from a server and puts the returned data into the selected element.

Syntax:  $(selector).load(URL,data,callback);

  • Animations:

The jQuery library comes with plenty of built-in animation effects which can be used in websites. The jQuery animate() method is used to create custom animations.

Syntax:  $(selector).animate({params},speed,callback)

Some other features of jQuery are mentioned in the below tabular column:

AJAX Support 

jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.

Lightweight

jQuery is a lightweight library, where it’s only about 19KB in size (minified and gzipped).

Cross-Browser Support 

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

Supports Latest Technology 

jQuery supports CSS3 selectors and basic XPath syntax.

Now that you are aware of the main features of jQuery, let’s move on to how to create a jQuery program and customize it.

Step-by-step Tutorial to Create a jQuery Program

Let’s discuss the steps to create a jQuery program to change the background color of a paragraph through a click of a button. The following are the step-by-step explanation:

Step1: Write the basic HTML code.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Program</title>
</head>
<body> 
</body>
</html>

Step2: Add the element to be clicked. We will have a button in this example. Add the following code. A div has been included with a background color which consists of a paragraph.
 

<div style="background-color:yellow">
<p>Click the button to change the background color of this paragraph.</p>
<button>Click me!</button>
</div>

Step3: Add the jQuery library. You can also download your own copy of jQuery, but in this example, we will be linking to Google’s copy of jQuery. Add the following script tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.
min.js">
</script>

Step4: Add the following jQuery script. This script changes the background color of the paragraph.

<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$("div").css("background-color", "blue");
});
});
</script>

Step5: Here’s the complete code to achieve from the steps above

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.
min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$("div").css("background-color", "blue");
});
});
</script>
</head>
<body >
<div style="background-color:yellow">
<p>Click the button to change the background color of this paragraph.</p>
<button>Click me!</button>
</div>
</body>
</html>

Steps to Execute jQuery Code

There are two ways by which you can execute the jQuery codes:

  1. As and when page loads, execute the jQuery code by using anonymous function concept and including the jQuery script at the beginning of the code.

  2. Execute jQuery only when the complete DOM objects (the complete page has been loaded). You will have to wrap your code in .ready function.

<script language="javascript" type="text/javascript">
$(document).ready(function () {
//jQuery code
</script>

How does jQuery affect performance?

You can increase the performance of your web page by including a minified file.

  • What is minified file?

Minified file is something with jQuery-x.x.x-min.js extension. In terms of functionality, there is no difference between the jQuery-x.x.x.js and jQuery-x.x.x-min.js.

jQuery-1.4.4.js file size is 189 KB as against its minified version jQuery-1.4.4-min.js, which is only 86.7 KB in size. So when your page loads in the client’s browser if you are not using minified version, it loads 189 KB file that takes more time to load than 86.7 KB. Hence, by this manner, the performance is increased.

Conclusion

Developers all over the world find jQuery intuitive and easy to learn because its library is built on shorter and simpler code. With simple syntax and open coding standards, developers can shorten the time it takes to deploy an application or site. jQuery also allows pages to be loaded much faster. Google and other search engines use page load time as one of the many factors that affect SEO.

Since jQuery is a major component of HTML5 and is destined to be a huge part of the future of Web development, it is worth the time, money, and effort for developers to learn jQuery. If your goal is, to build a site or Web app that is engaging and interactive, then jQuery is a necessary tool for your toolbox.


AngularJS course details

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close