jQuery Crash Course [3] - DOM Manipulation

alright guys so hopefully you've watched part 1 and 2 of this jQuery crash course in this video we're going to get into Dom manipulation okay we're going to do some stuff that we've already done just a little bit and then we're going to learn about some other methods that can help us manipulate the document object model so let's start in the container here that we have we're going to create button so we'll say button and we'll give it an ID BTN 1 Save button 1 and let's put couple paragraphs underneath so say P we'll give it a class of power 1 say this is a paragraph okay and then we'll do one more paragraph okay so we have a button we have two paragraphs and then I'm just going to put a div as well so we'll say div we'll give it an ID of my div oops alright now let's go down to our script and the first method we're going to go over a CSS now we've used this already quite a bit but I just want to make sure we do cover it here so we'll say we'll take that paragraph with the class of power one call dot CSS and let's say color will set to red alright let's reload and you can see we get our elements and the paragraph is read alright now if we want to add multiple CSS properties here I'm just going to copy that what we need to do is throw in an object so we'll wrap that with curly braces and it's an object so we want to put a colon there and we can get rid of these quotes here and then let's say we want to add a background as well so we'll put a comma there and then we'll say background and we'll set that to hexadecimal value forward gray so now if we reload you can see that it now has those two styles alright now we can also add and remove classes so what I'm going to do is go up here and create a class we'll say dot my class not that and we'll say color we'll say color blue and background background will say black okay and now what we'll do is just take a second paragraph so P dot power two and say dot add class and then just pass in the class name in this case it's my class so let's save that reload and now you'll see that it now has the class my class and we can look at it I can examine it here and you'll see that it was in fact put in now at the same time we also have removed class so if we want to remove it we'll just go like that and then if we reload the class is now removed so pretty easy stuff now we can also toggle classes so what I'm going to do is add an event here for that button so he has an ID of BTN one say click and what we'll do is we'll let's take this put that in there and then we're just going to change this to toggle class okay so I'm going to comment these two out and now if I click that you'll see that it's going to toggle that class okay now we're going to move into actually adding and changing content from within the Dom so let's take that div we have an ID of my div okay and then we're going to say we'll do dot text and let's say hello world okay so if we save that we reload you can see now that that div is outputting hello world so that's dot text we also have dot HTML so let's comment that out and if we were to change this to dot HTML we could then add HTML tags in here okay so now we have an h3 that says hello world now at the same time we can set these we can also get the values so for instance let's say alert and we want to alert my div oops my div dot text okay so we reload and you see we get hello world okay so we can get values as well we can also get the HTML so that's text in HTML now we also have append and prepend which do just that and let me give you an example I'm going to set up a list up here so we'll say Li and we'll say list item 1 and we'll just copy that 2 3 4 ok we'll reload that and we get our list down here okay and I'm just going to comment out this stuff up here okay so what we want to do here is we're going to take that ul and I'm going to say append and here we'll put a li and we'll say append list item so let's see what that does if we reload you'll see that it got added to the end ok so it puts inside of the UL at the very end now at the same time we have prepend which I'm sure you can think of what that's going to do so if we change this to prepend and let's change this prepend and reload and now you'll see that it put it at the beginning of the list we also have a pen too and prepend too we can take one element and append it to another so for instance let's take power one and then we'll do dot a pen - and we'll pass in here I think we just need that the selector so dot power - let's see what that does all right so it says this is another paragraph and then it appended to this this is a paragraph all right and then we also have prepend - so if we go prepend - and reload you'll see that now it's reversed the other way around now we do have before and after because when you append or prepend you're actually putting it we're taking the Li and putting it inside of the UL with before and after you can put stuff after the well not inside it so for instance let's say actually will use the UL example so you L dot before and in here I'm just going to put an h4 I'll say hello reload and now you'll see that it's before the UL it's not inside of it and then we can also do after okay we'll change that and it will say world and now we reload and you get world after the UL okay so very easy to manipulate the Dom another method we have is empty so if we were to take the UL oops and say dot empty reload now if we look at the actual HTML you'll see the UL is actually still there what empty does is it takes all of the inner elements out okay we also have one called detach so let's see what that does save that and now if we look at ul it's not there okay it's been detached from the Dom now we can also work with attributes so what I'm going to do is I'm going to go up below the list here and create a link okay so we'll create a link and let's go down here and we'll take that a tag and say dot adder attr and let's say we want to add a target attribute because we want it to open up in a new window so we'll say adder and then we'll pass in target which is the attribute and then we'll pass in the value which we want underscore blank so now if we reload click Google it's going to open another window and you can see if we look at it it has a target blank okay so we did that from jQuery now we can also use a door to get the attribute so for instance if we want to alert we could say a dot adder and then pass in whatever the attribute we want so in this case a to F so now we reload and we get google.com we can also remove attributes so we know that we do have this target attribute now let's remove it down here so this will be dot remove adder and we'll say target okay think that's right so let's save it reload and now if I click it's in the same window because the target attribute is now gone all right so let's comment this stuff out I shall just do one big comment okay so next thing I want to do is wrap and what that will do is it'll wrap specific elements in other elements so for instance let's take our paragraphs and say dot wrap and in here we want to place the tag we want to wrap in let's say h1 ok don't need to put the the ending tag it'll actually do that for you so let's save reload and now if we look at these paragraphs both of them are wrapped in an h1 now we also have wrap all which will just use one h1 and wrap both so we'll say wrap all comment this out and let's see the difference ok it looks the same but if we look at the actual markup both paragraphs are wrapped in one h1 as opposed to them having their own h1 so that's the difference between wrap and wrap all now before we move on to arrays I just something that I'd like to show you I want to have an input where we can actually add an item to this list all right so let's go up to our HTML and we're going to go right above the list and put in an input give it a type of text and let's give it an ID of new item and we'll go down here and we're going to use the key up event here because the idea is I just I want to be able to click enter or hit enter and then have have that be appended to the list all right so we need to use key up and we need to do a we need to check the key code because each key has its own code so let's do a new item which is the input and then we're going to do dot key up okay key up I'm going to pass in a function and pass in our e right there and then we're going to save our code and set that to e dot which that'll get the key code and enter is actually the code of 13 so if we say e if code is equal to 13 and we want to prevent the default value on the default behavior prevent default and then let's append say ul dot append and we want to append a list item and in here we'll go ahead and concatenate Yi dot target dot value all right so let's save that and we'll say test item and enter and there we go gets added test item to enter and we'll be able to keep adding to that list now obviously when we reload it's going to disappear because it's not persisting to a database or anything like that all right so now what I want to do is move on to arrays and some of the array methods so what I'm going to do is create variable called my or myarray and we're going to set it to just a bunch of names say Brad Kelly Nate and Jose okay so we have this array of names now if you want to loop through an array you can use the each loop or the each method so it's going to be dollar sign dot each all right and then in here we're going to pass in my array and then our function okay and this function is going to take in two things it's going to take in an index and a value all right and then in here we'll have access to each iteration so let's say console dot log Val so now if we look down here you can see we get each name now if we want to output them up here we can do that let's create we'll go under the link here and we'll say ul and then give it an ID of users okay now instead of just console logging let's do ID users dot append okay and then we'll just say users are not users Val okay we'll reload and let's see dollar signs not defined alright and now you can see we have the names output in our application now if we want to take let's say these list items and put them into array and array we can do that as well so I'm going to comment to so and what we'll do is let's say console dot log and then we'll take actually no I'm not going to do that I'm going to set a variable called new array and set that to ul and let's give that ul an ID of list so then we'll say ul with the ID of list and then we want the list items okay we want to turn that to an array so we'll say to array all right and then we'll just console.log that see what that gives us okay now you can see we have an array and each one has the list item along with all of its information okay so for instance if we want the innerhtml let's do an each loop which I'll just copy from right here and we'll pass in new array will loop through it get rid of that say console dot log Val dot enter HTML and you can see we're getting all the list items and if we wanted to somehow edit that that content somehow and then reapply it to the list we could do that but I'm not going to get that far into it all right so that's basic Dom manipulation ok so just adding stuff to our document object model removing it updating it things like that all right so in the next video we're going to get a little bit into effects and animation

Channel: Traversy Media

Views: 108,579

Keywords: jquery, jquery dom, jquery append, jquery html, jquery dom events

Id: q4FWSdX55ls

Length: 20min 58sec (1258 seconds)

Published: Sun Sep 18 2016