What do you want to learn?
Skip to main content
by Karl Swedberg
Start CourseBookmarkAdd to Channel
Table of contents
jQuery & History of DOM Scripting
History of jQuery
Benefits of jQuery
Core Concepts of jQuery
Data Types and Variables
Functions and Arguments
Named and Anonymous Functions
Additional Object Examples
jQuery Selectors and Traversal
It's an art really, I mean you have to, you really have to consider these things. We didn't even talk about concatenating and minifying your scripts and gzipping them, it can dramatically effect the user perception and overall experience and a lot depends on what you are trying to achieve, right? So, ah! Let me show you this little example here. I'm going to pop it out of the full screen mode for a sec so that I can clear my cache.I want you to look for three boxes They're like big blocks, right? One will be green, one will be red, one will be yellow. Ok. Just yesterday it held onto that red one so much longer. Let me try this one more time. So watch again. There we go! You see that? You see the difference? I mean it's pretty dramatic right? Did you see the green one at all? No, you didn't. (laughs) No, the green one you didn't see because that was hidden using that technique of, you know, CSS and the JS class on the HTML element, ok? If you use Modernizr, it does that for you, you know? So put Modernizr in the head, it's awesome. And the yellow one was using Document Ready and the red one was using window.onload, right? And so this is how many milliseconds at 983 after, from head to ready so it's almost a second and it was three and 1/2 seconds to window.load 'cause I put a bunch of big, big images on there, alright? Yeah, any questions...about that? No? Alrighty. Back to slides, ok, selectors and traversals, traversal at the heart of jQuery, right, find something, do something, we're going to talk about find something now, ok, for the CSS people here, check this out, you see? It keeps like, I feel like I'm on a ship or something. Ok, look at that. Here's your CSS selector. Here's your jQuery equivalent. Notice the difference? The only difference is that with jQuery we're, the selector is a string so we have to put it in quotes and it's an argument of this dollar function so we have to put the dollar and the parens around it, and that's it. So the moral of the story is use what you know. You know the people who are good at CSS, you have a huge advantage here, you can get anything you want, right? By just using this CSS selectors that you've known and loved for years. Make sense? Are you familiar with all of these? Is everybody familiar with these? Any of them that look odd? No? Ok, cool. How about these? Those all make sense? Any of them that look odd? What, can you just explain, sorry, prevAll? Yeah, yeah, sure, so what this does is, so the pre-plus selector, yeah, that prevAll, that's kinda of weird way of saying it, ok, so the first one, the plus combinator, this is a CSS selector, right? It's not used very much because we're all still stuck in some way, even if it's just emotionally, in IE6 land, right? Where we think, ah, I can't use that because IE6,IE7,maybe you know,they're not gonna,they don't support this selector right, so what this does, this pre is the previous element and selector is the one that's actually selected, that's the next adjacent sibling, ok? So if you have two li's right? And you used li plus li, it would give you the second one, right? If you had three, it would give you the second and third because the second and third both have one that immediately precedes them, yeah? Cause it's like saying ok, so the next, the next element that matches this selector, the very next one and the tilda is like, if I had a div, and then, a paragraph and then a div, and a div, and a div and they were all siblings of each other right? And I said, paragraph, or p tilda div that would give me all the divs that followed that paragraph that come after, so it wouldn't be the one before it but it would be all the ones that come after it, ok? Not :checked disabled,:checked is a really weird one in CSS. Well, I'm not even gonna get into that right now, ok? Attribute selectors. You know about attribute selectors? This is nice and if any of you are familiar with regular expressions, this is kind of like regular expression-like syntax so you know, you have a leg up here, I mean, although there's weird stuff like the tilde equals that isn't really a match but anyway, you can say that sum attribute equals this value, so like eight trap equals this value or doesn't equal this value or the bang equals, that is not a CSS selector, that's a custom jQuery selector that we threw in there and it's come back to haunt us. And, yeah, begins with, ends with is anywhere there. The attribute has a value as one of its space separated values so like if you have like a rel or a class or something like that and you wanna just say is one of the rels, no follow? You know, I don't want to get to one that says, I don't want to get it, if it just says, me no follow likey or something you know, it has to be no follow, you know, so it can't be anywhere in this string, in the attribute, it has to be, that word, right? So those can be really handy and then we have some custom form selectors, let's not even look at these. Custom miscellaneous selectors, eh? Ok. You can get a list of all of these selectors on the API site category/selectors and you'll see all of them and you can read all about them and love them.
Traversal Methods: Up, Sideways, and Down
Traversal methods! They allow you--selectors pretty much allow you to go in two directions, right? Either sideways or down. Like you can, you know, basically, you know, you can go down from something like with a descendant or child or you can go like across with some kinda of a sibling selector or you can filter them out right? But you can't go up to a parent with a selector? But with traversal methods, you can. You can move up with one of these. Parent moves up one level, parents with an s, moves up multiple levels and parentsUntil will keep moving up until it hits whatever you put in that argument, the parentsUntil argument, right? So, tell me, the first one, li.bottom.parent, what will that give us? What will we collect? The inner ul. The innermost ul, yes, good. How about span.parents ul? It'll give us all of the uls, in order, starting with the innermost one going up, ok? It's one of the few cases where the elements are not returned in document order, ok? When it's a parents thing, it's like kinda of in reverse order, right? Because you know, you might wanna say, I just want to get the first one so it has, has to be in that order, ok? ParentsUntil span, parentsUntil ul, what will that return? The innermost ul? I'm sorry? The innermost ul? Uh, no. Good guess, it's going to go up to the ul but not include it, so it'll give you li class equals bottom. Does that make sense? So if I did this... if I had that, and I said span.parentsUntil ul.foo, it would give me li, ul, li, well, li.bottom ul li, in that order and it would stop there, yeah, parentsUntil isn't really all that useful, you what's really useful though? NextUntil, like for example, if we had something like this, let's see, let's say we had in our document, we had a dl, right, and then we had a dt, right and then we had like five dd's and then we had another dt. And we wanted to, like if I, if somebody clicked on this one and we wanted to hide all these dd's but we didn't wanna hide the dt there, right, we wanted it, oh and let's say this one had a couple here too, right? We couldn't just say nextAll, all the next dd's cause then it would hide these too right? That would be bad so we could say nextUntil dt, you know, so we'd say, yeah. Alright, ok, closest, closest is really nice when you're working with event delegation, which we'll talk about next week so what this does is it starts with the one that you selected initially, so it'll start with, for the first one, it'll start with the span and you're saying closest ul and so it'll start with that span and say, Is this a ul? No, it's a span, silly and then it'll go to the next one li, Is that a ul? No, and then it'll go to the ul there and say, Is this a ul? Yup! And so and then, it'll stop and then it's not gonna give you anything else. So it's the closest parent or that thing, right? So the .bottom closest li, right, so it's gonna say, ok, I found my .bottom, is this an li? Yup! This is it! I'm stopping right here. Pretty nice, pretty handy, ok. Sideways. We have a whole bunch of sideways ones right? Siblings, which you'll find all the siblings on either side. Next, nextAll, nextUntil and then the equivalents for previous, prev, prevAll, prevUntil, ok? Now, let me tell you something about siblings. You know what siblings are, right? They are elements that have the same parent, right? So if I have, like, I don't know, four of those, and this has class equals foo but then I have another, right? Ok? And I say .foo nextAll or .foo siblings, right? How many siblings will I have? How many elements will it return? Three. Right. It's not gonna give me this one, is it? That's not a sibling, that's a cousin. Right? Because it's parent is a sibling of this one, right, so that make it a cousin, right. So in Oklahoma, they could marry. Eh, sorry, that was bad. Alright, yeah, and then moving down, we have children and then we have find. Do you know what the difference is between children and find? I don't know why it didn't say like, I don't know why we didn't come up with like children and then descendants. I mean, that would sort of make more sense, right, 'cause descendants could be children or grandchildren or great-grandchildren or whatever, but, ah, whatever. Same thing with like parents and then, you would think would be ancestors, right, but no. Parents. Alright, in any case, children is the immediate children one step down from the element, right. Find is, will look anywhere down there. Find? With find, you need a selector of some sort, you need a filter, like you need to stick an argument in there. With children, you don't, if you don't have it, it'll get all the children, like all the immediate children. With find, I don't know what'll do, it probably won't do, it'll probably return nothing or an empy object. Yeah. How can you get all the descendants? But I'll come back to you after somebody answers this perplexing question. How do you get all descendants? What could you possibly put inside the find argument to get everything? Wouldn't it be awesome if there was such thing as a universal selector that would select everything? Wouldn't that be really cool? Like, wouldn't it be really neat if CSS had something like this, something like that? Does CSS have something like that? A universal selector? That would select everything like let's say I wanted everything inside the body. What would I put here? (student mumbles answer) Sorry? An asterisk. Yeah! Sorry, I was excited. Yeah, an asterisk right? So if I go back to jQuery land, right, and I wanted to do the same thing, ah, body, I would use stop find and I used an asterisk and that would get me everything inside the body which would be kinda crazy, right? You probably don't wanna do that, I mean, especially if you have a really complex document, right? It would take a lot of time to gather up all those things but that's how you would do it.
Traversal Methods: Filtering
Filtering. Once you have your collection of elements and you wanna filter it down to just the ones that match your condition, you can use filter with a selector. Like filter some-class, right, and so that would, you know .some-class and then that would and that would say, ok, now that we have this collection, only keep the ones that match this right? You could also put a function in there and it will only keep the ones that for which this returns true. The function returns true or a truthy value, right? So here, if I said, all li's that have more than one li as an ancestor, I'm sorry, yeah, more than one so two or more then it would only give me those that have two or more li's as an ancestor. You can filter the opposite way with not, ok, so only keep the ones that don't match this, that aren't some-class, ok, and you can use a function same way, alright? Slice, you can say, ok, I want, which one would this return? Which one would this give us? If we have 5 li's and we did li's .slice two. Which li would it give us? The second one. Sorry? The second one. Good guess, but it's wrong. The third one, right. Why would it gives us the third one? So we can next off zero. Yeah, that's right cause the first one is the next zero, right, cause that's how things work in most programming languages. I think, like, Visual Basic for Applications was one based or something or some Visual Basic kinda of variant but otherwise, they're zero. Negative two will give you the last two elements. It's kinda nice, so if we have five li's, we'll give you the fourth and fifth, slice three six? I can never remember this. I think this will give you starting with the fourth one and six of them starting with the fourth one. Is that right? Why do I always mess, I always have to test this, it's embarrassing. Let's see. Ok, so , what if we, what if in our Scratchpad, we did, this... alright, there we go, pop open a console and we say, li we get all those li's and then we say .slice three, six, right, there we go, oh, the third one, I'm sorry, the fourth one through the seventh one, right? So starting with the fourth, fifth, sixth, sorry. Fourth, fifth and sixth, ok? Up until the ok, you got eight now. Does that make sense? Does that make sense to you guys? Beause I'm starting to confuse myself. (laughs) This'll start at the third one and go all the way to the second to last, let's try that. Sorry, ok, let's see what the last one is. Yeah, second to last one. Good. And the first one that is selected was the third one, right? Yes! Ok, that makes sense, ok. Alrighty, slice. Slice is nice. Eq, equal, that'll give you the, it'll return one element, right, or select one and that'll be the third one, that'll be the third from the end, ok? So this is kinda weird, jQuery also has this notion of a contextual selector as a second argument so far everything we've been seeing has been with one argument inside that dollar function right? Here, we have two. I would say, don't do it. You don't need it. Don't use the second selector, I mean, the second argument. It's the same thing as starting with the second one and saying .find in the first one and, as a matter of fact, it's so much like that, that that's what jQuery does internally is that it converts it into that other syntax and runs it that way so it's just extra work for jQuery to do. And, I mean, that's not really the reason why I'd say don't use it, I say don't use it because it's a lot less descriptive, right? It's not really saying, it's not really telling you what's happening there. If you're saying context.find selector, that's at least, like, as soon as you understand what find means, you know, that you're finding descendants, then at least, that's a little bit more descriptive than just having a second argument, right, so, I would say, skip it altogether. But, you should be aware of it, in case, you see it in somebody else's code, right, ok? There's also add, so you can add elements, like you can say all the li's and then .add all the div's or whatever. You can say andSelf so you could do something like this. You could say, like... ul.children .andSelf and so that would return all of the li's and the ul, yeah? Together, as one happy family. Okay, end-- is kinda weird. It doesn't really, it doesn't really select anything. It's used with chaining and I'll tell you about that in a bit.
Demonstration of Traversal Methods
jQuery Selecting Tips
Tips. Selectors that you use more than once so if you get a collection, so instead of putting this in a function call every single time, like dollar, parens this and you're doing that like five times within a function, do it once and then use the variable. Do it once, declare variables, you know and then use that instead, right, I mean if the value isn't going to change for some reason, if you know it's not going to change then store it in a variable and use that, ok? It'll be a lot easier than doing another function call, with this, it's not that big of a deal but if you're doing like, div., you know, if you're doing some sort of crazy selector, it's like your querying the DOM, you're having it go through the DOM every single time. It's not good so yeah, you can also use the length property to check if something exists, ok, so, do I have any list items? I can find out here, I'm declaring a variable, list items equals dollar li and I'm setting another variable, num items to list items.length, ok, so that's gonna, that num item is going to tell me how many list items I have, alright? And if it's zero, it's falsey, right? So I can say if num items and so that would be if the value is one or more, then I'll do something, right? Often, there is no need to check for the existence of it. Sometimes you can just say, list items.add class pre, if there are no list items, it's gonna be a collection of zero elements and it's not gonna do anything, right? It's gonna try to do something to zero elements and it'll be done. Does that make sense? To everybody? It's different from like using like, get element by id like if you tried to do document.get element by id and then you tried to get the, find out the class name of that element, if that element didn't exist it would throw an error. It would say, you're trying to get a property of null or undefined and you can't do that. Undefined doesn't have properties so you're breaking things but here, you're always going to get something back. That's why you have to check for the length, okay? You'll always get something back even if it's an empty object or an object with an empty array with a length of zero, alright? Ok, I just remembered, I did something earlier and I wanted you to...ah! Yeah, right here. Ok, I wanted to explain myself here. You see var list items there, with a dollar in front of it? Ok, ya'll know that there's nothing special about the dollar on that variable name, right? The only reason I did that there is for me. It's because I like to know that I'm working, that what I'm working with is a jQuery collection and that I can attach jQuery methods to it, right? So I can do an add class or whatever on it, right, and that reminds me, oh, yeah, I'm working with a jQuery collection here so I'll just do dollar list items but it's not special in anyway, you know? I can get rid of the dollar and it would mean the same thing Is that? We're all clear on that? Good. Alright. Ok, yeah, concatenate and yeah, avoid jQuery's custom selectors when possible, sometimes, you're gonna wanna use one and it's not the end of the world but there are other times, when, you really ought not to. They're not really serving you well at all, they're not, they don't do anything that you can't do with a real CSS selector better, ok. Colon check box. That is a custom jQuery selector that only exists in jQuery land, it's not a real CSS selector and so jQuery can't use it's own, it can't use the native querySelectorAll method and so it's going, like, in the browsers that it supports, so the browsers, the modern browsers are gonna do that much more slowly than they're going to do the third one, ok? Because the third one, jQuery, can just take this chunk and stick it into a querySelector All and say bam! We're done. In the first one, you can't, it has to kinda parse it and apply all these regular expressions to it and then, oh! And here's something else, why is the second one better than the first one? A small list? Sorry? It's weighing a smaller list, if the first goes, gets hit with. Yeah, that's right. So, with the first one, that is equivalent to doing that. So it's saying, look through every single element in the whole document and see if it's a checkbox and see if its type equals checkbox, right? That's ridiculous. You know that only inputs can have a type equals checkbox, right? Only inputs can be checkboxes. So do this, if you're going to use the custom selector but better to just do this last one here. Make sense? Awesome! Ok, here's another one. div:first., It was great, at first. I loved all these funky selectors. It was so fun, like I could do anything with them, you know it was really neat, but it's slower, it's slower. It has to parse that out and figure out what's going on and do all sorts of crazy crap. With the second one, it just goes, get on with spike tagging, bam! And then it says, ah! Pluck it, pluck out the first one, we're done, ok, so because it does the real work in that jQuery function, right, with that first selector, that's where the real work is being done and then the method is just acting on the collection that it already has so it's much easier. Okay. Another example, li:eq three, use the method instead, ok? Less than three? Use zero, three, like so, so that's zero and up to three, up to the fourth one but not included.
Open Questions with Karl
Released19 Feb 2013