jQuery Resources
    11/15/11

The holy grail for jQuery, like PHP, is not in question—it's jQuery.com. We'll start there, then take a look at How jQuery Works, and walk through a version of a tutorial there. Note that there are several parts of the site with tutorials, not always in obvious places. Also take a look at the about video with the guru, John Resig, which describes the jQuery Project (jQuery.org).

Start with the Cheat Sheet handout from a Poynter/NewsU course I took.

jQuery is a library of JavaScript code that references objects by tags $('a'), CSS classes $('.fred') and ids $('#book'). Note that the $ is a shorthand for jQuery, e.g. jQuery('a'). When in doubt, use the full syntax, but also start noticing where $ is used. (The issue is whether it is understood locallay, i.e. inside a jQuery statement vs. globally.) Because it's all built on JavaScript, the <script> element is used and file extensions are .js.

One place to get a feel for what the code looks like is the demos page, then the How jQuery Works fade tutorial:

That should result in the demo shown at the top of this page. My demo page also contains a menu demo from Apycom that I'll link to again in the list below. Note that this example links to the Google API for the jQuery library. Your first decision is whether to do that, or whether to download a local version from jQuery or elsewhere. Keep an eye on which version different demos use—they won't all be the same, as a lot are minimized versions intended to decrease page weight.

Generally you will link to <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
or load <script type="text/javascript" src="jquery.js"></script> the jQuery library first, then second, write or add a custom JavaScript file for the particular functionality that calls functions from the library. Note even here that this script element loads the jQuery that comes with the Apycom menu (jquery.js) whereas the one I posted above is jquery-1.4.2.js.

Third, either in that script or elsewhere (often at the end of the <body> element to ensure that the DOM has been crawled) you need to call the library with the .ready method before you run the function(s):

 <script type="text/javascript"> 
jQuery(document).ready(function($) {
jQuery('li>ul>li').hide();  });
</script>

 

I'll also build some files that we can practice with based on the Sitepoint course that I took. Unlike John Allsopp's CSS3, these videos are not on YouTube. I suggest you enroll there at Learnable.com for a month ($17) and try these lessons, plus some PHP, etc. For now, we will look at versions of some basic ideas that any course like that would cover.

Finally, here are some more resources, including libraries and free demos:

  1. jQuery UI, a library of jQuery widgets (built on the jQuery JavaScript library) and try the Date picker, and look at Theme Roller; here's my demo with a different theme
  2. jQuery Mobile, built on both jQuery and jQuery UI, using HTML5 and CSS3
  3. jQTouch, a plug-in for Andriod and Apple mobile devices
  4. Firebug lite so that we can run jQuery live through the Console (This is the link: 
    <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
  5. Apycom.com which should be a first stop for drop-down menus (free to non-commercial users)
  6. The site for John's resume design, and lots of other stuff including CSS3, Codrops
  7. Galleriffic, a jQuery widget that I wrestled part-way here
  8. Another gallery at Webresourcesdepot (others vouched for it)
  9. qTip, a potentially useful set of tooltip widgets (includes non-CSS speech bubbles) with my demo
  10. Podcasts from yayQuery, which included a lot of cool stuff (note they now endorse Sencha for HTML5/CSS3/JQuery mobile development

 

 

Back to home page