SweetCoding

JQuery Tutorial #2 :: Modifying Elements

Tutorial #2: Modifying Elements
-------------------------------------------------
Thanks for joining me again for another session of JQuery Tutorials with Choco. Today, we'll be learning how to use the matched elements we procured by reading Tutorial #1; if you haven't read that yet, you better!

There are a couple of ways to change elements on a page using JQuery; in fact, there are LOADS of ways. First, you have to understand a few commonly used functions and how they work. By reading this tutorial you'll actually learn a bit more about how JQuery was written to be very, very useful!

---

Wait, what functions?
What functions you ask? Well, there are many, many functions. I'll only be covering a couple. For a complete list, try taking a peek at Visual JQuery, an awesome reference to all things JQuery.

How To Use The Following Functions:
Remember the last tutorial? Well, today, I'll be dealing with this JQuery call:

Code:

 

$("p.text")

What does that return? Yes, all P elements with a class of 'text'. Good. You did read the previous tutorial. Now, what you were probably wondering is what to do with that; it's like being handed a box of chocolates and then sitting down and staring at them. No, today, we're going to teach you how to eat--wait, what? No, we're teaching you how to use the functions.

First you need to have a definition:
Chainability: The ability of an object to sustain multiple function calls, all pertaining to the original object unless specified in the call itself.
Now, you're probably completely confused. Understandable. I was too when I wrote that sentence oh, 5 seconds ago. See, chainability basically means that each time you call a function:

Code:

 

$("p.text").html("This is my innerHTML!")

(By the way, you'll be learning about thehtml function later)
You can keep using it. Yes, that's right. No more multi-line javascript codes!
This is both the reason JQuery is an awesome library AND JQuery is the most confusing library to new users. When they see something like this:

Code:

 

$("p.text").children("[@name~=zoop]").attr("opacity",".5").remove();

They don't understand...it actually means this:

Code:

 


pcol = document.getElementsByTagName("p"); //Find all P elements.
for( var i in pcol ) { //Search through P's
if(pcol[i].className == "text") { //We've found a P.text!
y=pcol[i].getElementsByTagName("*"); // Find all children of this P element.
for(var q in y) { //Search through the children... *yawn*
if(y[q].name&&y[q].name.match(/zoop/i)) { //We've found a child with a name that matches 'zoop'.
y[q].style.opacity=".5"; //Set the opacity of the child.
y[q].parentNode.removeChild(y[q]); //Remove the child.
}
}
}
}


Yes, you read correctly. All of the above code can be simplified to one line. This, my friends, is the power of JQuery. </melodromatic>

Anyway, what I was saying was that this:

Code:

 

$("p.text").html("This is my innerHTML!")

Can be expanded on, as you saw in the above example. Suppose I not only want to change the HTML of all p.text elements to "This is my innerHTML!", but I ALSO want to set their text color to red. You would think that I would have to do this:

Code:

 


$("p.text").html("This is my innerHTML!");
$("p.text").attr("color","red");


But no. This is where the term 'chainability' comes in. I can do this:

Code:

 


$("p.text").html("This is my innerHTML!").attr("color,red");


You see? Any time you modify the element, the function returns the same element! This means you can chain all commands for the same element together...on one line!

This greatly reduces the code required to perform a few simple commands.

Warning: Above I noted, in the definition of chainability, this:

"Chainability"

 

unless specified in the call itself.

What does this mean? It means that you can navigate around the element...on the same line. You'll learn about this a bit down.

A few functions of interest:
1. $("p.text").remove() : Removes all of those elements from the DOM. All P elements with a class name of Text are gone.

2. $("p.text").html("hello") : (italic text optional): Without the italic text, meaning just html(), this function returns the innerHTML of the element. Make sure you're only referencing one element though. WITH the italic text, it sets the HTML to the argument you provide, so now all P elements with a classname of Text have the innerHTML of "hello".

3. $("p.text").attr("attribute","value") : Sets an attribute to the value you provide. So <p class="text"> now becomes <p class="text" attribute="value">.

4. $("p.text").css("property","value") : Changes a CSS value of the element in question. So <p class="text"> now becomes <p class="text" style="property:value;">.

5. $("p.text").slideUp("fast") : Slides the element up with a cool transition. The argument determines the speed of the animaton; fast, slow and medium are supported. Use slideDown("fast") the same way.

6. $("p.text").fadeIn("fast") : Fades the element in. See above for argument. Use fadeOut("fast") the same way.

Other 'functions' of interest:
The reason the word functions is in quotes is because the following do not actually affect the element; they only use the element as a reference. For example, the parent() function.

1. $("p.text").parent() : Returns the immediate parentNode of the element. Returns whatever element is around each <p class="text">.

2. $("p.text").parents("argument 1") : This one is a bit different than parent(), because it returns multiple parents if the argument calls for it. The argument is optional, and it's just a matching expression like those of which we learned in Tutorial #1. $("p.text").parents(".parent") would return all parents of p.text that have a class of "text".

3. $("p.text").prev() OR $("p.text").next() : Finds the previous sibling or next sibling of each p.text element, respectively. Can take an argument for matching, see above and tutorial #1 for instructions.

4. $("p.text").siblings("argument") : Finds all siblings that match given argument of each p.text. Simple enough.

One Last Function
Well, there's one last function I want you to know about. Don't worry, it's quite simple. The end() function.

Here is an example:
Suppose I want to get all P elements with a classname of text. I want to set all of the elements' opacities to .5. Then, I also want to find all children of those elements with a class name of "child". Oh, I forgot. I want to set those children's opacities to .6. Crap, I also forgot -- now I want the P elements again to be removed. How silly of me? :p

Now, you've obviously seen the problem. The last step requires you to write another line calling $("p.text") again, because you've already tried to find the children.
But no! Here's where the .end() function comes in.

Quote:

 

$("p.text").attr("opacity",".5").children(".child").attr("opacity",".6").end().remove();

As should be obvious, the end function brings into focus the first returned element; in this case, $("p.text"). This comes in handy when you're writing complex, multi-statement JQuery codes, which you'll be familiar with soon.

---

Questions
1. Suppose I want to find all children(class name zoop) of all p elements(class name text). I want to remove all of these children and then fade out the P elements. What's the code?
2. I want to find all span elements with a colspan of 3. Then I want to set their text colors to blue, after which it is required that all parents with a class name of "par" are removed. How do I do it?

As always, PM me the answers, or if you don't understand the question, PM me for elaboration.
Enjoy the tutorial, I hope it helps.
-Choco

1. Comment by RyuraGS, Dec 30 2007, 07:55 PM

   Another fine tutorial!

2. Comment by choco, Dec 31 2007, 01:11 PM

   Haha, thanks again.
   It seems some people are having trouble with the second question. Basically, this has to be done:
   1. Find all span elements with colspan=3.
   2. Set their text colors to blue.
   3. Find all parents of those span elements. The parents have to have a class name of "par".
   4. Remove those parents.
   Hope that helps

3. Comment by Viral, Dec 31 2007, 07:55 PM

   Wow, another great tutorial, hopefully I got the answer right :/.

4. Comment by choco, Jan 1 2008, 11:44 AM

   Uh oh, it seems I've made a mistake! You can not attr color, you have to css color. So it can't be:
   $("p.text").attr("color","red");
   It has to be:
   $("p.text").css("color","red");
   Please note that.

5. Add new comment:

   Post Comment