jQuery - Write Less Do More

The significance of interactive web design has been more perceptible these days. JavaScript, VB Script, ASP.net and many other scripting languages are used heavily across the Internet to remain sites out of the ordinary. 

JavaScript: 

"JavaScript is an open source scripting language used to improve user interfaces and lively websites". It is tremendously admired and has been used for web development for years. Its popularity can be attributed to speed, simplicity and versatility. 

Compared to other programming and scripting languages, JavaScript is quite easy to learn and implement in new or existing websites.

JavaScript is compatible with other programming languages and can be added in a webpage despite of its file extension (.HTML, PHP, etc.). It can even be placed inside scripts written in other languages such as Perl and PHP. This flexibility is hard to find anywhere else in the web development world.

Though JavaScript is considered comparatively easy, it remains out of reach for developers who rely mostly on HTML and CSS for their web designs. Additionally, there are some cross browser issues with conventional JavaScript that require you to write cross browser compatibility code in addition to the functions your website actually needs.

jQuery: 

“jQuery is high-speed, lightweight and feature-rich client side JavaScript Library/Framework which helps in to traverse HTML DOM(document object model), make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect.” 

  

It was released in January 2006 at BarCamp NYC by John Resig. Many people get confused between JavaScript and jQuery. Let me clarify that , JavaScript is a language and jQuery is JavaScript library. It means certain set of code is written and grouped and treated that group as a library. It's like a Box which contains JavaScript code in it.

Why jQuery?

 The problems with JavaScript can be solved using jQuery. Here are some advantages :

• Easy to use and learn.
• Easily expandable.
• Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
• Easy to use for DOM manipulation and traversal.
• Large pool of built in methods.
• AJAX Capabilities.
• Methods for changing or applying CSS, creating animations.
• Event detection and handling.

How can I use jQuery?

To use jQuery in your web page you need to add the reference of library to the page. There are two way you can add the reference:

1. Download the jQuery library from jquery.com and add it to your website.

Ex: <script src="~/Scripts/jquery.validate.js"></script>

Scripts is a folder in your website where you have kept library file jquery.validate.js

2. You can add the reference in another way which saves your requesting time of the library. It can be done by CDN(Content Delivery Network).

A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. 

There are 3 popular jQuery CDNs.

1. Google.

2. Microsoft

3. jQuery.

Advantage of using CDN :

• It reduces the load from your server.
• It saves bandwidth. jQuery framework will load faster from these CDN.
• The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN

    Ex:   <script type="text/javascript"

 src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js">

      </script>

Once you add the reference the code then you can start writing code.

You need to write the code in document.ready.

$(document).ready(function () {

  // This makes sure that your code is executed after your complete DOM elements are loaded.

  // Write your jQuery methodshere...
 

});

Let me put it in a diagram so that it would be easy to remember.

Simple jQuery Idea

When we implement jQuery on the DOM or the HTML composition of the webpage, we use the term “jQuery” or a “$” sign to bind a DOM element to the current action.

In below code i have a textbox with id = txtName, this id is used to fetch the DOM of text box so that it can be manipulated. We call it as a selector there are different selectors.

Once i have the selector then is use jQuery to get the control.ie  $('#txtName').val("Ram"); or it can be written in this way also jQuery('#txtName').val("Ram");

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>jQuery - Write Less Do More</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>  

<script type="text/javascript">

   $(document).ready(function () {

    
     // This function will be called once the input texbox DOM is generated.

    function setMyName() {

         $('#txtName').val("Ram");  //Syntax - I will cover syntax in details in next post.

         // Once page is loaded then you will see the text "Ram" in  the textbox.

            }

        });

    </script>

</head>

<body>

    <div id="mainDiv">

        <input type="text" id="txtName" />  @*//Its value will be set using jQuery*@

    </div>

</body>

</html>

There are many selectors, events and effects in jQuery. We also have Ajax functionality using jQuery. I will be covering these points in upcoming posts.

Hope this helps.!

Thanks,

Ram