menu

Thursday, November 20, 2014

Introduction to JQuery

Introduction:

     JQuery is a well known JavaScript library that helps to develop rapid applications with the help of the large library involves in it. You can download the JavaScript file of JQuery or can use it with a CDN that means you just use the JavaScript file hosted on the network. We'll use JQuery with CDN at our examples. Just go to the http://jquery.com/download/ page and use the latest release's CND which is "<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>" at the time of this writing. When you use CDN your visitors previously downloaded a copy of the same CDN can reuse it without downloading it again. You can also use other CDN providers like google and microsoft. We see using google CDN in our example.

Example:

     In the below example, I show both the standart JavaScript syntax and the syntax of JQuery with which you define a function on a html element in the $(document).ready(function() { ... }; without calling the onClick of that element. Here we define a myLink_onClick() function for the myLink html element and call that function with onClick property of the element. On the other hand, with the JQuery we just define $('#myLink').click(function() { ... }); in the ready function and no need to call onClick anymore. We have a text, a button and a link in the example, when you click on link the text set with the "val("")" syntax of the JQuery. Also when you click on button both link click methods are fired. The run order of the methods is first the old JavaScript method and then the new JQuery method if you click on the link. However if you fire the click of link with the button's click, the order is reversed.

<html>
 <head>
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- for google CDN use
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
-->
 <script>
   $(document).ready(function() {
     $('#myLink').click(function () { 
         alert('myLink_click');
        var myText = $('#myText');
        myText.val('test');
         return true;
     });   
   $('#myLinkReset').click(function () { 
  var myText = $('#myText');
        myText.val('');
         return true;
     }); 
   });
   function myButton_onClick() {
         alert('myButton_onClick');
         $('#myLink').click();
   }
   function myLink_onClick() {
         alert('myLink_onClick');
   }
  </script>
 </head>
 <body>
   <input type="text" id="myText">
   <br/>
   <input type="button" id="myButton" onClick="myButton_onClick()" value="click me">
   <br/>
   <a id='myLink' href='#' onClick="myLink_onClick()"> click me </a>
   <br/>
   <a id='myLinkReset' href='#' > reset </a>
 </body>
</html> 

The screen will look like the following.


Introduction to JQuery
Figure 1

Introduction to JQuery
Figure 2

Conclusion:

     With the help of JQuery you can develop faster applications. It is easier to develop applications since it has a large library. JQuery also has ajax support.

You can download the source code from here.

No comments:

Post a Comment