Use jQuery to teach interactively

jQuery?


jQuery is a javascript library which has for slogan "write less, do more". You can use jQuery to manipulate any html document and create great looking effects with only a few lines of code. The website is jquery.com.

Though alternative frameworks exist, jQuery has become the most popular, due to its ease of use combined with great cross browser compliance and excellent performance. With each release, major performance improvements have been made while keeping the minimized and gzipped version under 20K. It is slowly becoming an unofficial standard as most major web development environments provide out of the box support for jQuery. Google uses it, and even hosts it for you. Dell, Digg, Wordpress, Mozilla and many others use it too. Microsoft is shipping jQuery with Visual Studio. Adobe is shipping it with the latest version of Dreamweaver.

What really makes jQuery unique is its plugin system and the ease there is to extend the core library to provide advanced functionalities. This has encouraged and facilitated community contributions, as shown in the jquery plugins repository. You can find easy to re-use plugins for form validation, galleries, field hints, animation, and pretty much everything as shown on this page. Not just plugins. Over time, a large eco-system has developed around the library, with the availability of tutorials, books, sample code, reviews, etc.

Environments to learn jQuery



Using jQuery


To use jQuery, you need to load the library into the webpage.

If you are connected to the internet, the best way to do this is by loading it from google CDN (Content Distribution Network) that provides very fast loading of the library, faster than your server can. Moreover, as other developers use this service, the jquery library is likely to already be in the browser cache, making it unnecessary to download it again, making for an even better performance.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
To use a less specific version would increase the odds of it already being in the cache. One drawback to consider, howevr, is that when a new version comes out your users will start using it without giving you a chance to do any testing.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Simple Example

Create a file in a text editor or code editor. Name it example1.html. Paste this code. Double click on the html file to open it up in your default browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Example 1</title>
</head>
 
<body>
    <p class="red-paragraph">This is a paragraph</p>
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script language="JavaScript" type="text/javascript">
        $('red-paragraph').css('background-color', 'red');
    </script>
 
</body>
</html>
 
$('p') will select all paragraphs elements on the page, as marked by the <p> tag. $('p').css() will apply some CSS to each one of these elements. Here we set the background-color of the paragraph element to red.


Example 1

This is a paragraph




If you choose to load the jQuery library in the head of the document, you have to make sure to use $(document).ready() construct to make sure that this code gets executed only after the DOM (html document) has been parsed. Otherwise, there is no paragraph yet in the page at the time the css change is applied. More information in this blog post introducing document ready.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <title>Example 1</title>
</head>
 
<body>
    <p class="red-paragraph">This is a paragraph</p>
 
    <script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('.red-paragraph').css('background-color', 'red');
    });
    </script>
</body>
</html>

Publishing jQuery code on the web

  • jsdo.it a community website where you can write, fork, share code that embeds javascript, jquery, html5 and css. A code editor is embedded into the webpage. All you need is to start typing.
  • jsfiddle jsFiddle is an online editor for the web. Javascript libraries like MooTools, jQuery, Prototype, YUI, Glow and Dojo are available to use, and besides them, you can edit and save HTML and CSS snippets.
  • dropbox and droppages Dropbox is a web utility designed for backing up the files on your computer and for sharing files. But it can also be used for hosting simple websites made of nothing more than html, css, and javascript.
  • wikispaces, using other widget. Go to your wikispace and click the TV icon. > Select "Other HTML" > Copy the HTML code from your clipboard. > Click Save to save the widget. > Click Save to save the page. Information provided in this blog post on using jQuery in (wikispaces) addons.

Sites to learn jQuery


Re-using plugins



Using jQuery as an app scripting language



Writing plugins




Related


HTML 5


Get familiar with HTML5!

CSS3