First lets go over the basics of jquery coding. All jquery starts with a “$” no matter what! In all of your jquery documents ( which is just a javascript file) you need the following code in your document, this code is to load your functions if you do not add this code your jquery will be useless.

$(document).ready(function() {
// all of your code goes here
});

What that code does is simply load all of your functions quickly, without slowing down your page it is only in jquery. For everyone that knows a little about javascript you probably know the “window.onLoad()” function, it does the same thing as “$(document).ready(function() {” but it waits until the entire page finishes loading then it loads in the javascript. This makes your javascript very slow especially if you have large images, the jquery code loads all of the javascript once all of the important stuff has loaded. Like the HTML and CSS structure, which means your javascript are now the coolest kids on the block.

Now that we have that out of the way let us go over calling classes and whatnot, look here:

$('.comments')

All this does is find all of your content inside the CSS class “.comments” , if your replaced the ‘.comments’ with something like ‘p’ jquery would find all of your paragraphs. Same thing for CSS id’s just use a “#” instead of a dot.
So now lets build on our code, let’s add a CSS class to everything inside inside “.comments”. Call it stripe, and it would add a background of a light grey or something. Also note that I am referring to comments in wordpress.

$('.comments').addClass('stripe');

Now all of our comments have a background of a light grey, so now lets make our comments striped like a lot of wordpress comments. Since the comments are in a list lets take advantage of that.

$('.comments:odd').addClass('stripe');

Now this will apply the “stripe” class to every other comment, making our comments striped =). Haha I like how I doubled this tutorial to tell you how to stripe your comments.

You now know how to find a class, id, or HTML elements using jquery and add a class to it. You can also replace “.addClass” with “.removeClass” to of course remove classes from your selected elements. What about highlighting comments oMouseOver?

$('.comments').mouseOver(function() {
$('this').addClass('hover');
});

“$(‘this’) refers back to the last “$(”)” which in this case would be “.comments”, so then the mouse over event adds a function that just says to add the class “hover”. Of course this function would only happen when someone triggers the .mousOver event (when someone hovers over a comment). Obviously the “hover” class would do something like add a new background color or a border, you choose. Although this looks promising we cannot leave the code like this, because then when someone hovers a comment it will not simply remove the “hover” class when they move their mouse away it will stay there. Let’s fix that!

$('comments').mouseOut(function() {
$('this').removeClass('hover');
});

Don’t you just love how easy and short jquery is? The really cool thing is that we are going to chain the .mouseOver and .mouseOut events togethor to make it even shorter. This little trick can be kind of confusing at first, I did not feel comfortable chaining code when I first started jquery. Here it is:

$(".comments").mouseover(function() {
$(this).addClass('hover'); })
.mouseout(function() {
$(this).removeClass("over");
});

Now the code is even shorter! I’m guessing you are pretty much in love with jquery right about now so I will leave you two love birds some alone time. I’ll be back with another fabulous article on learning jquery, and this time it’s on animations and all that fun stuff.

An easy to use jQuery Tabs plugin

jQuery plugin development note – the main application object Over a period of time, I developed a system for developing jQuery plugins . I create a DIV block whose role is being the plugin application placeholder. This placeholder is usually added by the web developer to a location on their webpage where they want that plugin to be displayed. This makes plugin development easier. Defining the jQuery tabs plugin application object:

// Define the application placeholder for jQuery tabs
// The plugin will take care of the rest
<div id = "MyTabbedView"></div>

The plugin’s jQuery object will take the id name of the main application object, which in this case is MyTabbedView. The code will take care of writing the internal display into this application area by itself, so there is no need to write any additional HTML. Note that while the code is working properly, this is a tabbed view example that is limited to one tabbed view area per one initialization call by design. It would be possible to consolidate this code by providing an initialization interface that takes multiple div fields and builds multiple tabbed views on a single web page. Like with other plugins I had written for Authentic Society, this trivial task is up to the web developer implementing my plugin code on their own sites. Now that we have defined the main application object MyTabbedView, it’s time for the next step. Let’s create some content for our tabbed view pages:

// Create 3 pages, each id must be unique
// These id's are conveniently passed to the plugin's initialize function later
// You may place any content you wish into these blocks
<div id = "Page1">Page 1<br/>Description of jQuery Tabs plugin</div>
<div id = "Page2">Page 2<br/>How to use this plugin</div>
<div id = "Page3">Page 3<br/>Download plugin</div>

Initializing and Executing the jQuery Tabs plugin

<script type = "text/javascript">
    // initialize plugin code
    $(document).ready(function() {
 jQuery.Tabs.initialize( "MyTabbedView","300px", "150px",['Description', 'How to Use', 'Download'],                               ['Page1',       'Page2',      'Page3'] );
    });
</script>

We pass the main application placeholder MyTabbedView 

to the plugin Tabs.initialize function. We then pass the horizontal 

and vertical dimensions of our tabbed view respectively: 300px and 150px.

 We then pass two arrays of strings. The first array indicates tabs' names.

 The second array indicates the id's of the pages the tabs link to. 

If you wanted to create more than three tabs, simply extend both of the 

arrays in the same way as demonstrated in the code above, and don't forget

 to specify additional pages with unique id's (Page1, Page2, ... Pagen).

 Final words A tabbed view interface can provide a convenient way to display

 associative information in one place. This jQuery plugin creates a tabbed view 

by taking the minimum parameters required. This plugin can be further improved by 

providing an interface to create multiple tabbed views on one page, but I'll leave 

that up to you. jQuery once again shows how easy it can be to create something as

 complex as a tabbed view with just a few lines of code! Click to see this plugin

 in action: