jQuery - SPLessons

Chapter 3

jQuery Get Started

jQuery Get Started

jQuery is a simple and lightweight JavaScript file and one can add this jQuery file into HTML documentation with <script> tag. jQuery Get Started chapter gives clear description of how to download jQuery and install it.

JQuery Download

Initially, jQuery library file is needed and download jquery.js latest version file from www.jquery.com website, or can directly download jQuery library from http://jquery.com/download/.

Two versions of jQuery exists for downloading.

  1. Development version -> This version is “uncompressed” and it is used for testing & development of applications .
  2. Production version -> This version is “compressed” and used for live website.

To use in IE 6-8 browsers, go with jQuery 1.x. Otherwise go with jQuery 2.x

Using jQuery Library

Now, use jQuery in web pages by including the jQuery library file into the web page. Before doing this, first decide on two methods to access the jQuery library file:

  1. Downloading jQuery library from jQuery API and hosting files to local server.
  2. Referencing jQuery at the Google Content Delivery Network (CDN).

Downloading jQuery and hosting files to local server

If chooses to download the jQuery library from jQuery API, download it and now put it on a web server somewhere, so that this jQuery library can be added into HTML page with the script tag.So one of the big benefits of using the CDN is it is possible to get caching benefits because many of the popular sites out there, instead of hosting jQuery locally, will grab it off a Microsoft or Google site. In this case, use the following HTML code.

<head>
  <script src="jquery-1.12.2.min.js"></script>
</head>

jQuery CDN

CDNs (Content Delivery Networks) offers to include jQuery library into HTML page without downloading and hosting on self. Simply give URL of one of available jQuery library.

jQuery can be used from Google or Microsoft by including anyone of the following :

Google CDN

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

Output:

Microsoft CDN

<head>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
</head>

Summary

jQuery Get Started chapter draws out following main points.

  • To include jQuery in project file,use <script>
  • Instead of downloading, CDN’s can be used to improve the performance of page loading.