jQuery - making it easy - basic manipulation - Part 1

Over the last couple of weeks I have been doing alot of work on a UI for client/matter conception application at my work involving javascript and the almight framework jQuery. I have done a couple of posts in relation to jQuery before:

Also my 1st ever patch to subtext project uses jQuery.

After receiving countless emails about some of the above I thought I would post a couple of articles to outline how jQuery can make any developers life easier. This post is aimed at developers who haven’t looked at jQuery before or people who want quick and easy examples. This is a very basic article and I will be going into more depth of the fQuery framework over the next couple of months.

How I am going to do this is show the javascript equivalent and the jQuery statement. Worst case is you walk away from reading this article knowing how to manipulate html elements. If you’re doing any manipulation to the dom it’s always worth putting in validation to make sure the element exists. Also note that the object that’s being passed to the function is the elements Id.

This first part will compare the following:

Show/Hide an element
Toggle an element
Adding a css class to an element
Removing a css class from an element
Adding them together

show/hide an element – Javascript

function HideElement(object)
{
document.getElementById(object).style.display = ‘none’;
}

function ShowElement(object)
{
document.getElementById(object).style.display = ‘block’;
}

show/hide an element – jQuery

function HideElementjQuery(object)
{
$(‘#’ + object).hide(‘fast’);
}

Usage: <a href=”#” onclick=”javascript:HideElementjQuery(‘objectid’);”>Click Me</a>

function ShowElementjQuery(object)
{
$(‘#’+ object).show(‘fast’);
}

Usage: <a href=”#” onclick=”javascript:ShowElementjQuery(‘objectid’);”>Click Me</a>

Thoughts on show/hide an element

While both are straight forward you’ll notice that on the jQuery functions there is a “show(‘fast’)”. jQuery gives the developer options to play with. This can be the speed in which the object is hidden or shown, it can also be the effect you’d like to use when it appears and disappears. More information can be found UI/Effects – jQuery.

Toggle an elements display property – Javascript

function toggleElement(object)
{
    if(document.getElementById(object).style.display != ‘none’)
        {
            document.getElementById(object).style.display = ‘none’;
        }else{
            document.getElementById(object).style.display = ”;
        }
}

Toggle an elements display property – jQuery

function toggleElementjQuery(object)
{
$(‘#’ + object).slideToggle(‘slow’);
}

Usage: <a href=”#” onclick=”javascript:toggleElementjQuery(‘objectid’);”>Click Me</a>

Thoughts on toggle an elements display property

Straight away you see a reduction in code here. How simple is that. jQuery does the checking for you and dictates what state the object should be in.

Adding a css class to an element – Javascript

function addcssclass(object,cssclass)
{
document.getElementById(object).setAttribute(“class”,cssclass);//For FF
document.getElementById(object).setAttribute(“className”,cssclass);//For IE
}

Adding a css class to an element – jQuery

function addcssclassjQuery(object,cssclass)
{
$(‘#’+object).addClass(cssclass);
}

Usage: <a href=”#” onclick=”javascript:addcssclassjQuery(‘objectid’,’cssclass’);”>Click Me</a>

Thoughts on adding a class to an element

Again another reduction in code and jQuery takes away the worry of what browser the user is using and adds the class. Another flaw with the javascript code is that if the object had a css class by default then this is removed and the new one assigned. jQuery adds to any css classes that may already be assigned to the object. If we added a method to check for existing css classes and to add our new class then we’d run into may more lines of code that would have to be cross browser compatiable.

Removing a css class from an element – JavaScript

function removecssclass(object,cssclass)
{
document.getElementById(object).removeAttribute(“class”,cssclass);//For FF
document.getElementById(object).removeAttribute(“className”,cssclass);//For IE
}

Removing a css class from an element – jQuery

function removecssclassjQuery(object,cssclass)
{
$(‘#’+object).removeClass(cssclass);
}

Usage: <a href=”#” onclick=”javascript:removecssclassjQuery(‘objectid’,’cssclass’);”>Click Me</a>

Thoughts on removing a class from an element

As with adding a css class jQuery has taken away the worry of what browser the user is using.

Adding them together

This I am going to add a class while toggling the elements display property.

function ToggleAddClass(object,cssclass)
{
$(‘#’+ object).slideToggle(‘slow’).addClass(cssclass);

}

Usage: <a href=”#” onclick=”javascript:ToggleAddClass(‘objectid’,’cssclass’);”>Click Me</a>

function ShowElementRemoveClass(object,cssclass)

{

$(‘#’+ object).show(‘fast’).removeClass(cssclass);
}

Usage: <a href=”#” onclick=”javascript:ShowElementRemoveClass(‘objectid’,’cssclass’);”>Click Me</a>

Thoughts on adding them all together

As you can see from the above piece of code all that’s needed is to add the effects needed to the object.

Final Thoughts

This post outlines the tip of the iceberg but as you can see one liners can do so much without having to worry about what browser is being used, or having to write long complicated functions. Part will be looking at input Element Manipulation and validation.

jQuery – making it easy – basic manipulation – Part 1

show/hide an element – Javascript