Introduction to jQuery

jQuery, it is a lightweight Java Script library that accents interaction between JavaScript and HTML.

jQuery, it is a lightweight Java Script library that accents interaction between JavaScript and HTML. It basically separates the behavior characteristics from HTML structure.

We will take a small example below to see how jQuery separates behavioral characteristics from HTML structure.

In conventional programming for assigning click event for button we use the following code.

<input id="Button1" type="button" value="button" onclick="Test1()" />

<script language="javascript" type="text/javascript">

function Test1()

{

            alert("Hi, Button1 clicked me ");

      }

</script>

 

 

In above code, on click of button1 Test1 function will be called.

But with the help of jQuery we can assign the click function for Button1 in runtime as shown below.

<script language="javascript" type="text/javascript">

        $(document).ready(function()

            {

                $("#Button1").click(function() {

                    JQueryClick();

                });

            }

        );

 

function JQueryClick()

        {

            alert("JQuery Clicked me")

        }

</script>

 

 

Instead of directly specifying the on-click event handler in the specification of a button element, jQuery driven page has first identified button element, and then modified its on-click event handler. This concept is also called as Unobtrusive JavaScript.

 

Few keywords:

'$' is used as an 'alias' for the 'jQuery' namespace.

#id

This keyword matches a single element present in the document with the given id attribute. If the id contains characters like periods or colons, we need to escape those using backslashes.

jQuery exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It can be included in any web page by as shown below.

<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

The latest stable versions of jQuery can also be downloaded from http://docs.jquery.com/Downloading_jQuery

Jquery contains the main following features

  • Events
  • Effects and animations
  • CSS manipulation
  • Ajax
  • DOM traversal and modification
  •  Extensibility
  • Utilities - such as browser version and the each function

We will discuss these features one by one in details in next articles.

 

References:

http://jquery.com/

http://docs.jquery.com/Main_Page

 

 

 

By Harry L   Popularity  (1191 Views)