 So, we've already covered the essential ways of invoking the jQuery constructor to create jQuery objects, but what then do we do with our jQuery objects? What kind of methods can we invoke? Well, each of the many jQuery object methods serve one of three basic purposes. First, there are methods for doing what we can call traversal. That is basically just selecting elements. And with the jQuery constructors we saw, we can pass in a selector to effectively use CSS style selectors to select some elements. But there are a number of methods for doing more sophisticated kinds of selection, just more elaborate selection. And then second, we have methods for doing manipulation, that is adding things to elements like adding content, like changing the text content, moving elements around, like taking this paragraph tag, this p tag, and removing it from this div and placing it in this other div, changing attributes, changing CSS properties, etc. And then third, we have methods for binding and triggering events. And events are what in the browser allows us to have our code respond to user actions, such as when the user clicks on something. Also, as we see, there are a few events that occur when something changes in the state of the document itself. Like, for example, we'll see that there's an event which triggers when a document has finished loading, and so is ready to be inspected and manipulated by code. I did state earlier that jQuery doesn't abstract over all of the functionality of the DOM, so in some cases you'll need to deal with raw DOM elements. So one capability we need is a means to get at the actual DOM element objects wrapped by a jQuery object. And to this end, jQuery objects have a method called get, which returns a single DOM element. So here in this example, first we're creating a variable called form jq, and we're assigning it to it a new jQuery object as created by the jQuery constructor. Remember, the dollar sign is just an alias for jQuery. And to this constructor call, we're passing in a string reading simply form. jQuery interprets that and recognizes it as a CSS selector, in this case a CSS selector, which just selects all form tags on the page in the document. And so this jQuery object is a wrapper around all the form objects in the page in the document. Then in the second line, we create another variable called form element, into which we are assigning the actual form DOM element object that is returned by the get method. So on our jQuery object form jq, we're invoking get and passing in the argument zero. Zero here is an index, because remember the jQuery object is a collection. It might have multiple DOM elements inside, so this is returning the first. We're using zero based indexing. So it's returning the first form element contained by the jQuery object. And that's what's being assigned to the variable form element. So now that we have the actual DOM element object representing the form, we can invoke this method reset, which is something that form element objects in the DOM have, but jQuery objects do not. Now you may be wondering what if I want to get an individual DOM element out of a jQuery object, but then have that DOM element wrapped as a jQuery object because I want to work with it as a jQuery object. Well, you can simply then just pass that object to the jQuery constructor to get a new jQuery object wrapping that individual DOM element. Alternatively, you can use the eq method, which is peculiarly named. I assume it stands for equals. It's like, give me the element equal to this index. I don't know why, but anyway, it works just like get, except whereas get returns an actual DOM element, eq returns that DOM element wrapped in a jQuery object, a new jQuery object. So here, when we declare a variable form jq first and we assign it what's returned by eq with an argument of zero on the jQuery object, we get that same form object but just wrapped as a jQuery object. It's a pretty minor convenience, to be honest, because again, you could just simply pass the raw DOM object to the jQuery constructor yourself with not much more bother. So now we'll look at some of the more essential traversal methods. First, the method add takes a second jQuery object as argument and creates a new jQuery object, which contains the full set of objects from both the object of the method itself and the jQuery argument. So here, if we call x.add with an argument of y, assuming x and y are both jQuery objects, then what we get is a new jQuery object that contains all the elements that are included in both x and y. And be clear that we're taking the union of these two sets. So if x and y happen to contain some of the same elements, those elements don't end up in the new jQuery object twice. They just exist once. You don't end up with duplicates in the new set. In fact, to my knowledge, I don't think it's possible in any circumstance to ever come up with a jQuery object that has the same element contained more than once. That's something which I believe is actually just not allowed. The filter method takes a selector string, which it uses to create a new jQuery object representing that subset of the existing jQuery object. So here, when we call x.filter with an argument of .orange, this returns a new jQuery object, which contains all of the elements found in x, which are members of the class orange. The children method returns a new jQuery object, which contains all of the children of every element in the original jQuery object. So here, x.children, this returns a new jQuery object returning all the children of every element in x. The find method returns a new jQuery object containing all of the descendant elements of the original jQuery object, but filtered by a selector string. So if we invoke x.find with a selector string of .orange, then that returns a new jQuery object containing all the descendants of every element in the jQuery object x, but only those descendants, which are members of the class orange. So children and find are two methods you use to select descendant elements, but what if you want to get at ancestors? That is, what if you want to go up the tree rather than down? Well, the parent method returns a new jQuery object, which contains all of the immediate ancestors, the ancestors one step up the chain of each element in the original jQuery object. So if we invoke x.parent, then that's all the parents of every element in x. The parents method, parent's plural, grabs not just the immediate ancestor, the immediate parent, it grabs all of the ancestors, the ones all the way up the chain to the root. Now, you'll notice a little bit of a strange asymmetry, and that is that to go down the tree, we have the methods children and find, always requires a selector. I'm not sure why it does. If you want to grab all of the descendants, you can simply invoke find with a selector of asterisk, a selector of just reading asterisk, it's a catchall, it grabs everything. When it comes to selecting all ancestors, however, you just invoke parents and there's no selector required. I don't really understand why there's that asymmetry. It seems like kind of an odd design choice, but that's how it is. So we have children and find for getting descendants, we have parent and parents for grabbing ancestors, but what about siblings? That is, other elements which are children of the same parent. Well, for that we have next and preve, obviously short for previous. The next method returns a new jQuery object containing all of the siblings that immediately follow all of the elements in the original jQuery object. And preve does the same thing except it grabs the immediately preceding siblings rather than the immediately following. In case I haven't been exactly clear about what a text note is, consider this HTML. We have this div tag and inside it we have some text content and in the middle of that we have an anchor tag and that anchor tag itself also has some text content. The question is, how many children does this div tag have? And the answer is it has three. The first child is the first chunk of text which is one text node and then the second child is this anchor tag and then the third child is another chunk of text which is a text node. And to be clear the anchor tag element itself has its own content, its own text content which inside that anchor tag, that element node is a text node. Now this text node anchor node distinction is important because what I failed to mention earlier is that the traversal methods child, find, preve, next, all of those ignore text nodes. They only select four element nodes. The only jQuery method which includes text nodes in its selection is contents which works just like children except it selects text nodes as well as element nodes. Now if you just want the text content as a string you don't necessarily want to use contents. If the contents returns a jQuery object representing the nodes you want just string. So for that purpose we have the text method which returns a concatenation of all of the text node content in all of the elements of your jQuery object and this includes actually the descendants of those objects. So looking back at this example if we were to select the div here and then use the text method to get the text content it would include all the stuff in that anchor tag even though the text node in the anchor tag isn't a child of the div itself. It's a descendant though and understand the text would come back as just a single string and it would be concatenated in the order as it's written in the HTML. Now to set the text content of the elements contained in the jQuery object you can again use the text method but you provide a string argument. So here if we write x.text with an argument of hello then that sets the content of all the elements of x to simply read hello. And the important thing to understand here is if those elements have other content including existing text content or existing element nodes those get clobbered they get overwritten and all that remains in these elements is just this text content. Somewhat similar to the text method we have HTML which will return the HTML string representation of the first element in a jQuery object. So when we call x.html this returns a string of HTML representing that element itself and all of its descendants. Be clear that this does nothing to actually modify any elements it's simply returning a new string. Now if we invoke the HTML method and pass in a string of HTML well jQuery will parse that HTML to create new DOM elements and it will insert those new elements as the content of all of the elements in the jQuery object. So if we invoke x.html with this string of HTML reading just a single div and some text content reading hello well for every element in x its content is being replaced by new HTML new div elements simply each simply containing a single text node. So if our jQuery object has three elements then this HTML is being parsed into DOM elements and jQuery produces three copies of those same elements and inserts each content as the content of each of the elements in the jQuery object. The atter method, the attribute method is what we use to get and set the attributes of our elements. To simply get the value of an attribute we pass in the name of the attribute we want and this returns the value of that attribute for the first element in the jQuery object. So if we write x.atter with a string argument reading just id that returns the value of the id attribute of the first element in x. To actually set attributes we simply provide the new value as a second argument. So here x.atter with an argument id and an argument of a string shark that's setting the value of the id attribute of all of the elements in x to shark. So again we have an asymmetry here because when you get the value just getting the value of one element but when you set you're actually setting for all though in this example here of course hopefully the jQuery object x only has one element because you're not supposed to get multiple elements the same id. That's not proper. Now using this atter method we can set any attribute including the class attribute. However a better way to set the class attribute is to use these two methods add class and remove class. The class attribute remember can have multiple values all separated by spaces. So when we invoke add class here with an argument of orange that's adding orange to whatever classes the class attribute already has and conversely when you call remove class that removes orange if it is one of the classes in the class attribute. So these two methods are quite convenient because we can add a class or remove a class without having to worry about messing up the other classes which the class attribute might already have. Also these methods are smart enough not to redundantly add a class if it's already there in the class attribute. You wouldn't want say orange to be repeated twice in the attribute because then when you try and remove it later you'll end up probably removing one and forgetting to remove the other. So in practice these methods are used very very commonly because say you'll have something on the page which given some user actions say they click on it or whatever you want it to change state and in your CSS you define some class which you want that element to have when it's supposed to change state so what you do is you simply add that class to the element and then later if you wish to change it back you can simply just remove the same class. Now DOM elements actually have properties which reflect the CSS properties so you can inspect say the font weight of an element and set it by assigning to that same property. The best way to get inside these properties though in jQuery is to use the CSS method. Here would be called x.css with an argument font-weight that returns the value of the font weight property of the first element in the jQuery object x. And if we wish to actually set a CSS property we simply provide a second argument the value. So x.css with the first argument font-weight and the second argument normal that's going to send the font weight property to the value normal for all elements in the jQuery object x. And again note the asymmetry when we get the property we're just getting just one value for one of the elements the first element but when we're setting we're setting this property for all of the elements in the jQuery object. Now a very common thing we want to do in a page is to take some element and hide it if it's already shown or conversely to show it if it's been hidden. We could accomplish this by setting the CSS display property of an element to none to hide it and then set it to either block or inline or whatever it's supposed to be to show it. The problem there is you have to remember for each element what its display value is supposed to be when it's shown. Is this a block element? Is it inline? You have to remember that. So we have these jQuery methods hide and show that when you invoke hide that will set the display value to none but then when you call show on the same element it will restore the display value to whatever it's supposed to be whether that's block or inline or whatever. So using these two methods is much more convenient than trying to mess with the display property manually. Now sometimes you want to do more than hide elements. You want to actually take them out of the document and for that we have the methods remove and empty. Remove will take the elements of the jQuery object itself and remove them whereas empty will take the children of those elements and remove them. And be clear that when you remove nodes from the DOM you're not destroying those node objects you're just removing them, you're taking them out of the document so they don't appear in the actual document. You can later, even after you remove them from the document you can insert them back in using other methods. Two such methods are append and prepend and the argument to these methods is content where content is either some jQuery object or it's just a single DOM element, a raw DOM element object or it's actually a string of HTML. Any one of those will do. Let's just assume in this case it's a jQuery object. So if we call x.append with an argument of y where y is some jQuery object, let's say with itself with multiple elements, all of those elements of y become children of each element of x and if x itself has multiple elements then the elements of y get copied. Each element of x gets its own copy of all these stuff in y. And in the case of append, all of these new children get placed at the end. They become the last content elements of the elements of x whereas with prepend they become the first. They get inserted into first position. So that's the only difference between append and prepend. Do all of these elements get inserted before the existing content elements or after? Now an important thing to understand about all the DOM methods and jQuery methods which insert elements someplace into the DOM is that if you're inserting an element which already exists somewhere in the DOM that element actually gets moved to that location, not copied. The simplest way to think about this is that an individual DOM object can only exist at one place in the DOM. You can't have the same object exist in multiple places. If you want that you have to actually copy the DOM element and then insert that copy. And this is in fact what jQuery does when we append or prepend to a set of elements, a set of more than one element. There's multiple targets so jQuery has to actually copy those elements. And if you want to explicitly copy an element yourself you can use the jQuery method clone. Clone will return a new jQuery object containing a copy of all of the same elements. Now aside from remove, empty, append, and prepend there are several other methods in jQuery for moving elements around but I think you get the idea at this point so you shouldn't have any trouble reading up on the rest in the documentation.