1 00:00:00,000 --> 00:00:04,581 [MUSIC] 2 00:00:04,581 --> 00:00:08,824 jQuery is a widely used JavaScript library that helps you quickly and 3 00:00:08,824 --> 00:00:11,970 easily add interactivity to web pages. 4 00:00:11,970 --> 00:00:16,830 You can certainly add animations, manipulate elements on a web page, respond 5 00:00:16,830 --> 00:00:21,923 to user interactions, and make ajax request with regular JavaScript, however, 6 00:00:21,923 --> 00:00:26,340 jQuery adds some nice conveniences that make DOM programming easier. 7 00:00:26,340 --> 00:00:30,653 jQuery grew incredibly popular because it addressed many of the headaches 8 00:00:30,653 --> 00:00:35,177 that came with writing code that would behave consistently across browsers. 9 00:00:35,177 --> 00:00:39,740 While this is less necessary as modern browsers become more standardized, 10 00:00:39,740 --> 00:00:45,350 jQuery remains a simple, fun, and intuitive way to interact with web pages. 11 00:00:45,350 --> 00:00:49,150 Hi, I'm Treasure, a JavaScript teacher here at Treehouse, and 12 00:00:49,150 --> 00:00:53,830 I'm excited to share with you the simplicity that jQuery has to offer. 13 00:00:53,830 --> 00:00:59,050 In this course, we'll use jQuery to create or enhance a series of small projects. 14 00:00:59,050 --> 00:01:03,610 We'll build a simple blog previewer, and a fun and interactive spoiler revealer. 15 00:01:03,610 --> 00:01:06,730 We'll finish up by using more advanced jQuery methods 16 00:01:06,730 --> 00:01:10,710 to add some enhancements and functionality to a simple news feed. 17 00:01:10,710 --> 00:01:14,515 To get the most out of this course, you'll need to be somewhat familiar with CSS 18 00:01:14,515 --> 00:01:17,890 selectors using JavaScript to interact with the DOM, and 19 00:01:17,890 --> 00:01:20,070 event handling with JavaScript. 20 00:01:20,070 --> 00:01:23,020 I'll quickly review these topics as we come across them. 21 00:01:23,020 --> 00:01:27,097 But if you're not sure what the DOM, or event handling are, or need a more in 22 00:01:27,097 --> 00:01:31,133 depth refresher be sure to check out the pre-requisites for this course. 23 00:01:31,133 --> 00:01:33,710 I've included links in the teachers notes. 24 00:01:33,710 --> 00:01:37,590 I'll include helpful resources in the teacher's notes throughout this course so 25 00:01:37,590 --> 00:01:39,950 be sure to check those out as well. 26 00:01:39,950 --> 00:01:44,410 The DOM, or Document Object Model, is a representation of your webpage. 27 00:01:44,410 --> 00:01:49,120 Sort of like a blueprint, containing all of your web page's content and elements. 28 00:01:49,120 --> 00:01:53,470 You can use JavaScript or jQuery to access elements on this blueprint and 29 00:01:53,470 --> 00:01:57,140 tell the browser how those element should display and behave. 30 00:01:57,140 --> 00:02:02,290 With jQuery, you use CSS selectors to select HTML elements on a page and 31 00:02:02,290 --> 00:02:03,850 do something with them. 32 00:02:03,850 --> 00:02:09,470 You essentially say, please locate on my webpage an HTML element or collection 33 00:02:09,470 --> 00:02:14,070 of elements with the class of x or the ID of y, and do something with them. 34 00:02:15,090 --> 00:02:19,967 You can do any of a long list of things like creating and insert HTML elements, 35 00:02:19,967 --> 00:02:24,317 remove or hide them, make them grow bigger or smaller on user click, 36 00:02:24,317 --> 00:02:30,330 change the font size, texture, or color, modify HTML attributes, and so on. 37 00:02:30,330 --> 00:02:34,830 In this course, we'll learn about many of the convenient methods jQuery offers. 38 00:02:34,830 --> 00:02:38,190 I'll introduce different CSS selectors you can use to choose and 39 00:02:38,190 --> 00:02:40,500 manipulate elements on a webpage. 40 00:02:40,500 --> 00:02:42,400 We'll learn how to handle events. 41 00:02:42,400 --> 00:02:44,990 This means running code in response to button clicks, 42 00:02:44,990 --> 00:02:47,260 key presses, mouse overs, and so on. 43 00:02:47,260 --> 00:02:50,460 We'll also learn about DOM traversal, 44 00:02:50,460 --> 00:02:55,170 how jQuery lets you move easily from one element on your page to another, 45 00:02:55,170 --> 00:02:58,690 without having to know an element's specific class or ID. 46 00:02:58,690 --> 00:03:02,992 Before we dive into our coding projects, join me in the upcoming videos to learn 47 00:03:02,992 --> 00:03:06,720 a bit more about the history of this wildly popular library, and 48 00:03:06,720 --> 00:03:09,740 to take a look at how jQuery differs from plain JavaScript.