I received email’s stating that I missed some of the way’s you can select elements. I was going to introduce the others as I continued this tutorial. But, you asked for it! So in this article, I’ll give you every other way I know to select element’s with JQuery.
Selecting Element’s with JQuery
You would place the following, inside of the JQuery selection tag’s $(). If some of these don’t make sense I’ll provide further example’s below.
Selecting Element’s Based on Position on the Webpage
Selecting Form Elements
On to the Code Example’s
Just like in the last article, I’ll provide you with the working code.
<html>
<head>
<title>JQuery Example</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>
Here I open up my html page and then link to the JQuery library.
<style>
p.third {
font-weight: normal;
}
p.styleSample {
font-weight: bold;
text-decoration:line-through;
text-transform:uppercase;
}
a.email {
background: url(http://www.newthinktank.com/images/email-icon.gif) no-repeat right top;
padding-right: 20px;
}
.tableAlt {
background-color: #F5F5DC;
}
.tableTitle {
background-color: #3D2B1F;
color: #FFF;
font-weight: bold;
}
</style>
Here I create a whole bunch of CSS Style definition’s that I’ll use below. If you don’t understand this, see my CSS Style Tutorial.
<script type=”text/javascript”>
window.onload = function() {
document.getElementById(‘oneButton’).onclick = addEmailIcon;
document.getElementById(‘twoButton’).onclick = makeTablePretty;
document.getElementById(‘threeButton’).onclick = fixTableTitle;
document.getElementById(‘fourButton’).onclick = messUpP;
document.getElementById(‘fiveButton’).onclick = messAllPInDiv;
document.getElementById(‘sixButton’).onclick = highlightFourth;
document.getElementById(‘sevenButton’).onclick = findAttribute;
document.getElementById(‘eightButton’).onclick = findPThird;
};
Here I assign onclick event handler’s, as soon as the web page loads, to all of the button’s below and state which function should be called when that event is triggered.
For example, if someone clicks the button with the id name oneButton below, it’s onclick event handler will be triggered and the function addEmailIcon will be called. The html code for the button I referenced looks like this:
<button type=”button” id=”oneButton”>Add Email Icon</button>
function addEmailIcon() {
$(‘a[href^=mailto:]’).addClass(’email’);
}
Here I’m looking for any link’s that exist that have a value that begin’s with “mailto:”. When I find one I change it’s class to the email class that will place an email icon in the background. The email class looks like this:
a.email {
background: url(http://www.newthinktank.com/images/email-icon.gif) no-repeat right top;
padding-right: 20px;
}
function makeTablePretty()
{
$(‘tr:nth-child(even)’).addClass(‘tableAlt’);
}
This code will search all table’s that exist and change those row’s to the class tableAlt. If I wanted to change the odd numbered rows I would type instead $(‘tr:nth-child(odd)’)
function fixTableTitle()
{
$(‘tr:nth-child(1)’).addClass(‘tableTitle’);
}
Here I’m choosing to change the class of every 1st row, in every table on the web page. There are numerous ways to change children elements inside of any parent element, as you can see.
function messUpP()
{
$(‘p’).eq(3).toggleClass(“styleSample”);
}
Here I tell the browser to find the 3rd paragraph on the web page and change it’s class.
function messAllPInDiv()
{
$(“div > p”).toggleClass(“styleSample”);
}
This code changes the class for every paragraph element that lies in a div element, on the web page.
function highlightFourth()
{
$(‘p:contains(“Fourth”)’).css(“color”, “yellow”);
}
Here we look for the text “Fourth” inside of every paragraph element. If we find that word, I change the attribute of that element so that the text color equals “yellow”.
function findAttribute()
{
$(‘p[align]’).css(“font-style”, “italic”);
}
Here I’m searching for element’s that have the attribute align assigned some value. If I find one I then assign the change listed.
I could also search for element’s that have an attribute assigned with a specific value. If I was looking for a paragraph element with the attribute align assigned the value of left I would do the following:
$(‘p[align=”left”]’)
function findPThird()
{
if($(‘#third’).is(‘p’)){
alert(“I found the paragraph named third”);
}
}
I’m looking here for an element that has the id name of ‘third’. If I find it I then check if that element is a paragraph element. If both check out, I pop up an alert box that states that fact.
The rest of the code is straight HTML, so you’ll understand it. If not see my HTML Tutorial.
</script>
</head>
<body>
<div><h2>Playing with Paragraphs</h2></div>
<table border=”1″ cellpadding=”5″>
<tr>
<th>Sat</th>
<th>Sun</th>
<th>Mon</th>
</tr>
<tr>
<td>Played Ball</td>
<td>Watched Football</td>
<td>Worked</td>
</tr>
<tr>
<td>Worked</td>
<td>Went to Church</td>
<td>Worked</td>
</tr>
<tr>
<td>Time with Wife</td>
<td>Went Hiking</td>
<td>Worked</td>
</tr>
</table>
<div>
<p id=”first”><a href=”mailto:derekbanas@newthinktank.com”>Send me an email</a></p>
<p id=”second”>Second Paragraph</p>
<p id=”third”>Third Paragraph</p>
<p id=”fourth”>Fourth Paragraph</p>
<p id=”fifth” align=”left”>Fifth Paragraph</p>
</div>
<div>
<p id=”sixth”>Sixth Paragraph</p>
</div>
<form>
<button type=”button” id=”oneButton”>Add Email Icon</button>
<button type=”button” id=”twoButton”>Make Table Pretty</button>
<button type=”button” id=”threeButton”>Fix Table Title</button>
<button type=”button” id=”fourButton”>Mess up 4th P</button>
<button type=”button” id=”fiveButton”>Mess All P in Divs</button>
<button type=”button” id=”sixButton”>Highlight Fourth</button>
<button type=”button” id=”sevenButton”>Find p with Attribute</button>
<button type=”button” id=”eightButton”>Find p Named third</button>
</form>
</body>
</html>
Leave a Reply