Meow tỷ

             What to learn after jQuery Congratulations on learning jQuery! You've now learned the most popular JS library on the web today. Not only will you be able to code your websites with jQuery now, but you'll also have an easier time understanding code from other web developers and using any new JS library. More jQuery We certainly didn't cover all of jQuery here - there are more functions, and more options in the functions that we did cover. Check out the  documentation  for every function that you use, to make sure you know all the ways you can use it. You can also go through additional tutorials - many of them will probably overlap with what you learned here, but sometimes it helps to hear it from multiple places: jQuery Learning Center jQFundamentals jQuery plugins jQuery is a great library that does a lot, but it certainly doesn't do everything. Many web developers bring in additional libraries ...

       Review: DOM animation in jQuery jQuery provides a number of functions for animation and effects, which are listed in  its documentation . Changing visibility For simple visibility changes, you can use  hide()  and  show() : $("#pic").hide(); $("#pic").show();   (See example) You can also use  toggle() , which will decide whether to show or hide based on the current state:  $("#pic").toggle();   (See example) You can pass a duration into any of those functions, and jQuery will then animate the changing of the visibility:  $("#pic").toggle(1000); You can also use  slideDown() ,  slideUp()  and  slideToggle()  for sliding effects  (See example)  or  fadeIn() ,  fadeOut()  and  fadeToggle()  for fading effects  (See example) . You can pass a callback function as the second parameter to any of those functions, and jQuery will ca...

     Review: Processing forms with jQuery To process a form with jQuery, you should add an event listener to the form element for the 'submit' event: $("form").on("submit", function() { // process form }); If you are processing the form entirely in jQuery, then you should call  preventDefault()  to prevent the page reloading: $("form").on("submit", function(event) { event.preventDefault(); // process form }); When you want to know what a user filled out for an input in a form, you typically use  val() : var answer = $("#answer").val(); Inside the callback function, you can reference the form element using the  this  keyword. A common pattern is to call  find()  on the form element, to find only inputs inside the form element: $("form").on("submit", function() { // store the value of the input with name='age' var ag...

          Review: DOM events in jQuery Adding an event listener You can add an event listener using  on() : $("#save-button").on("click", function() { // handle click event }); If you need to access details about the event, you can find them in the  jQuery event object  that's passed into the callback function: $("#face-pic").on("click", function(event) { var mouseX = event.pageX; var mouseY = event.pageY; }); Triggering events You can manually trigger an event on an object from your JavaScript using trigger: $("#save-button").trigger("click"); That can be useful when testing new functionality, or when you want some code to run both when the page loads and after some particular event. Checking DOM readiness If you want to be sure that the browser does not run your JS code until the DOM is fully loaded and ready, then you can pass your code to  ...

       What DOM events and properties are                                     there? Browsers trigger many events. You can use jQuery to add event listeners for any of those events. A full list of browser events is on  MDN , but here are some of the most common event types and names, plus examples of using them: mouse events : 'click' ( example ), 'mousedown'/'mouseup' ( example ), 'mousemove' ( example ), 'mouseenter'/'mouseleave' ( example ) keyboard events : 'keydown', 'keypress', 'keyup' ( example ) touch events : 'touchdown', 'touchup', 'touchstart', ‘touchcancel’ ( example ) drag events : 'dragstart', 'dragend' (Many developers use jQueryUI for drag functionality, as it can be tricky to use the drag events directly. Here are examples of  draggable elements  and  drop zones .) form events : 'submit' ( example ), 'change' ( examp...

    Behind the scenes: Browse the jQuery                          source code You might be thinking jQuery is pretty magical at this point, with everything it can do. But it's not magic, it's just a whole lot of JavaScript - and since it's open source, anybody can browse the code of jQuery and see the magic for themselves. You can see the source on Github, or use these two sites that make it easier to browse through:  jQuery source viewer  and  jQuery deconstructed . For example, take a look at the  code for the  html()  method . It does a lot of checks for various error conditions and edge cases and eventually, it runs the line of code that actually tells the browser to set the inner HTML contents: elem.innerHTML = value; It can be intimidating to look at the code for jQuery, because it involves both advanced JavaScript syntax and a whole lot of expert know...

    Review: jQuery collections & looping jQuery collections When you use jQuery to find elements, jQuery returns back a jQuery collection object: var $heading = $('h1'); It is common practice to start variable names like that with a  $  sign to show that they're storing jQuery collection objects. That helps distinguish them from variables that store DOM nodes. If you'd like to retrieve the DOM node out of a jQuery object, then you can treat the jQuery object like an array and use bracket notation: var heading = $heading[0]; If you'd like to turn a DOM node into a jQuery object, you can pass it into the jQuery function: var $heading = $(heading); Looping through collections If you'd like to loop through multiple elements in a collection, you can use a normal  for  loop or jQuery's  each() : $("p").each(function(index, element) { $(element).text( $(element).text() + "!!"); })...