title
JQuery Video Tutorial

description
Best JQuery Book : http://goo.gl/e30dUI This is the first part of my JQuery Video Tutorial. I will also cover all of the techniques that go into implementing a dynamic site using Asynchronous JavaScript and XML (AJAX). Code is Here: http://bit.ly/i3gH6c Article on AJAX Here:http://bit.ly/fystWa

detail
{'title': 'JQuery Video Tutorial', 'heatmap': [{'end': 310.892, 'start': 296.562, 'weight': 0.724}, {'end': 473.687, 'start': 430.104, 'weight': 0.865}, {'end': 535.931, 'start': 487.733, 'weight': 0.823}, {'end': 890.662, 'start': 843.014, 'weight': 0.71}], 'summary': "This jquery video tutorial covers the basics of jquery and ajax, including the ease of selecting elements, the benefits of using jquery for ajax, and the process of installing the jquery library from google, as well as the efficient selection of elements, css editing capabilities, and dynamic styling based on class, id, and hierarchy, along with examples of color changes and multiple element selection. it also delves into matching sibling elements with css, jquery's selection of sibling and child elements, and its flexibility in manipulating the dom, showcasing styling and event handling using jquery with examples of changing background colors and classes for table rows.", 'chapters': [{'end': 99.753, 'segs': [{'end': 38.427, 'src': 'embed', 'start': 0.089, 'weight': 0, 'content': [{'end': 4.354, 'text': 'Well hello internet and welcome to part one of my jQuery slash Ajax tutorial.', 'start': 0.089, 'duration': 4.265}, {'end': 9.962, 'text': "Today I'm going to show you how to be able to select pretty much any of these different elements on this web page.", 'start': 4.495, 'duration': 5.467}, {'end': 11.684, 'text': "I know it's a mess, don't worry about that.", 'start': 10.022, 'duration': 1.662}, {'end': 16.55, 'text': "We're going to clean it up and then dirty it up again with a bunch of different selection tools that are available with jQuery.", 'start': 11.724, 'duration': 4.826}, {'end': 24.437, 'text': 'First thing I want to explain to you is that Ajax or asynchronous JavaScript and XML is not a programming language.', 'start': 16.752, 'duration': 7.685}, {'end': 31.662, 'text': "It's just a series of techniques used to dynamically change web pages, communicate with a server without page reloads.", 'start': 24.477, 'duration': 7.185}, {'end': 38.427, 'text': 'And what jQuery does is it allows us to do this cross browser on any browser extremely easily.', 'start': 31.843, 'duration': 6.584}], 'summary': 'Jquery/ajax tutorial demonstrates selecting elements and using dynamic web page techniques.', 'duration': 38.338, 'max_score': 0.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg89.jpg'}, {'end': 81.178, 'src': 'embed', 'start': 56.819, 'weight': 2, 'content': [{'end': 62.463, 'text': 'Now, whenever you first want to install the jQuery library or framework, whatever you want to call it.', 'start': 56.819, 'duration': 5.644}, {'end': 66.706, 'text': "it's a series of functions and tools and so forth that you can automatically add to your scripts.", 'start': 62.463, 'duration': 4.243}, {'end': 67.567, 'text': 'This is what you do.', 'start': 66.906, 'duration': 0.661}, {'end': 71.41, 'text': 'Just type in script type and then define it as a JavaScript file.', 'start': 67.627, 'duration': 3.783}, {'end': 76.194, 'text': "And here what I did was actually linked to the jQuery library that's available from Google.", 'start': 71.53, 'duration': 4.664}, {'end': 81.178, 'text': "What this will do is depending upon where in the world your client is, who's looking at your website.", 'start': 76.374, 'duration': 4.804}], 'summary': 'Installing jquery library adds functions and tools to scripts for better performance and user experience.', 'duration': 24.359, 'max_score': 56.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg56819.jpg'}], 'start': 0.089, 'title': 'Jquery & ajax tutorial', 'summary': 'Introduces the basics of jquery and ajax, highlighting the ease of selecting elements, the benefits of using jquery for ajax, and the simple process of installing the jquery library from google.', 'chapters': [{'end': 99.753, 'start': 0.089, 'title': 'Jquery & ajax tutorial', 'summary': 'Introduces the basics of jquery and ajax, highlighting the ease of selecting elements, the benefits of using jquery for ajax, and the simple process of installing the jquery library from google.', 'duration': 99.664, 'highlights': ['jQuery makes it easy to select elements on a web page The tutorial demonstrates how to select different elements on a web page using jQuery, emphasizing its ease of use.', 'jQuery simplifies AJAX for cross-browser compatibility The tutorial explains how jQuery facilitates AJAX, enabling dynamic web page changes and server communication without reloads on any browser.', 'Installing jQuery library from Google for automatic loading and updates The process of installing the jQuery library from Google is outlined, highlighting its automatic loading based on client location and smart updates.']}], 'duration': 99.664, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg89.jpg', 'highlights': ['jQuery simplifies AJAX for cross-browser compatibility The tutorial explains how jQuery facilitates AJAX, enabling dynamic web page changes and server communication without reloads on any browser.', 'jQuery makes it easy to select elements on a web page The tutorial demonstrates how to select different elements on a web page using jQuery, emphasizing its ease of use.', 'Installing jQuery library from Google for automatic loading and updates The process of installing the jQuery library from Google is outlined, highlighting its automatic loading based on client location and smart updates.']}, {'end': 468.225, 'segs': [{'end': 165.236, 'src': 'embed', 'start': 138.293, 'weight': 0, 'content': [{'end': 141.456, 'text': "So that's just one of the reasons why people use jQuery.", 'start': 138.293, 'duration': 3.163}, {'end': 146.2, 'text': 'It is so extremely easy to use, saves you a ton of typing.', 'start': 141.636, 'duration': 4.564}, {'end': 149.163, 'text': 'And the same is also true if you want to get element by ID.', 'start': 146.36, 'duration': 2.803}, {'end': 159.652, 'text': "If you'd want to select all the different h3 tags in a document that lie inside of a paragraph tag, you just type in p for the paragraph tag, H3.", 'start': 149.343, 'duration': 10.309}, {'end': 160.292, 'text': 'There you go.', 'start': 159.772, 'duration': 0.52}, {'end': 165.236, 'text': 'Now you can access and change dynamically any H3 tag that lies inside of a paragraph.', 'start': 160.332, 'duration': 4.904}], 'summary': 'Jquery is easy to use, saves time, and allows for dynamic element selection and manipulation.', 'duration': 26.943, 'max_score': 138.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg138293.jpg'}, {'end': 199.761, 'src': 'embed', 'start': 176.945, 'weight': 2, 'content': [{'end': 184.13, 'text': "I'm going to show you how to get things based off of ID names, based off of class names, based off of where they lie inside of other elements,", 'start': 176.945, 'duration': 7.185}, {'end': 185.111, 'text': 'and so forth, and so on.', 'start': 184.13, 'duration': 0.981}, {'end': 186.532, 'text': "It's just a bunch of random things.", 'start': 185.171, 'duration': 1.361}, {'end': 189.614, 'text': 'This is just a bunch of random information over here, nothing that important.', 'start': 186.552, 'duration': 3.062}, {'end': 194.157, 'text': "Well, what I'm going to do here first is I'm going to call jQuery, since I have it loaded in the document.", 'start': 189.674, 'duration': 4.483}, {'end': 195.518, 'text': "And I'm going to say document.", 'start': 194.397, 'duration': 1.121}, {'end': 199.761, 'text': "Whenever you are ready for me to execute, and that's what we're doing right there.", 'start': 195.658, 'duration': 4.103}], 'summary': 'Demonstrating usage of jquery to manipulate elements based on id and class names.', 'duration': 22.816, 'max_score': 176.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg176945.jpg'}, {'end': 325.388, 'src': 'heatmap', 'start': 296.562, 'weight': 1, 'content': [{'end': 298.343, 'text': 'And just so you know what I mean, here they are over here.', 'start': 296.562, 'duration': 1.781}, {'end': 301.364, 'text': 'See, class equals hero for these last two guys.', 'start': 298.443, 'duration': 2.921}, {'end': 302.465, 'text': 'Hopefully you get that.', 'start': 301.744, 'duration': 0.721}, {'end': 304.907, 'text': "All right, so we're going to go back into jQuery again.", 'start': 302.725, 'duration': 2.182}, {'end': 306.508, 'text': "We're going to type in .", 'start': 304.927, 'duration': 1.581}, {'end': 310.892, 'text': 'hero, which is how you define that you want to grab a class named hero.', 'start': 306.508, 'duration': 4.384}, {'end': 313.354, 'text': "And then we're going to come in here and go CSS.", 'start': 311.152, 'duration': 2.202}, {'end': 316.797, 'text': "And we're going to say that we want to edit the color, which is the color of the text.", 'start': 313.554, 'duration': 3.243}, {'end': 319.539, 'text': 'You really need to know CSS to use jQuery.', 'start': 317.196, 'duration': 2.343}, {'end': 324.567, 'text': 'And just by putting that little bit of code inside of there, you can see these two guys are now red, which is awesome.', 'start': 319.72, 'duration': 4.847}, {'end': 325.388, 'text': "Let's try some more.", 'start': 324.587, 'duration': 0.801}], 'summary': 'Using jquery to change the color of two class hero elements to red.', 'duration': 28.826, 'max_score': 296.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg296562.jpg'}], 'start': 99.753, 'title': 'Jquery basics and selection', 'summary': 'Introduces the basics of jquery, emphasizing ease of use and efficiency in selecting elements, along with its css editing capabilities. it also covers dynamically selecting and styling html elements based on class, id, and hierarchy, with examples of color changes and multiple element selection.', 'chapters': [{'end': 268.824, 'start': 99.753, 'title': 'Introduction to jquery basics', 'summary': 'Introduces the basics of jquery, highlighting its ease of use, efficiency in selecting elements, and its ability to execute functions on document ready, saving time and effort in coding, as well as demonstrating css editing capabilities.', 'duration': 169.071, 'highlights': ['jQuery enables easy and efficient selection of elements, reducing the need for extensive manual coding, thus saving time and effort.', 'Demonstrates the ability to execute a series of functions on document ready, showcasing the efficiency and convenience of jQuery in handling dynamic content.', 'Illustrates the capability of jQuery to edit CSS attributes, exemplifying its versatility in web development.']}, {'end': 468.225, 'start': 269.225, 'title': 'Jquery selection and styling', 'summary': 'Demonstrates how to use jquery to dynamically select and style html elements based on their class, id, and hierarchy, with examples of color changes and multiple element selection.', 'duration': 199, 'highlights': ['jQuery can dynamically add padding and trigger events on web pages. The demonstration shows how jQuery can dynamically add padding and trigger events on web pages, showcasing the dynamic nature of jQuery manipulation.', 'Using jQuery to select and style elements based on their class and apply CSS changes. The tutorial illustrates how to use jQuery to select elements based on their class and apply CSS changes, with examples of changing text color and background color.', 'Demonstration of how to select elements by their ID and style them using jQuery. The tutorial explains how to select elements by their ID using jQuery and style them, showcasing the process of targeting specific elements by their unique identifier.', 'Explanation of how to select and style multiple different tags using jQuery. The tutorial demonstrates the process of selecting and styling multiple different tags using jQuery, showcasing the flexibility and efficiency of jQuery manipulation.', 'Illustration of selecting elements based on their hierarchy and applying style changes using jQuery. The transcript provides an example of selecting elements based on their hierarchy and applying style changes using jQuery, demonstrating the ability to target specific elements based on their position within the HTML structure.']}], 'duration': 368.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg99753.jpg', 'highlights': ['jQuery enables easy and efficient selection of elements, reducing the need for extensive manual coding, thus saving time and effort.', 'Demonstrates the ability of jQuery to edit CSS attributes, exemplifying its versatility in web development.', 'Demonstration of how to select elements by their ID and style them using jQuery, showcasing the process of targeting specific elements by their unique identifier.', 'Illustration of selecting elements based on their hierarchy and applying style changes using jQuery, demonstrating the ability to target specific elements based on their position within the HTML structure.', 'Using jQuery to select and style elements based on their class and apply CSS changes, with examples of changing text color and background color.']}, {'end': 1022.07, 'segs': [{'end': 498.65, 'src': 'embed', 'start': 468.605, 'weight': 4, 'content': [{'end': 473.687, 'text': "And let's say we want to match all elements that are siblings of something else.", 'start': 468.605, 'duration': 5.082}, {'end': 478.369, 'text': "So what we're going to do is we're going to specifically target down here where it says stuff 1, stuff 2, stuff 3.", 'start': 473.947, 'duration': 4.422}, {'end': 483.511, 'text': "What I'm going to tell it to do is I'm going to tell it, I want you to match for all h4 tags.", 'start': 478.369, 'duration': 5.142}, {'end': 487.513, 'text': "this guy's an h4, that is a sibling of this guy right here.", 'start': 483.511, 'duration': 4.002}, {'end': 492.299, 'text': 'And this little guy right here, actually has an ID of Rand Stuff.', 'start': 487.733, 'duration': 4.566}, {'end': 498.65, 'text': "So how do you match for Rand Stuff this ID name and find a very specific sibling? I'm going to show you.", 'start': 492.46, 'duration': 6.19}], 'summary': 'Target siblings of specific h4 tags using css selectors.', 'duration': 30.045, 'max_score': 468.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg468605.jpg'}, {'end': 552.654, 'src': 'heatmap', 'start': 487.733, 'weight': 2, 'content': [{'end': 492.299, 'text': 'And this little guy right here, actually has an ID of Rand Stuff.', 'start': 487.733, 'duration': 4.566}, {'end': 498.65, 'text': "So how do you match for Rand Stuff this ID name and find a very specific sibling? I'm going to show you.", 'start': 492.46, 'duration': 6.19}, {'end': 501.174, 'text': "I'm in here, and we're going to type in Rand Stuff.", 'start': 498.83, 'duration': 2.344}, {'end': 502.578, 'text': "since that's an ID.", 'start': 501.638, 'duration': 0.94}, {'end': 504.039, 'text': "And then we're going to hit tilde.", 'start': 502.759, 'duration': 1.28}, {'end': 507.161, 'text': "It's in the upper left-hand corner of your keyboard, if you don't know.", 'start': 504.139, 'duration': 3.022}, {'end': 511.683, 'text': "And I'm going to say I want to match any H4 tags that are siblings of that guy.", 'start': 507.181, 'duration': 4.502}, {'end': 514.304, 'text': "And let's just copy this down here.", 'start': 512.143, 'duration': 2.161}, {'end': 516.664, 'text': 'Copy this, paste it in there, file save.', 'start': 514.364, 'duration': 2.3}, {'end': 519.707, 'text': "And you can see it's now purple, just like we wanted it to find.", 'start': 516.804, 'duration': 2.903}, {'end': 522.488, 'text': 'And you say, well, I want to also get the other tag.', 'start': 519.847, 'duration': 2.641}, {'end': 524.009, 'text': "Well, the tag underneath that's an H5 tag.", 'start': 522.528, 'duration': 1.481}, {'end': 529.07, 'text': "So we're just going to type in comma h5, and we'll be able to grab both of them.", 'start': 525.249, 'duration': 3.821}, {'end': 530.51, 'text': 'And as you can see, I just did that.', 'start': 529.09, 'duration': 1.42}, {'end': 535.931, 'text': 'So that is how you actually get siblings of other things inside of jQuery.', 'start': 530.77, 'duration': 5.161}, {'end': 541.732, 'text': 'We can also make all child elements of the class superhumans italic.', 'start': 536.371, 'duration': 5.361}, {'end': 542.972, 'text': 'And this is how we do that.', 'start': 541.892, 'duration': 1.08}, {'end': 546.193, 'text': 'So come in here, superhumans.', 'start': 543.232, 'duration': 2.961}, {'end': 548.353, 'text': 'And then we want to get the child elements.', 'start': 546.673, 'duration': 1.68}, {'end': 552.654, 'text': 'So everything that lies inside of superhumans is going to be changed to italic.', 'start': 548.433, 'duration': 4.221}], 'summary': 'Using jquery to match and find specific siblings, plus styling child elements.', 'duration': 64.921, 'max_score': 487.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg487733.jpg'}, {'end': 617.409, 'src': 'embed', 'start': 571.264, 'weight': 3, 'content': [{'end': 572.946, 'text': 'That targets children elements.', 'start': 571.264, 'duration': 1.682}, {'end': 579.111, 'text': "And there's literally almost anything you could imagine to find inside a jQuery in regards to grabbing something.", 'start': 572.966, 'duration': 6.145}, {'end': 582.994, 'text': "Like here, we're going to underline all the elements in a div that contains a h4 tag.", 'start': 579.211, 'duration': 3.783}, {'end': 584.977, 'text': "So we're going to say div.", 'start': 583.956, 'duration': 1.021}, {'end': 589.842, 'text': "We're looking for a div that has a h4 tag inside of it.", 'start': 585.077, 'duration': 4.765}, {'end': 592.365, 'text': "So you just speak it out just like you're thinking.", 'start': 590.163, 'duration': 2.202}, {'end': 594.267, 'text': "And we're going to come in here and dot CSS.", 'start': 592.565, 'duration': 1.702}, {'end': 598.111, 'text': "And then we're going to go text, integration, comma, underline.", 'start': 594.407, 'duration': 3.704}, {'end': 602.899, 'text': 'And you can see it underlined all of those different guys inside of there.', 'start': 598.496, 'duration': 4.403}, {'end': 606.542, 'text': 'Because that div contained an h4 tag.', 'start': 603.159, 'duration': 3.383}, {'end': 609.143, 'text': "So that's why those are all underlined now.", 'start': 607.042, 'duration': 2.101}, {'end': 613.266, 'text': 'You can also select a div, for example, with an ID defined.', 'start': 609.283, 'duration': 3.983}, {'end': 616.068, 'text': 'And if you choose, put a border around it.', 'start': 613.646, 'duration': 2.422}, {'end': 617.409, 'text': 'Same sort of thing.', 'start': 616.388, 'duration': 1.021}], 'summary': 'Using jquery to select and style elements, like underlining all divs containing h4 tags', 'duration': 46.145, 'max_score': 571.264, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg571264.jpg'}, {'end': 852.098, 'src': 'embed', 'start': 817.725, 'weight': 1, 'content': [{'end': 823.026, 'text': "I just wanted to give you a taste of this just so you see some of the other power that's available inside of jQuery.", 'start': 817.725, 'duration': 5.301}, {'end': 825.727, 'text': "So let's say I want to do some styling.", 'start': 823.226, 'duration': 2.501}, {'end': 828.988, 'text': 'And I want to say table, T-H-N-T-D.', 'start': 825.807, 'duration': 3.181}, {'end': 831.989, 'text': "And let's say we want to create a border of one pixel.", 'start': 829.288, 'duration': 2.701}, {'end': 832.989, 'text': 'Make it solid.', 'start': 832.149, 'duration': 0.84}, {'end': 833.689, 'text': 'Make it black.', 'start': 833.109, 'duration': 0.58}, {'end': 834.369, 'text': 'There we are.', 'start': 833.889, 'duration': 0.48}, {'end': 837.611, 'text': "And then we're going to also create table row.", 'start': 834.689, 'duration': 2.922}, {'end': 840.392, 'text': "We're going to call it nice table column.", 'start': 837.631, 'duration': 2.761}, {'end': 842.353, 'text': 'Do some styling on this background.', 'start': 840.512, 'duration': 1.841}, {'end': 852.098, 'text': "F-A-F-A-D2 And we're going to create another definition that is going to be triggered when mouse rolls over this guy.", 'start': 843.014, 'duration': 9.084}], 'summary': 'Demonstrates styling using jquery for table and table elements.', 'duration': 34.373, 'max_score': 817.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg817725.jpg'}, {'end': 890.662, 'src': 'heatmap', 'start': 843.014, 'weight': 0.71, 'content': [{'end': 852.098, 'text': "F-A-F-A-D2 And we're going to create another definition that is going to be triggered when mouse rolls over this guy.", 'start': 843.014, 'duration': 9.084}, {'end': 855.32, 'text': 'This mouse on has nothing to do with this event though.', 'start': 852.719, 'duration': 2.601}, {'end': 858.381, 'text': 'I just wanted to give you a taste of what can be done with events.', 'start': 855.34, 'duration': 3.041}, {'end': 864.062, 'text': "Background And here we're going to say 1E90FF.", 'start': 858.722, 'duration': 5.34}, {'end': 866.863, 'text': 'So we just find these three different types of styles.', 'start': 864.342, 'duration': 2.521}, {'end': 868.603, 'text': "These are the two we're going to be playing with.", 'start': 866.903, 'duration': 1.7}, {'end': 871.904, 'text': "So let's jump back down into our jQuery area.", 'start': 868.643, 'duration': 3.261}, {'end': 879.786, 'text': "And here I'm going to show you how to change the class definitions for elements of the ID numbers, which is up here.", 'start': 872.164, 'duration': 7.622}, {'end': 882.109, 'text': "Let's just file save this just so we can see.", 'start': 880.166, 'duration': 1.943}, {'end': 883.992, 'text': "Okay, so you can see it's a little bit nicer now.", 'start': 882.189, 'duration': 1.803}, {'end': 885.875, 'text': "It doesn't have that hideous grayness to it.", 'start': 884.012, 'duration': 1.863}, {'end': 887.257, 'text': "Alright, so let's come in here.", 'start': 886.095, 'duration': 1.162}, {'end': 890.662, 'text': 'Again, changing elements of type ID numbers.', 'start': 887.557, 'duration': 3.105}], 'summary': 'Creating and customizing web elements and styles using jquery, including changing class definitions and id numbers.', 'duration': 47.648, 'max_score': 843.014, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg843014.jpg'}, {'end': 958.346, 'src': 'embed', 'start': 928.969, 'weight': 0, 'content': [{'end': 932.792, 'text': "Now I'm going to show you how to change the class definition based off of mouse movements.", 'start': 928.969, 'duration': 3.823}, {'end': 938.937, 'text': "And in the next tutorial, I'm going to show you how to change a ton of things based off of events as they are triggered on the page.", 'start': 932.852, 'duration': 6.085}, {'end': 940.298, 'text': 'So that should be really fun.', 'start': 939.237, 'duration': 1.061}, {'end': 945.162, 'text': "Okay, so I'm going to go tr, and then I'm going to come in here, and I'm going to say on a mouse over.", 'start': 940.318, 'duration': 4.844}, {'end': 948.925, 'text': "And if you're used to JavaScript, you know what's going on here.", 'start': 945.182, 'duration': 3.743}, {'end': 950.924, 'text': 'trigger an anonymous function.', 'start': 949.403, 'duration': 1.521}, {'end': 952.904, 'text': "By anonymous, I just mean it doesn't have a name.", 'start': 951.264, 'duration': 1.64}, {'end': 953.344, 'text': "That's all.", 'start': 952.924, 'duration': 0.42}, {'end': 958.346, 'text': "This is a reference to this element that I'm performing these changes on.", 'start': 953.525, 'duration': 4.821}], 'summary': 'Tutorial on changing class definition and triggering events based on mouse movements and page events.', 'duration': 29.377, 'max_score': 928.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg928969.jpg'}, {'end': 1022.07, 'src': 'embed', 'start': 1008.814, 'weight': 6, 'content': [{'end': 1011.357, 'text': 'If you have any questions or comments, leave them below.', 'start': 1008.814, 'duration': 2.543}, {'end': 1012.999, 'text': 'I will be getting into event handling.', 'start': 1011.377, 'duration': 1.622}, {'end': 1016.003, 'text': 'I will cover everything in jQuery in the upcoming tutorials.', 'start': 1013.079, 'duration': 2.924}, {'end': 1017.725, 'text': 'And all the code is available.', 'start': 1016.223, 'duration': 1.502}, {'end': 1021.329, 'text': "There's a link in the underbar if you don't want to actually type this out.", 'start': 1017.785, 'duration': 3.544}, {'end': 1022.07, 'text': 'Until next time.', 'start': 1021.609, 'duration': 0.461}], 'summary': 'Upcoming tutorials will cover event handling in jquery, with available code.', 'duration': 13.256, 'max_score': 1008.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg1008814.jpg'}], 'start': 468.605, 'title': 'Sibling and child element selection with css and jquery', 'summary': "Covers matching sibling elements with css by targeting h4 tags as siblings of a specific id name, using the tilde symbol. it also explains jquery's selection of sibling and child elements, demonstrating its flexibility and power in manipulating the dom, and showcases styling and event handling using jquery with examples of changing background colors and classes for table rows.", 'chapters': [{'end': 507.161, 'start': 468.605, 'title': 'Matching sibling elements with css', 'summary': "Explains how to use css to match sibling elements, particularly targeting h4 tags that are siblings of a specific id name 'rand stuff'. it also demonstrates using the tilde symbol to achieve this.", 'duration': 38.556, 'highlights': ['Using CSS to match sibling elements by targeting specific ID names and h4 tags.', 'Demonstrating the use of the tilde symbol in CSS to match specific siblings.']}, {'end': 762.868, 'start': 507.181, 'title': 'Jquery sibling and child element selection', 'summary': 'Explains how to select sibling and child elements in jquery, including examples of selecting specific tags, applying css styles, and using specific attribute selectors, demonstrating the flexibility and power of jquery in manipulating the dom.', 'duration': 255.687, 'highlights': ['The chapter explains how to select sibling and child elements in jQuery The chapter provides detailed information on selecting sibling and child elements in jQuery, demonstrating how to target specific tags and manipulate the DOM.', 'Examples of selecting specific tags and applying CSS styles The transcript includes examples of selecting specific tags such as H4 and H5, and applying CSS styles like italic and underline to manipulate the appearance of the elements.', 'Using specific attribute selectors The chapter demonstrates the use of specific attribute selectors, such as selecting elements based on class and attributes, showcasing the flexibility and power of jQuery in DOM manipulation.']}, {'end': 1022.07, 'start': 762.908, 'title': 'Jquery styling and event handling', 'summary': 'Demonstrates styling and event handling using jquery, including changing class definitions and triggering functions based on mouse movements, with examples of changing background colors and classes for table rows.', 'duration': 259.162, 'highlights': ['The chapter demonstrates how to change class definitions for elements and trigger functions based on mouse movements using jQuery.', 'The tutorial includes examples of changing background colors and classes for table rows to improve the visual appearance.', 'The speaker emphasizes the upcoming tutorials will cover event handling and all aspects of jQuery, with available code for reference.']}], 'duration': 553.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_iRIPJHrdXg/pics/_iRIPJHrdXg468605.jpg', 'highlights': ['The chapter demonstrates how to change class definitions for elements and trigger functions based on mouse movements using jQuery.', 'The tutorial includes examples of changing background colors and classes for table rows to improve the visual appearance.', 'The chapter explains how to select sibling and child elements in jQuery, providing detailed information on selecting sibling and child elements, demonstrating how to target specific tags and manipulate the DOM.', 'The chapter demonstrates the use of specific attribute selectors, such as selecting elements based on class and attributes, showcasing the flexibility and power of jQuery in DOM manipulation.', 'Using CSS to match sibling elements by targeting specific ID names and h4 tags.', 'Demonstrating the use of the tilde symbol in CSS to match specific siblings.', 'The speaker emphasizes the upcoming tutorials will cover event handling and all aspects of jQuery, with available code for reference.', 'Examples of selecting specific tags and applying CSS styles The transcript includes examples of selecting specific tags such as H4 and H5, and applying CSS styles like italic and underline to manipulate the appearance of the elements.']}], 'highlights': ['jQuery simplifies AJAX for cross-browser compatibility The tutorial explains how jQuery facilitates AJAX, enabling dynamic web page changes and server communication without reloads on any browser.', 'jQuery makes it easy to select elements on a web page The tutorial demonstrates how to select different elements on a web page using jQuery, emphasizing its ease of use.', 'Installing jQuery library from Google for automatic loading and updates The process of installing the jQuery library from Google is outlined, highlighting its automatic loading based on client location and smart updates.', 'jQuery enables easy and efficient selection of elements, reducing the need for extensive manual coding, thus saving time and effort.', 'Demonstrates the ability of jQuery to edit CSS attributes, exemplifying its versatility in web development.', 'Demonstration of how to select elements by their ID and style them using jQuery, showcasing the process of targeting specific elements by their unique identifier.', 'Illustration of selecting elements based on their hierarchy and applying style changes using jQuery, demonstrating the ability to target specific elements based on their position within the HTML structure.', 'Using jQuery to select and style elements based on their class and apply CSS changes, with examples of changing text color and background color.', 'The chapter demonstrates how to change class definitions for elements and trigger functions based on mouse movements using jQuery.', 'The tutorial includes examples of changing background colors and classes for table rows to improve the visual appearance.', 'The chapter explains how to select sibling and child elements in jQuery, providing detailed information on selecting sibling and child elements, demonstrating how to target specific tags and manipulate the DOM.', 'The chapter demonstrates the use of specific attribute selectors, such as selecting elements based on class and attributes, showcasing the flexibility and power of jQuery in DOM manipulation.', 'Using CSS to match sibling elements by targeting specific ID names and h4 tags.', 'Demonstrating the use of the tilde symbol in CSS to match specific siblings.', 'The speaker emphasizes the upcoming tutorials will cover event handling and all aspects of jQuery, with available code for reference.', 'Examples of selecting specific tags and applying CSS styles The transcript includes examples of selecting specific tags such as H4 and H5, and applying CSS styles like italic and underline to manipulate the appearance of the elements.']}