Contents
jQuery
The classic library for working with the page: selecting elements, events, animations and AJAX.
1.Getting started
- What jQuery isWhat the jQuery library does, how it differs from plain JavaScript and whether to use it today.
- Loading jQuery and running codeHow to load jQuery from a CDN or with npm and how to run code after the page loads with $(function).
- SelectorsHow to find elements with $: CSS selectors, the jQuery object, length and getting the element itself.
- Traversing the treeHow to move from a found element to related ones: find, children, parent, closest, siblings, eq, first, last and filter.
2.Working with the page
- Text and HTMLHow to read and change element content with text() and html() and how they differ.
- Attributes, properties and data-*The attr(), prop(), removeAttr() and data() methods: how an attribute differs from a property and how to keep data in markup.
- Classes and stylesThe addClass, removeClass, toggleClass, hasClass and css() methods: how to change how elements look.
- Creating, inserting and removingHow to create a new element, insert it with append, prepend, before, after and remove it with remove and empty.
- Iterating: each and mapHow to visit every element of a set with each(), collect values with map() and how they differ from $.each and $.map.
3.Events and forms
- Events: on and offHow to listen to an event with on(), remove a handler with off() and run it only once with one().
- Event delegationHow one handler on a list can serve all its items, including ones added later: on() with a selector.
- The event object and preventDefaultWhat the event object holds: target, currentTarget, key, type; how to cancel the browser action and stop bubbling.
- Forms: val and serializeHow to read and change field values with val(), handle form submission and collect all fields with serialize() and serializeArray().
- Simple form validationHow to check form fields before submission, show error messages next to fields and clear them when the user fixes the input.
4.Effects and animation
- Show and hide: show, hide, toggleHow to hide and show elements with hide(), show() and toggle(), with or without animation, and how to check whether an element is visible.
- Fading and sliding: fade and slideThe fadeIn, fadeOut, fadeToggle, fadeTo, slideUp, slideDown and slideToggle effects, plus delay() and stop().
- Custom animation: animateHow to smoothly change numeric CSS properties with animate(): relative values, duration, easing and animation chains.
5.AJAX and promises
- Server requests: $.ajaxHow to load data from the server without reloading the page with $.ajax: request settings, done, fail and always.
- Short requests: $.get, $.getJSON, $.postShorthand functions for common requests: $.get, $.getJSON, $.post and the load() method, plus submitting a form with AJAX.
- Promises: $.Deferred and thenHow jQuery promises work: the $.Deferred object, resolve and reject, then chains, waiting for several requests with $.when and await.
6.jQuery in real projects
- Utility functionsjQuery functions unrelated to the page: $.extend for merging objects, $.each, $.param, $.isEmptyObject and the deprecated $.trim.
- Your own plugin: $.fnHow to add your own method to every jQuery object via $.fn: returning this for chaining, iterating over elements and default settings.
- jQuery in WordPressHow to add your own jQuery script to a WordPress theme with wp_enqueue_script and why the $ sign does not work in WordPress.
- Moving to plain JavaScriptA table mapping jQuery methods to built-in browser features and a step-by-step way to remove jQuery from a project.