JQuery & AJAX : Selecting & Editing Pt 2

Posted by on May 21, 2010 in AJAX What Is It | 0 comments

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.

  • * : Matches any element
  • x : Matches all elements with the tag named x
  • x y : Matches all children elements with the tag y, that lie in the element x
  • x > y : Matches all children elements with the tag y, that are direct children of element x
  • x + y : Matches all elements of tag y, that are immediately preceded by  sibling x
  • x~y : Matches all elements of tag y, that are preceded by sibling x
  • x:has(y) : Matches all elements of tag x, that contain an element of type y
  • x.y : Matches all elements of type x, that have a class name of y
  • x#y : Matches all elements of type x, with an id of type y
  • x[y] : Matches all elements of type x, with an attribute y, that can have any value
  • x[y=z] : Matches all elements of type x, with an attribute of type y, that have the value assigned to z
  • x[y^=z] : Matches all elements of type x, with an attribute of type y, that begins with the value assigned to z
  • x[y$=z] : Matches all elements of type x, with an attribute of type y, that ends with the value assigned to z
  • x[y*=z] : Matches all elements of type x, with an attribute of type y, that contains the value assigned to z
  • x:contains(text) : Matches all elements of type x, that contain the text string entered

Selecting Element’s Based on Position on the Webpage

  • x:first : Returns the first element of type x
  • x:last : Returns the last element of the type x
  • x:first-child : Returns the first child contained in the element x
  • x:last-child : Returns the last child contained in the element x
  • x:nth-child(y) : Returns the y child of the element x. y could also be a mathematical formula, that has a number as a result.
  • x:nth-child(even|odd) : Returns all even or odd elements of the element x
  • x:eq(y) : Returns the y element with the tag x, on the web page
  • x:gt(y) : Returns all element’s that lie after y on the page
  • x:lt(y) :  Returns all element’s that lie before y on the page

Selecting Form Elements

  • x:animated : Returns element’s that are animated
  • x:button : Returns element’s that are buttons
  • x:checkbox : Returns element’s that are checkboxs
  • x:checked : Returns element’s that are checked
  • x:header : Returns element’s that are headers ex. <h1>, <h2>, etc.
  • x:hidden : Returns element’s that are hidden
  • x:image : Returns element’s that are images
  • x:input : Returns element’s that are form elements
  • x:parent : Returns element’s that have children elements
  • x:password : Returns element’s that are of type password
  • x:radio : Returns element’s that are radio buttons
  • x:selected : Returns element’s that are selected
  • x:text : Returns element’s that are of type text

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

Your email address will not be published.

Google+