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.
// code goes here
Lets say we wanted to select all the paragraph elements on a page. You would simply type.
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