Join Joe Marini for an in-depth discussion in this video Looking up elements with $(), part of Prototype and script.aculo.us Essential Training.
Let's start by talking a look at how the dollar sign function makes the life of the web developer a lot easier. So I'm going to open up the sample files. And I am going to go ahead and open up the IDSelector_start file. And that's a starting point for this example and the _finished version is the finished one. So you can go ahead and look at that if you are interested in or you can follow along with me. So I am going to open up the start file. And you can see here that what we essentially have is an HTML file that contains an unordered list with some list items and some paragraphs.
So I'll just include that, okay. So now I am going to write a script that's going to run our example. So using the familiar document.observe function that we used earlier, I am going to look for the dom:loaded event and we have a function that's going to run when the dom gets loaded. So here is what we are going to do. We are going to use the dollar sign operator to retrieve content from the document down here using the ID selectors that we would normally use the dom's get element by id function for.
So let's go ahead and retrieve this unordered list. So we are going to write dollar sign and we are going to put list1. So in order to make sure that this works properly we need to be able to see the output in the browser. So we'll cover what I am about to do a little bit later in the course. But essentially what I need to do is put a border around the element so that we can see it in the browser to make sure that the selection process is working. So don't worry if you don't understand this right away. We'll cover it later. But essentially what I am going to do is I am going to set the style on this element.
And I am going to set the border to be a 3 pixel solid red line. So what that's going to do is once I've gotten the list1 element I am going to just set an inline style on it just so we can see it. So I am going to save and I am going to go to the example files folder, so here's the example files. So I am going to just double-click on this file and run in the browser. And you can see that sure enough it worked. So that piece of code retrieved the unordered list and put a red border around it.
So we can see that that dollar sign function is working just fine. And just to make sure it works in IE as well, let's go to that browser. So I am going to right-click and choose IE, and you can see it works there as well. So let's go back to our code. Let's try a different example now. Let's comment this one out. Let's see how we can operate on more than one element at a time. So we have some paragraphs down here, right. And we've got para1, 2, 3 and 4.
So up here in my selection logic, I am going to write para1 and let's select para2 and let's also select para3. And this time I am going to get back a collection of elements not just one. So in this case what I need to do is call the setStyle function on each one of these guys. And again, don't worry if you don't understand this right now. We'll get to it later. I am going to call the invoke function that Prototype provides.
And I am going to invoke the setStyle on each of these guys. And I am going to be passing in pretty much the same argument, the border, so I'll just copy that and paste it down here. And that's pretty much all I need to do. So now if this works correctly we should see 3 pixel solid red lines up here around paragraphs 1, 2 and 3. Let's switch to the example files folder.
So now we are going to double-click on the file again and that time you can see sure enough, we selected all three paragraphs, the first three, not the fourth one and there are red outlines around each one. Let's try the same thing in IE. So go back to the folder and I'll just right- click and say Open with IE, and the same result. So that's a quick introduction to using the dollar sign function. You can see that it's a lot easier than using the straight dom API. So now you know how to select elements using the ID element selector in Prototype.
- Retrieving and manipulating web page elements
- Handling web page events and creating custom events
- Traversing the DOM
- Creating and handling AJAX requests
- Using script.aculo.us controls such as Autocompleters, Sliders, and Visual Effects
- Building complex page features like data filtering and image rotators