How to use jQuery?

Introduction:

jQuery is not a language, but it is a well written JavaScript code. It is fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. In order to work with jQuery, you should be aware of the basics of JavaScript, HTML and CSS.

Why jQuery:

  • It helps to improve the performance of the application.
  • It helps to develop most browser compatible web page.
  • It helps to implement UI related critical functionality without writing hundreds of lines of codes.
  • It is extensible – jQuery can be extended to implement customized behavior.
  • No need to learn fresh new syntaxes to use jQuery, knowing simple JavaScript syntax is enough.

How to use jQuery?:

  • jQuery JavaScript file can be downloaded from jQuery Official website.
  • To load jquery file
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

Load jQuery from CDN:

A jQuery file can be loaded from Google CDN. You will need to keep the following tag in your page.

<script type="text/javascript" language="Javascript" 
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

How to load local jQuery file when CDN is not available:

<script src="https//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> window.jQuery || document.write('<script src="/scripts/jquery.1.10.2.min.js"><\/script>')</script>

How to execute jQuery code?:

  • As and when page loads, execute the jQuery code:
<script language="javascript" type="text/javascript">
$(function () {
$("#div1").css("border", "2px solid green");
});
</script>
  • 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 () {
$("#div1").css("border", "2px solid green");
});
</script>
References:
http://jquery.com/

More Related Articles