Archive for the ‘jQuery From The Ground Up’ Category

1. jQuery From The Ground Up: Part II – Getting jQuery

   Posted on October 23rd, 2009 by Kevin

   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.

   1. What Is jQuery?
   2. Getting jQuery
   3. Setting Up jQuery
   4. What’s a Selector?
   5. Doing Something Useful
   6. jQuery UI
   7. 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.

   Production

   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.

   
   

   Development

   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.

   jQuery Documentation

   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
   • Selectors
   • Attributes
   • Traversing
   • Manipulation
   • CSS
   • Events
   • Effects
   • Ajax
   • Utilities
   • 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

   If you’re like me, you use Visual Studio.  If you’re like me, you love Intellisense.  While Visual Studio already has some support for JavaScript Intellisense, wouldn’t it be nice if Visual Studio gave you the same support for jQuery!

   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. 

   Wrapping Up

   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!

   

   

   

   

   

   

   

   

   

   

   

   

   

2. jQuery From The Ground Up: Part I – What is jQuery?

   Posted on October 21st, 2009 by Kevin

   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.

   1. What Is jQuery?
   2. Getting jQuery
   3. Setting Up jQuery
   4. What’s a Selector?
   5. Doing Something Useful
   6. jQuery UI
   7. Plugins, Plugins, Plugins

   ---

   What is jQuery?

   Excellent question, thanks for asking!  jQuery is JavaScript Library.  Typically in my talk, I ask a series of questions of the attendee’s.

   1. How many people are web developers?
   2. How many people use JavaScript?
   3. How many people ENJOY using JavaScript?

   There are a rare few that keep their hands raised after I ask question 3.  Those people are crazy, if you ask me.  JavaScript is HARD!  Why would we want to torment ourselves by trying to do so much work in JavaScript?  jQuery solves a lot of our problems.

   Simple things, like traversing the DOM, is difficult to do in pure JavaScript.  Even if we were able to write our own solution, it wouldn’t be very efficient.  With more and more applications moving to the web, we need to worry about efficiency and speed.  jQuery’s main selling point is it’s raw speed.  Want to add a class to all the <p> tags on your page?  jQuery can handle it with no issues.  Want to animate a page transition?  No problem!  jQuery has that functionality built in!

   Who Uses jQuery?

   This is a fun question to answer.  jQuery proudly boasts the following companies on their site as users of jQuery:

   • Google
   • Dell
   • Bank of America
   • Major League Baseball
   • Digg
   • NBC
   • CBS
   • Netflix
   • And more!

   What does this tell you?  Major companies, several with large online presences, are using jQuery.  Take NetFlix for example.

   

   Mousing over a movie title will pop up with more information.  jQuery offers these amazing effects with little effort required.  Try to do this with traditional JavaScript.

   I’m ready to go?  Now what?

   In the next several articles, I’m going to walk you through everything you need to know in order to get started learning jQuery.  I’m going to assume you have NO experience with JavaScript, but you have an idea of what I’m talking about when I write HTML and CSS.  An understanding of CSS is key to using jQuery.

   Get started for yourself.  Go to http://www.jquery.com and look around.  Lot’s to see and learn.

   Enjoy the series.  Ask questions.  Experiment.  Have fun!