RSS feed

jQuery is for CSS designers

December 6, 2008

One of the great things about jQuery is how easy it makes JavaScript for web designers who know CSS.  JavaScript isn’t impossible, but it’s verbosity and browser-compatibility issues make it a bear.  jQuery simplifies JavaScript and makes common and even semi-complicated tasks take less time and frustration to develop.

I can’t tell you how many times I’ve been working on a project with jQuery and said to myself, Man, jQuery is amazing! It’s not what jQuery does by itself or with plugins that maks it amazing (though there certainly are some cool built-in features and add-ons), it’s how jQuery works with you.  Instead of fretting over what cryptic JavaScript code you need to fetch a node by it’s ID in order to manipulate it, you can worry about what you’re trying to accomplish.

Learning jQuery’s syntax is like learning a shortcut JavaScript syntax.  And if you know CSS, you’ll be in love at first site.

I won’t go into too much detail about jQuery basics.  You can learn how to install and work with jQuery at the jQuery tutorials page: http://docs.jquery.com/Tutorials .  jQuery has some fantastic docs, though they have had their slow/down days, probably victim to their own success.

The fundamental things to remember are to include your jQ core file first, then plugins and finally your jQ code, which ought to be loaded from an external js file.  You can also write it within <script> tags and even inline, but I wholeheartedly discourage you from using it inline.  Also remember to put all your code within

$(document).ready({

   //your code here

});

Once you understand the basics, you can use jQuery and plain JavaScript to your heart’s content.  The learning curve is ultra quick!  Now how about that CSS fanciness I was talking about?:

Let’s say you want to select a div with an ID of thisID.  In your HTML, it appears as:


<div id="thisID">(content of div)</div>

How would you access that div’s content in JavaScript?


var divContent = document.getElementById(’thisID’).innerHTML;

Not too bad, but look how easy it is in jQuery:


var divContent = $(’#thisID’).html();

And that’s a simple example.  Off the top of my head, I can’t tell you how to access the background color of odd paragraphs with a class of thisParagraph within a div called thisDiv.  But here’s how you do it with jQuery:


var getBG = $(’#thisDiv p.thisParagraph:odd’).css(’background-color’);

How cool is that?!  Honestly?!  If you know CSS, you’ll love jQuery.

Here’s another example:

Let’s say you want to have a paragraph with the ID of bigText increase its text size when a user clicks on it.  Why?  I don’t know, because you’re bored?  It would look like this:


var textSize = 1;
$(’p#bigText’).click(function() {
   textSize++;
   $(this).css(’font-size’,textSize+’em’); // Notice the + for concatenation
});

It’s that simple.

Just about all of your CSS2 selectors work with jQuery.  See the jQuery docs section on selectors for more details.

Sorry I haven’t finished building in comments into this page, but you can leave me a message on my Twitter account: @mccambridge.  Also, I’ll try to post examples of this code in action over the next couple days.

Contact Me

sean@seanmccambridge.com

Twitter: @mccambridge

LinkedIn profile

A LOT OF PEOPLE HAVE ASKED about the background photo on this site. It was taken on the beach by Fort Moultrie on the harbor side of Sullivan's Island, SC. The old, wooden sea wall has been there as long as I've lived in Charleston. The beach is a great place to watch the ships and shrimpers come in and has one of the best views of downtown Charleston.