Join Joe Marini for an in-depth discussion in this video Using the $$() selector function, part of Prototype and script.aculo.us Essential Training.
Prototypes double dollar selector or dollar dollar or whatever you want to call it, can use any CSS3 style selector to retrieve an array of matching elements in a document. So whereas the single dollar function operates on the IDs of elements, the double dollar uses CSS selectors in order to gather content from the document. And this is a very, very powerful selector because you can do all kinds of really useful things with it. So let's begin by looking at some of the things you can do. This table lists the kinds of selectors you can pass in.
So starting right at the top, for example you can pass in just tag names, like h1 or div or whatever and the double dollar selector will return a list of all the elements that have those tag names. Similarly you can do things like descendents. So for example you can pass in a string that says li A, and it will look for all the links that are inside list items. You can also pass in attributes, you can pass in classes. There is a CSS operator for immediate children, which is this example right here.
You can pass in list item and then an angle bracket a. And unlike the space that means only find me link tags that are directly children of list items and not buried somewhere deep within inside say a paragraph or some other tag. There is also sibling operators, so you can find elements that are at the same hierarchy level as the element that you pass in. So for example you can say a + span. And that means find me anchor tags that also have spans as siblings.
And there's also the adjacent operator. And that means for example find things that are adjacent, like an image that has something next to it that has a class attribute of .class, whatever that class is. There is also a nice array of filters you can use. And these again are based on CSS3 style filters. So for example there is the not operator. That's the Negation operator. So for example you can say find me elements that are not paragraphs.
There's also a list of Child operators. So for example the nth child, you can say hey, get me every second child or get me even numbers. There is first and last child, there is the empty operator, which means find me elements that just don't have any content. You can also do things like enabled, disabled, and checked. And these are really useful for working with things in forms. Let's take a look at some actual examples. So for example to find all paragraph tags that's pretty simple.
You just simply call the double dollar with a string of p and that finds all the paragraphs. To find paragraphs that have some CSS class you would name the string p and then dot whatever the name of the class that you are interested in looking for. You can also get a little bit fancy. You can find things like list items inside a list that have a certain ID. That's this example here. And what this basically shows is you can combine CSS selectors to do some pretty powerful selecting.
You can also filter on items that have certain attributes set. So for example this next example right here you see a href=# will find all links that have their href attributes set to the hash mark, and we all know how bad that is. You can also do the negation operator. And again I just talked about this a minute ago. So in this example you can see that the double dollar selector is looking for tags that have some class, but those tags cannot be paragraphs.
So this will basically find every element that has the someclass applied to it but is not a paragraph tag. Getting even more advanced, this example, tbody tr with a filter of nth child of odd, will basically find all the odd numbered table rows as long as they are inside of a table body. You can also look for empty content. So div:empty will look for empty tags. And then finally we can do things like this where we are basically passing in more than one argument.
So for example we have the #nav li and then #side li. And basically what that means is get me all the list items that are inside the elements that have IDs nav and side. Let's take a look at some real examples by going to some code. So I am going to open up my example file. So let's open up the CSSSelector_ start example and this is the starting point for the example.
Again the model I am following here is if you want to go ahead and jump ahead and look at the finished version, you can do that. But I am going to build the finished example as I go along here. So here is our example document and it's pretty similar to the example that we were using in the previous lesson. But just to recap we have an unordered list and we have some paragraphs. And the paragraphs have various attributes applied to them. In this case I've gone ahead and already added the document.observe function for watching the page load so you don't have to do that.
Let's go ahead and start playing around with the $$() operator and see what happens. So I want to start off by just doing some simple stuff, I'll type $$() and p. So now this is going to find all the p tags. And again just so that we can see what's happening in the browser I am going to do some CSS magic. No need to worry too much if you don't know exactly what's going on here. We'll eventually cover this when we cover collections and operate on collections. But for now I just need to do this so I can visually see what's going on inside the browser, so 3 pixel solid red.
So let's go ahead and run this in the browser and see what happens. Double-click and you can see that all the paragraph tags have been selected, which is pretty much exactly what we expected. Let's go back to the code and get a little bit more fancy. So let's copy that and comment that one out and try something else. Now let's look at p tags but let's do a negation operator. Let's say paragraphs that don't have the .a class on them.
So if we go down to the paragraphs you'll see that there is a paragraph here that has a and this one has b and these don't have any class at all. So if this works correctly then it's only going to select these three paragraphs and not this one. So let's save and let's go back to the browser and refresh. I am going to refresh the page. And sure enough you can see that in the first paragraph the one with the .a class has not been selected. Now let's try a different example. Let's comment that one out and paste in another one.
Let's try using the even operator and along with nth child. So for that we'll do p and we'll say nth-child and we'll write even. So this should return all the even numbered indexes of the paragraph text. So let's save. Let's go refresh the browser, and refresh, and sure enough, 0 and 2 are selected.
So the nth child operator starts off counting at 0 and 0 is an even number. So we've got 0 and then 1 is not selected and 2 is. So far so good, let's go back to the code. Comment that one out. Let's try using the last-child operator. So we are going to say p:last-child. So this should select the paragraph that is the last child of its parent.
So this should select paragraph 4 right here if we're doing things correctly. Let's go back to the browser and refresh, and that worked just fine. Let's go back to the code. And now for something completely different how about we try operating on something that's not a tag? How about we try operating on just a class? Let's see what happens when we use the $$() operator on the a class, because you can see that there is several things in here that have the a class. There are these list items right here and this paragraph.
So if this works correctly we should see red borders around the list items and the paragraph. I am going to refresh and sure enough that worked. Let's keep on going. So this time let's comment that out. And let's try using some attribute selectors. So let's look for paragraph tags that have a class attribute on them. So this should only select these two right here and not the ones that don't have classes.
So let's go back to the browser and let's refresh. And you can see that the paragraphs with classes have been selected. Let's get a little bit more advanced now. This time we'll comment that out. Now let's try something using the attributes, but doing some string matching. So let's look for paragraphs that have an ID attribute, but only an ID attribute that starts with the word para.
And the little hat equals (^=) operator means "starts with" in CSS3 parlance. So we're going to save and again if this is working we should see these two guys get selected because they both have IDs and class names that begin with para. So we save, go back to the browser and we refresh, and that time that worked. Paragraphs 2 and 4 have the IDs that begin with para. A couple of more examples before we move on.
Let's comment this out and let's try some of the other CSS3 selectors. Let's try the one where we have, let's see, how about we try doing #list1 and .a? So what this is going to do is select elements that have the a class applied, as long as they are immediate children of the elements with an ID of list1.
So if we look in our code we'll see here is the unordered list and it has the list1 ID. And we are looking for immediate children that have the a class, so that should be these two guys right here. So let's save, back to the browser and we are going to refresh, and sure enough that worked. One more example. Last example we are going to do is kind of involved. So let's paste and delete the p. So here is what we are going to do now. We are going to look for all elements.
And the all element operator is the star (*) character. We are going to look for all elements that have a class=b as long as it is not a paragraph tag. So let's see. In real terms that means we should select these b tags right here because they are not paragraph tags. So this paragraph tag even though it has a class of b. It's a p tag so it should not be selected.
So let's go back to the browser and try that. Okay, and we'll refresh and you can see that that worked just fine. So hopefully this has given you an idea of how powerful the $$() selector is. This alone is almost worth the price of including Prototype in your projects. It really simplifies working with collections of elements inside pages. And we'll see how this can be really powerful later on in the course.
- 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