Selecting Different Page Elements Using jQuery

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

Post By: Frank Perez | Add to favorites