Selecting elements to use
Viewers: in countries Watching now:
- What is jQuery?
- Installing jQuery
- Performing multiple operations with chaining
- Using classes
- Adding, modifying, and removing content dynamically
- Triggering a change with event binding
- Creating a dynamic contact form
- Building a slideshow gallery
- Creating simple jQuery animations
Selecting elements to use
So if I want to select an element by its ID, I just spell it out just like in CSS. So let's say I want to select the header and here in the console I get the result back so I know that there is in fact something there. If I want to select something by class, again it's just like in CSS. So let's look for the inline block class. And there's a couple of things with that on this page. Basically anything you can think of that works in CSS will work here. I can also do tags like this, find all my H3 tags, all of them on the entire page. I can do attributes selectors, so let's say I want to find everything on the page that has a role which is banner, great there's one of those.
If I change this to something that doesn't exist like say banner one, I get back an empty array. jQuery always returns an array like object of whatever it finds, which means that you can test the length of it the way you would normally in Java Script. So if you ever need to find out how many of something you found you can check the length property and that will give you the right answer. And of course I can combine selectors just like I do in CSS. So I can say, let's look for all unordered lists that are children of a list item. We have many of those. And incidentally of course in the Web Inspector you can expand these to see what all is inside those results that you got back.
Now, of course, there are different ways that you could start to get into this sort of thing. You could go crazy. You know, give me everything that's a descendant, and you know, all kinds of tags, and all kinds of craziness here. But there is a better way to filter the results that you get back and maybe find something a little more specific. So let's start with a known ID here. I'm going to use this one. Okay. So, you can see that that is right there. By mousing over it in my inspector I can see that that's where it is in the document. And if I go over here and inspect it I get the Elements Pane in the Web Inspector. I can see where it is and I can also see the rest of the Dom as it currently stands.
So you can see that a page is basically like an outline. We know this from working with HTML, but JQuery also has some methods for getting around inside there and filtering your results. So starting with this, I can say give me everything inside this, using the find method, anywhere it appears no matter where in the Dom. As long as it's inside this that matches this other selector. So find me all the list elements in there. There aren't any. How about anchor tags or lengths? And we have quite a few of those. So, I can use find to give me anything that's anywhere inside this, but I could also use some that are a little more specific.
So I could find all of the children, that's direct children there aren't any of those. But if I don't want to use a specific selector I can just say give me all of the direct children of this element and there they are. When we working with the Dom you'll see these kind of familial type relations mentioned, so I can get all of the parents of this element all the way back to the root element. I can also say give me parents who match a specific selector. So if I just wanted to find this ordered list for example. I could use parents and get that back, and then I can also use siblings, that's one I find myself using a lot. So if I want to see everything that's at the same level as that original one in the Dom, that would be here.
So I would expect to get back this list element and this div. And there they are. So as you can see, there's a great deal of sophistication that you can get into here. These selectors are powered by an engine called, Sizzle. Which you can look up separately. It is included with jQuery but it's its own software project that could be included in other frameworks. All of these selectors are powered by Sizzle, and then jQuery has all these methods like find, and parents and siblings and so forth, that let you filter the results that you found, to get just the elements that you want. Which you can subsequently process using other parts of jQuery.
There are currently no FAQs about jQuery for Web Designers.