Frank Perez

Adding / Removing Classes and Attributes Using jQuery

frankperez — Wed, 07 Jul 2010 03:21:42 +0000

Adding and Removing attributes on elements is simple. With jQuery you can easily add or remove classes, add or remove attributes, as well as many more effects. First, as with any jQuery script, you will need to write the document ready function to start using your jQuery functions.

$(function() {
// code goes here
});

Lets say we had some html elements as follows:

This is a paragraph.

If we wanted to add a class to every other p tag we could simply use the selectors while also applying some additional methods. For instance:

$(‘p:even’).addClass(‘evenps’); // adds the class evenps to every other even p element.
$(‘p:odd).addClass(‘oddps’); // adds the class oddps to every other odd p element.

The same would apply if we wanted to remove a class from the p tags.

$(‘p:even’).removeClass(‘evenps’); // removes the class evenps to every other even p element.
$(‘p:odd).removeClass(‘oddps’); // removes the class oddps to every other odd p element.

Lets say we wanted to add specific attributes without using css classes. We could use the attr() method.

$(‘p:even’).attr(‘color’, ‘white’); // this would set the color for the even p’s to white.

You could set any style using the attr method. Not only can you set attributes using this method. You can also get the value of existing attributes.

$(‘p:even’).attr(‘color’); // this would return the value of the attribute color.

Selecting Different Page Elements Using jQuery

frankperez — Wed, 07 Jul 2010 02:34:30 +0000

jQuery makes it easy to reference any element on the page. If we wanted to select all the paragraphs on a page or all the inputs fields on a page the code would be all the same using jQuery. First off you need to remember for all jQuery code, you will be processing it between the document ready function.

$(function() {
// code goes here
});

Lets say we wanted to select all the paragraph elements on a page. You would simply type.

$(‘p’);

The same would apply if we wanted to select all the divs on a page, or all the td’s on a page, and even all the inputs on a page. Any element you want to select on your currently loaded page would be selected using the $();

$(‘p’); // selects all p tags
$(‘div’); // selects all div tags
$(‘input’); // selects all input tags
$(‘td’); // selects all table cells

Lets say you only wanted to select every other paragraph tag. If you wanted to select them starting with even or odd you could do so as follows.

$(‘p:even’); // selects the even p’s
$(‘p:odd’); // selects the odd p’s

You could even select elements based off of id’s, attributes, or even classes. For instance.

$(‘p#tagid’); // selects all p tags that contain the id of tagid
$(‘p.tagclass’); // selects all p tags that contain the class of tagclass
$(‘input[type=text]’); // selects all inputs that have the type=text

If you wanted to select the last or first element from a group of elements you could simply just write.

$(‘p:first’); // selects the first p
$(‘p:last’); // selects the last p

Using jQuery In Your Website

frankperez — Wed, 07 Jul 2010 01:57:00 +0000

For jQuery to work the elements on the page must be ready for it to be manipulated and used. Only once the DOM is loaded is when jQuery can then take effect. In order to start using jQuery we must include two things. One is the latest jQuery file which can be downloaded from the jQuery.com website, or also included directly from the Google code repository. The second thing you need to do is include a standard function that will prepare the browser for our jQuery commands.

The code is

$(document).ready(function() {
alert(‘You have successfully loaded jQuery’);
});

The code above is informing the browser that when the document is ready to run whatever is in between the curly brackets. In this case we used

alert(‘You have successfully loaded jQuery’);

which is a regular JavaScript function that issues a message for the user to see.

There is another way to start jQuery. The shorthand version that is as follows

$(function() {
alert(‘You have successfully loaded jQuery’);
});

The above code will handle exactly the same as the code described previously. It is really up to you to decide which way you prefer. Either way is perfectly acceptable.

Remember that all your code from now on will go within these functions. Without these functions your code will not run.