title
jQuery Crash Course [3] - DOM Manipulation

description
In this video Ill show you how to add, remove and change things in the DOM using jQuery. We will look at methods like append, prepend, html, and text My 10 Project jQuery/JS Course - https://www.eduonix.com/affiliates/id/16-10039 Project Files - https://github.com/bradtraversy/jquery_crash_course

detail
{'title': 'jQuery Crash Course [3] - DOM Manipulation', 'heatmap': [{'end': 1129.22, 'start': 1106.731, 'weight': 1}], 'summary': 'Provides a comprehensive guide to jquery dom manipulation, covering creating elements, applying css properties, toggling classes, changing text and html content, appending elements, working with attributes, and javascript event handling, with practical examples and demonstrations.', 'chapters': [{'end': 217.805, 'segs': [{'end': 25.551, 'src': 'embed', 'start': 0.776, 'weight': 2, 'content': [{'end': 6.16, 'text': "Alright guys, so hopefully you've watched part one and two of this jQuery crash course.", 'start': 0.776, 'duration': 5.384}, {'end': 9.763, 'text': "In this video we're going to get into DOM manipulation.", 'start': 6.881, 'duration': 2.882}, {'end': 14.227, 'text': "We're going to do some stuff that we've already done just a little bit,", 'start': 9.783, 'duration': 4.444}, {'end': 20.952, 'text': "and then we're going to learn about some other methods that can help us manipulate the document object model.", 'start': 14.227, 'duration': 6.725}, {'end': 25.551, 'text': "So let's start in the container here that we have.", 'start': 21.889, 'duration': 3.662}], 'summary': 'Jquery crash course covering dom manipulation and methods.', 'duration': 24.775, 'max_score': 0.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls776.jpg'}, {'end': 140.738, 'src': 'embed', 'start': 75.609, 'weight': 0, 'content': [{'end': 81.272, 'text': "so we'll say div will give it an ID of my div.", 'start': 75.609, 'duration': 5.663}, {'end': 85.274, 'text': 'whoops, all right.', 'start': 81.272, 'duration': 4.002}, {'end': 91.965, 'text': "now let's go down to our script, And the first method we're going to go over is CSS.", 'start': 85.274, 'duration': 6.691}, {'end': 97.149, 'text': "Now we've used this already quite a bit, but I just want to make sure we do cover it here.", 'start': 92.226, 'duration': 4.923}, {'end': 103.292, 'text': "So we'll say we'll take that paragraph with the class of para1 called .", 'start': 97.869, 'duration': 5.423}, {'end': 110.537, 'text': "css And let's say color, we'll set to red.", 'start': 103.292, 'duration': 7.245}, {'end': 119.124, 'text': "Alright, let's reload, and you can see we get our elements, and the paragraph is red.", 'start': 114.181, 'duration': 4.943}, {'end': 126.549, 'text': "Alright, now if we want to add multiple CSS properties here, I'm just going to copy that.", 'start': 119.144, 'duration': 7.405}, {'end': 128.97, 'text': 'What we need to do is throw in an object.', 'start': 126.629, 'duration': 2.341}, {'end': 140.738, 'text': "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.", 'start': 129.27, 'duration': 11.468}], 'summary': 'Demonstrated using css method to set paragraph color to red.', 'duration': 65.129, 'max_score': 75.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls75609.jpg'}, {'end': 217.805, 'src': 'embed', 'start': 173.735, 'weight': 3, 'content': [{'end': 175.396, 'text': "and we'll say color.", 'start': 173.735, 'duration': 1.661}, {'end': 193.146, 'text': "we'll say color blue and background background, we'll say black.", 'start': 175.396, 'duration': 17.75}, {'end': 207.043, 'text': "and now what we'll do is just take second paragraph, so p.para2, and say dot, add class and then just pass in the class name.", 'start': 193.146, 'duration': 13.897}, {'end': 211.264, 'text': "in this case it's my class.", 'start': 207.043, 'duration': 4.221}, {'end': 217.805, 'text': "so let's save that and reload, and now you'll see that it now has the class, my class, and we can look at it.", 'start': 211.264, 'duration': 6.541}], 'summary': "Using code, set color to blue and background to black, adding class 'my class' to the second paragraph.", 'duration': 44.07, 'max_score': 173.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls173735.jpg'}], 'start': 0.776, 'title': 'Jquery dom manipulation and css properties', 'summary': 'Covers dom manipulation using jquery, including creating elements, applying css, and manipulating the document object model. it also demonstrates adding multiple css properties to elements and adding/removing classes, with examples of applying color blue and background black to a paragraph.', 'chapters': [{'end': 110.537, 'start': 0.776, 'title': 'Jquery dom manipulation', 'summary': 'Covers dom manipulation using jquery, including creating elements, applying css, and manipulating the document object model.', 'duration': 109.761, 'highlights': ['We learn about DOM manipulation using jQuery and creating elements such as buttons, paragraphs, and divs.', 'The chapter covers applying CSS to elements, specifically setting the color property to red using the .css method.']}, {'end': 217.805, 'start': 114.181, 'title': 'Css properties and classes', 'summary': 'Demonstrates adding multiple css properties to elements, including setting color and background, and also adding and removing classes, with examples of applying color blue and background black to a paragraph.', 'duration': 103.624, 'highlights': ['The chapter shows adding multiple CSS properties to elements, including setting color and background, and demonstrates the application of color blue and background black to a paragraph.', "It also demonstrates the process of adding and removing classes, with an example of applying the class 'my class' to a paragraph."]}], 'duration': 217.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls776.jpg', 'highlights': ['The chapter covers applying CSS to elements, specifically setting the color property to red using the .css method.', 'The chapter shows adding multiple CSS properties to elements, including setting color and background, and demonstrates the application of color blue and background black to a paragraph.', 'We learn about DOM manipulation using jQuery and creating elements such as buttons, paragraphs, and divs.', "It also demonstrates the process of adding and removing classes, with an example of applying the class 'my class' to a paragraph."]}, {'end': 644.267, 'segs': [{'end': 293.378, 'src': 'embed', 'start': 217.805, 'weight': 0, 'content': [{'end': 221.646, 'text': "we can examine it here and you'll see that it was in fact put in.", 'start': 217.805, 'duration': 3.841}, {'end': 224.627, 'text': 'Now, at the same time, we also have remove class.', 'start': 222.386, 'duration': 2.241}, {'end': 229.83, 'text': "So if we want to remove it, we'll just go like that.", 'start': 224.667, 'duration': 5.163}, {'end': 232.811, 'text': 'And then if we reload, the class is now removed.', 'start': 230.07, 'duration': 2.741}, {'end': 235.713, 'text': 'So pretty easy stuff.', 'start': 234.592, 'duration': 1.121}, {'end': 239.014, 'text': 'Now we can also toggle classes.', 'start': 237.214, 'duration': 1.8}, {'end': 243.117, 'text': "So what I'm going to do is add an event here for that button.", 'start': 239.555, 'duration': 3.562}, {'end': 247.039, 'text': 'So it has an ID of btn1.', 'start': 245.758, 'duration': 1.281}, {'end': 268.533, 'text': "say dot, click, and what we'll do is we'll, let's take this, put that in there, and then we're just gonna change this to toggle class.", 'start': 252.299, 'duration': 16.234}, {'end': 279.342, 'text': "okay, so I'm gonna comment these two out and now, if I click that, you'll see that it's gonna toggle that class.", 'start': 268.533, 'duration': 10.809}, {'end': 288.257, 'text': "Okay, now we're going to move into actually adding and changing content from within the DOM.", 'start': 281.476, 'duration': 6.781}, {'end': 291.578, 'text': "So let's take that div.", 'start': 289.277, 'duration': 2.301}, {'end': 293.378, 'text': 'We have an ID of my div.', 'start': 291.638, 'duration': 1.74}], 'summary': 'Demonstrating adding, removing, and toggling classes, as well as changing content within the dom.', 'duration': 75.573, 'max_score': 217.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls217805.jpg'}, {'end': 387.896, 'src': 'embed', 'start': 342.675, 'weight': 2, 'content': [{'end': 344.656, 'text': 'Now at the same time, we can set these.', 'start': 342.675, 'duration': 1.981}, {'end': 346.397, 'text': 'We can also get the values.', 'start': 344.716, 'duration': 1.681}, {'end': 349.198, 'text': "So for instance, let's say alert.", 'start': 347.057, 'duration': 2.141}, {'end': 357.32, 'text': 'And we want to alert my div dot text.', 'start': 351.618, 'duration': 5.702}, {'end': 372.329, 'text': 'So we reload and you see we get hello world.', 'start': 368.827, 'duration': 3.502}, {'end': 374.69, 'text': 'So we can get values as well.', 'start': 373.009, 'duration': 1.681}, {'end': 376.27, 'text': 'We can also get the HTML.', 'start': 374.75, 'duration': 1.52}, {'end': 379.992, 'text': "So that's text and HTML.", 'start': 378.011, 'duration': 1.981}, {'end': 384.194, 'text': 'Now we also have append and prepend which do just that.', 'start': 380.032, 'duration': 4.162}, {'end': 385.915, 'text': 'And let me give you an example.', 'start': 384.574, 'duration': 1.341}, {'end': 387.896, 'text': "I'm going to set up a list up here.", 'start': 385.935, 'duration': 1.961}], 'summary': 'Demonstration of setting, getting, and manipulating values and html content in web development.', 'duration': 45.221, 'max_score': 342.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls342675.jpg'}, {'end': 484.176, 'src': 'embed', 'start': 447.674, 'weight': 3, 'content': [{'end': 450.657, 'text': "If we reload, you'll see that it got added to the end.", 'start': 447.674, 'duration': 2.983}, {'end': 455.46, 'text': 'So it puts inside of the ul at the very end.', 'start': 451.197, 'duration': 4.263}, {'end': 461.615, 'text': "Now at the same time we have prepend which I'm sure you can think of what that's going to do.", 'start': 456.072, 'duration': 5.543}, {'end': 475.884, 'text': "So if we change this to prepend and reload and now you'll see that it put it at the beginning of the list.", 'start': 462.976, 'duration': 12.908}, {'end': 484.176, 'text': 'we also have append to and prepend to where we can take one element and append it to another.', 'start': 478.513, 'duration': 5.663}], 'summary': 'Demonstrates adding elements to a list using append and prepend.', 'duration': 36.502, 'max_score': 447.674, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls447674.jpg'}, {'end': 566.234, 'src': 'embed', 'start': 526.907, 'weight': 4, 'content': [{'end': 535.51, 'text': "so if we go prepend to and reload, you'll see that now it's reversed the other way around.", 'start': 526.907, 'duration': 8.603}, {'end': 543.46, 'text': "now we do have before and after, because when you append or prepend you're actually putting it.", 'start': 537.259, 'duration': 6.201}, {'end': 552.983, 'text': "we're taking the li and putting it inside of the ul with before and after you can put stuff after the ul, not inside it.", 'start': 543.46, 'duration': 9.523}, {'end': 561.144, 'text': "so for instance, let's say, actually we'll use the ul example.", 'start': 552.983, 'duration': 8.161}, {'end': 566.234, 'text': 'so ul dot before And in.', 'start': 561.144, 'duration': 5.09}], 'summary': 'Demonstrating reversal of elements with prepend and reload in ul', 'duration': 39.327, 'max_score': 526.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls526907.jpg'}], 'start': 217.805, 'title': 'Manipulating dom with jquery', 'summary': 'Covers manipulating dom elements with jquery, including adding, removing, and toggling classes, changing text and html content, getting and setting values, appending and prepending elements to the dom, and using jquery methods like append, prepend, before, after, empty, detach, and working with attributes.', 'chapters': [{'end': 484.176, 'start': 217.805, 'title': 'Manipulating dom elements with jquery', 'summary': 'Covers manipulating dom elements with jquery, including adding, removing, and toggling classes, changing text and html content, getting and setting values, and appending and prepending elements to the dom.', 'duration': 266.371, 'highlights': ['The chapter covers manipulating DOM elements with jQuery, including adding, removing, and toggling classes, changing text and HTML content, getting and setting values, and appending and prepending elements to the DOM.', 'jQuery allows adding, removing, and toggling classes, with a simple syntax and easy implementation.', 'Manipulating text and HTML content within the DOM is demonstrated, with examples of using .text and .html methods to change and display content.', 'Examples of getting and setting values using .text and .html methods are provided, showcasing the retrieval and modification of text and HTML content within the DOM.', 'The concepts of appending and prepending elements to the DOM are explained, along with practical examples of using .append and .prepend methods to add elements to a list.']}, {'end': 644.267, 'start': 484.176, 'title': 'Manipulating dom with jquery', 'summary': 'Demonstrates how to manipulate the dom using jquery methods such as append, prepend, before, after, empty, detach, and working with attributes.', 'duration': 160.091, 'highlights': ['Manipulating the DOM using methods like append, prepend, before, after, empty, detach, and working with attributes The chapter covers various methods for manipulating the DOM, including append, prepend, before, after, empty, detach, and working with attributes.', 'Demonstration of appending and prepending elements to the DOM The demonstration showcases the process of appending and prepending elements to the DOM, showing the practical implementation of these operations.', 'Explanation of before and after methods for inserting content outside of an element The explanation of the before and after methods provides insight into inserting content before and after an element, showcasing the versatility of these operations.', 'Illustration of using empty method to remove inner elements while keeping the parent element The illustration of the empty method highlights its functionality in removing inner elements while retaining the parent element, providing a clear understanding of its purpose.', 'Functionality of detach method in removing an element from the DOM The functionality of the detach method is explained, demonstrating its capability to remove an element from the DOM, showcasing its practical application.']}], 'duration': 426.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls217805.jpg', 'highlights': ['Covers manipulating dom elements with jquery, including adding, removing, and toggling classes, changing text and html content, getting and setting values, appending and prepending elements to the dom, and using jquery methods like append, prepend, before, after, empty, detach, and working with attributes.', 'jQuery allows adding, removing, and toggling classes, with a simple syntax and easy implementation.', 'Examples of getting and setting values using .text and .html methods are provided, showcasing the retrieval and modification of text and HTML content within the DOM.', 'Demonstration of appending and prepending elements to the DOM The demonstration showcases the process of appending and prepending elements to the DOM, showing the practical implementation of these operations.', 'Explanation of before and after methods for inserting content outside of an element The explanation of the before and after methods provides insight into inserting content before and after an element, showcasing the versatility of these operations.']}, {'end': 977.106, 'segs': [{'end': 724.735, 'src': 'embed', 'start': 687.356, 'weight': 2, 'content': [{'end': 691.437, 'text': "And then we'll pass in the value, which we want underscore blank.", 'start': 687.356, 'duration': 4.081}, {'end': 697.659, 'text': "So now if we reload, click Google, it's going to open another window.", 'start': 692.817, 'duration': 4.842}, {'end': 700.919, 'text': 'And you can see if we look at it, it has a target blank.', 'start': 697.699, 'duration': 3.22}, {'end': 702.96, 'text': 'So we did that from jQuery.', 'start': 701.24, 'duration': 1.72}, {'end': 708.468, 'text': 'Now we can also use adder to get the attribute.', 'start': 704.747, 'duration': 3.721}, {'end': 724.735, 'text': 'So for instance, if we want to alert, we could say a.Adder and then pass in whatever the attribute we want, so in this case href.', 'start': 708.689, 'duration': 16.046}], 'summary': 'Using jquery to add attributes to elements, like target blank and href.', 'duration': 37.379, 'max_score': 687.356, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls687356.jpg'}, {'end': 843.848, 'src': 'embed', 'start': 820.838, 'weight': 1, 'content': [{'end': 828.824, 'text': '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.', 'start': 820.838, 'duration': 7.986}, {'end': 832.106, 'text': "So that's the difference between Wrap and Wrap All.", 'start': 829.904, 'duration': 2.202}, {'end': 839.404, 'text': "Now, before we move on to arrays, there's something that I'd like to show you.", 'start': 833.74, 'duration': 5.664}, {'end': 843.848, 'text': 'I want to have an input where we can actually add an item to this list.', 'start': 839.424, 'duration': 4.424}], 'summary': 'The difference between wrap and wrap all is in how paragraphs are wrapped, and an input is to be added to the list.', 'duration': 23.01, 'max_score': 820.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls820838.jpg'}, {'end': 924.042, 'src': 'embed', 'start': 887.443, 'weight': 0, 'content': [{'end': 894.005, 'text': 'So we need to use key up and we need to check the key code because each key has its own code.', 'start': 887.443, 'duration': 6.562}, {'end': 902.188, 'text': "So let's do new item which is the input and then we're going to do .", 'start': 894.766, 'duration': 7.422}, {'end': 913.64, 'text': "keyup Okay, key up, and I'm going to pass in a function and pass in our e right there.", 'start': 902.188, 'duration': 11.452}, {'end': 918.741, 'text': "And then we're going to say var code and set that to e.which.", 'start': 914.761, 'duration': 3.98}, {'end': 920.302, 'text': "That'll get the key code.", 'start': 919.121, 'duration': 1.181}, {'end': 924.042, 'text': 'And enter is actually the code of 13.', 'start': 921.262, 'duration': 2.78}], 'summary': 'Using key up to check key codes for input, where enter is code 13.', 'duration': 36.599, 'max_score': 887.443, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls887443.jpg'}], 'start': 644.727, 'title': 'Jquery attribute manipulation, wrap methods, and javascript event handling', 'summary': "Discusses manipulating attributes using jquery, including adding a target attribute, wrapping elements using jquery's wrap and wrap all methods, and using javascript keyup event to append input values to a list.", 'chapters': [{'end': 754.339, 'start': 644.727, 'title': 'Jquery attribute manipulation', 'summary': 'Discusses how to manipulate attributes using jquery, including adding a target attribute to open a link in a new window, retrieving an attribute value, and removing an attribute.', 'duration': 109.612, 'highlights': ['The chapter demonstrates adding a target attribute to open a link in a new window using jQuery, resulting in a new window opening when the link is clicked.', 'It explains how to use adder to get the attribute value, exemplified by retrieving the href attribute value of a link using jQuery.', 'The chapter also covers removing attributes using jQuery, specifically showcasing the removal of the target attribute from a link.']}, {'end': 843.848, 'start': 755.86, 'title': 'Jquery wrap method and wrap all method', 'summary': "Demonstrates the use of jquery's wrap and wrap all methods to wrap specific elements in other elements, such as paragraphs in h1 tags, and illustrates the difference between the two methods by wrapping both paragraphs in one h1 tag using wrap all.", 'duration': 87.988, 'highlights': ["The chapter illustrates the use of jQuery's Wrap and Wrap All methods to wrap specific elements in other elements, such as paragraphs in H1 tags.", 'It demonstrates that the Wrap method wraps each specified element in the designated tag individually.', 'The chapter also explains the difference between Wrap and Wrap All methods by showing that Wrap All wraps both specified elements in a single designated tag.']}, {'end': 977.106, 'start': 844.768, 'title': 'Javascript event handling in html', 'summary': "Explains how to use javascript keyup event to append input values to a list, with an example of appending items on hitting 'enter' key.", 'duration': 132.338, 'highlights': ["The chapter demonstrates using the keyup event in JavaScript to detect the 'enter' key press, with the code for 'enter' key being 13.", "It explains how to prevent the default behavior on 'enter' key press and append the input value as a list item.", 'The example showcases appending test items to a list using the keyup event, providing a practical demonstration of the concept.']}], 'duration': 332.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls644727.jpg', 'highlights': ["The chapter demonstrates using the keyup event in JavaScript to detect the 'enter' key press, with the code for 'enter' key being 13.", "The chapter illustrates the use of jQuery's Wrap and Wrap All methods to wrap specific elements in other elements, such as paragraphs in H1 tags.", 'The chapter demonstrates adding a target attribute to open a link in a new window using jQuery, resulting in a new window opening when the link is clicked.']}, {'end': 1256.982, 'segs': [{'end': 1045.924, 'src': 'embed', 'start': 977.806, 'weight': 0, 'content': [{'end': 979.647, 'text': "And we'll be able to keep adding to that list.", 'start': 977.806, 'duration': 1.841}, {'end': 986.07, 'text': "Now obviously when we reload it's going to disappear because it's not persisting to a database or anything like that.", 'start': 979.767, 'duration': 6.303}, {'end': 992.093, 'text': 'All right, so now what I want to do is move on to arrays and some of the array methods.', 'start': 986.09, 'duration': 6.003}, {'end': 1003.014, 'text': "So what I'm going to do is create a variable called myR, or myArray, and we're going to set it to just a bunch of names.", 'start': 993.667, 'duration': 9.347}, {'end': 1015.942, 'text': "We'll say Brad, Kelly, Nate, and Jose.", 'start': 1003.034, 'duration': 12.908}, {'end': 1018.865, 'text': 'Okay, so we have this array of names.', 'start': 1015.963, 'duration': 2.902}, {'end': 1026.252, 'text': 'Now if you want to loop through an array you can use the each loop or the each method.', 'start': 1021.05, 'duration': 5.202}, {'end': 1028.753, 'text': "So it's going to be dollar sign dot each.", 'start': 1026.313, 'duration': 2.44}, {'end': 1031.116, 'text': 'All right.', 'start': 1030.734, 'duration': 0.382}, {'end': 1037.279, 'text': "And then in here we're going to pass in my array and then our function.", 'start': 1031.195, 'duration': 6.084}, {'end': 1042.642, 'text': 'Okay And this function is going to take in two things.', 'start': 1037.299, 'duration': 5.343}, {'end': 1045.924, 'text': "It's going to take in an index and a value.", 'start': 1042.682, 'duration': 3.242}], 'summary': 'Introducing array manipulation with example names like brad, kelly, nate, and jose, and explaining the each method for looping through an array.', 'duration': 68.118, 'max_score': 977.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls977806.jpg'}, {'end': 1129.22, 'src': 'heatmap', 'start': 1106.731, 'weight': 1, 'content': [{'end': 1116.515, 'text': "and let's see, dollar sign is not defined all right.", 'start': 1106.731, 'duration': 9.784}, {'end': 1122.137, 'text': 'and now you can see we have the names output in our application.', 'start': 1116.515, 'duration': 5.622}, {'end': 1129.22, 'text': "now if we want to take, let's say, these list items and put them into array in array, we can do that as well.", 'start': 1122.137, 'duration': 7.083}], 'summary': 'Code error: dollar sign not defined, names output in application, list items put into array', 'duration': 22.489, 'max_score': 1106.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls1106731.jpg'}, {'end': 1250.417, 'src': 'embed', 'start': 1215.391, 'weight': 2, 'content': [{'end': 1222.503, 'text': "Let's say console dot log val dot inner HTML.", 'start': 1215.391, 'duration': 7.112}, {'end': 1226.85, 'text': "And yeah, I can see we're getting all the list items.", 'start': 1224.666, 'duration': 2.184}, {'end': 1237.027, 'text': 'And if we wanted to somehow edit that content somehow and then reapply it to the list, we could do that.', 'start': 1228.621, 'duration': 8.406}, {'end': 1239.369, 'text': "But I'm not going to get that far into it.", 'start': 1237.608, 'duration': 1.761}, {'end': 1240.19, 'text': 'All right.', 'start': 1239.889, 'duration': 0.301}, {'end': 1242.411, 'text': "So that's basic DOM manipulation.", 'start': 1240.27, 'duration': 2.141}, {'end': 1250.417, 'text': 'Okay So just adding stuff to our document object model, removing it, updating it, things like that.', 'start': 1242.431, 'duration': 7.986}], 'summary': 'Demonstrates basic dom manipulation using console.log and manipulating list items.', 'duration': 35.026, 'max_score': 1215.391, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls1215391.jpg'}], 'start': 977.806, 'title': 'Javascript fundamentals', 'summary': 'Introduces javascript arrays and looping, demonstrating array methods, and dom manipulation techniques, including basic effects and animation.', 'chapters': [{'end': 1131.661, 'start': 977.806, 'title': 'Javascript arrays and looping', 'summary': 'Introduces the concept of arrays and array methods in javascript, demonstrating how to loop through an array using the each method and output the array elements in an application, along with a brief mention of persisting data to a database.', 'duration': 153.855, 'highlights': ['The chapter introduces the concept of arrays and array methods in JavaScript. It explains the creation of an array of names and the usage of array methods for iteration.', 'Demonstrates how to loop through an array using the each method. The transcript shows the usage of the each method to iterate through the array, displaying each name using console.log and appending the names to a list in an application.', 'Brief mention of persisting data to a database. The transcript briefly mentions the issue of data persistence by stating that the list will disappear upon reloading due to the lack of persistence to a database.']}, {'end': 1256.982, 'start': 1136.352, 'title': 'Dom manipulation and basic effects', 'summary': 'Covers basic dom manipulation techniques using javascript, including converting elements to an array, accessing inner html, and applying effects and animation to the document object model.', 'duration': 120.63, 'highlights': ['The chapter covers basic DOM manipulation techniques including converting elements to an array, accessing inner HTML, and applying effects and animation to the document object model.', 'The speaker demonstrates using JavaScript to create a new array and assign an id to a ul element, showing practical application of DOM manipulation.', 'The transcript discusses the process of accessing inner HTML and utilizing each loop to iterate through the new array, showcasing practical implementation of DOM manipulation.', 'The chapter briefly touches on the concept of applying effects and animation to the document object model, hinting at the content of the next video.']}], 'duration': 279.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q4FWSdX55ls/pics/q4FWSdX55ls977806.jpg', 'highlights': ['Introduces javascript arrays and array methods for iteration.', 'Demonstrates looping through an array using the each method.', 'Covers basic DOM manipulation techniques and practical applications.', 'Briefly mentions persisting data to a database.']}], 'highlights': ['Covers manipulating dom elements with jquery, including adding, removing, and toggling classes, changing text and html content, getting and setting values, appending and prepending elements to the dom, and using jquery methods like append, prepend, before, after, empty, detach, and working with attributes.', 'Demonstration of appending and prepending elements to the DOM The demonstration showcases the process of appending and prepending elements to the DOM, showing the practical implementation of these operations.', "The chapter demonstrates using the keyup event in JavaScript to detect the 'enter' key press, with the code for 'enter' key being 13.", "The chapter illustrates the use of jQuery's Wrap and Wrap All methods to wrap specific elements in other elements, such as paragraphs in H1 tags."]}