As part of my effort to put more technical content onto my blog, I’ve decided to break my current talk “jQuery From The Ground Up” into a blog series. My goal here is to go into a little bit more in depth, and try to answer any questions that typically come up during my talk.
- What Is jQuery?
- Getting jQuery
- Setting Up jQuery
- What’s a Selector?
- Doing Something Useful
- jQuery UI
- Plugins, Plugins, Plugins
Getting Your Hands On jQuery
This is the easy stuff. You want to use jQuery, but you don’t have any idea where to get it. Point your web browser of choice to http://www.jquery.com. You should be welcomed with a page like this:
You’ll notice there are two buttons on the screen that say “Download”. The first one is at the top of the screen, and the second one is in the bottom right hand corner of screenshot. Right now, we’re interested in the big “Download(jQuery);” button. Clicking that will yield one of two download types.
Downloading the production version of jQuery will result in a “minified” version of the file. This means you don’t have the luxury of nicely formatted code, comments, and overall readability. Only use this version if you’re going to production, and you’re not planning on touching the jQuery source.
The development version of jQuery is useful for most shops. If you’re interested in being able to read the jQuery source, everything in this file is fully commented and formatted for easy reading. The larger file size makes it not recommended for production environments.
Once you’ve downloaded the single .js file, you’re ready to go. In the next section, we’ll discuss actually bringing jQuery into your web pages.
This is also a good time to stop and discuss the jQuery documentation. To put it simply, it’s awesome. The important thing to remember is that you’re not going remember everything about jQuery. Every time I sit down to work with jQuery, I have the documentation open and ready to use.
Everything you can do in jQuery can be narrowed down into 11 different categories:
- jQuery Core
- jQuery UI
Let’s say, for example, I wanted to wire up a click event for an element on my page. If I looked under “Events”, I would find the click event waiting for me. If you go to the documentation for the click event, you’re given a useful and straight forward look at what it does and how to use it.
Every documentation page gives you an easy, full source code example. Not only that, but underneath the code is a working version of the code in action. Use this to your advantage, and you’ll be up and running with jQuery in no time!
Visual Studio 2008 Intellisense
Wait no longer! Around the time ASP.NET MVC was coming down the pipe, Microsoft announced full support for jQuery Intellisense. If you’re starting an MVC application, you get the Intellisense right out of the box!
But what if you’re working with an older version of jQuery or web forms application! Fear not! Point your browser to http://docs.jquery.com/Downloading_jQuery (or click the smaller “Download” button at the top of the jQuery page. Scroll down, and you’ll notice:
The “Visual Studio” documentation files only need to be dropped into the same folder as your jQuery.js file. If it doesn’t work out of the gate, you might need to install the following hot fix at http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736.
Explore the documentation and get a good hold on what it can do for you. Learn the names of some methods and event you would likely use on a regular basis. In the next article, we’ll look at setting jQuery up in your applications. Enjoy!