Summary I am selling you future books (programming).

Contents
About ................................................................................................................................................................................... 1
Chapter 1: Getting started with jQuery ............................................................................................................. 2
Section 1.1: Getting Started ........................................................................................................................................... 2
Section 1.2: Avoiding namespace collisions ................................................................................................................ 3
Section 1.3: jQuery Namespace ("jQuery" and "$") ................................................................................................... 4
Section 1.4: Loading jQuery via console on a page that does not have it .............................................................. 5
Section 1.5: Include script tag in head of HTML page ................................................................................................ 5
Section 1.6: The jQuery Object ..................................................................................................................................... 7
Chapter 2: Selectors .................................................................................................................................................... 8
Section 2.1: Overview ..................................................................................................................................................... 8
Section 2.2: Types of Selectors .................................................................................................................................... 8
Section 2.3: Caching Selectors ................................................................................................................................... 10
Section 2.4: Combining selectors ............................................................................................................................... 11
Section 2.5: DOM Elements as selectors ................................................................................................................... 13
Section 2.6: HTML strings as selectors ...................................................................................................................... 13
Chapter 3: Each function ........................................................................................................................................ 15
Section 3.1: jQuery each function ............................................................................................................................... 15
Chapter 4: Attributes ............................................................................................................................................... 16
Section 4.1: Dierece between attr() and prop() ..................................................................................................... 16
Section 4.2: Get the attribute value of a HTML element ......................................................................................... 16
Section 4.3: Setting value of HTML attribute ............................................................................................................ 17
Section 4.4: Removing attribute ................................................................................................................................ 17
Chapter 5: document-ready event .................................................................................................................... 18
Section 5.1: What is document-ready and how should I use it? ............................................................................. 18
Section 5.2: jQuery 2.2.3 and earlier .......................................................................................................................... 18
Section 5.3: jQuery 3.0 ................................................................................................................................................. 19
Section 5.4: Attaching events and manipulating the DOM inside ready() ............................................................ 19
Section 5.5: Dierence between $(document).ready() and $(window).load() ..................................................... 20
Section 5.6: Dierence between jQuery(fn) and executing your code before </body> ..................................... 21
Chapter 6: Events ....................................................................................................................................................... 22
Section 6.1: Delegated Events .................................................................................................................................... 22
Section 6.2: Attach and Detach Event Handlers ...................................................................................................... 23
Section 6.3: Switching specific events on and o via jQuery. (Named Listeners) ................................................ 24
Section 6.4: originalEvent ........................................................................................................................................... 25
Section 6.5: Events for repeating elements without using ID's ............................................................................... 25
Section 6.6: Document Loading Event .load() .......................................................................................................... 26
Chapter 7: DOM Manipulation .............................................................................................................................. 27
Section 7.1: Creating DOM elements .......................................................................................................................... 27
Section 7.2: Manipulating element classes ............................................................................................................... 27
Section 7.3: Other API Methods .................................................................................................................................. 29
Chapter 8: DOM Traversing ................................................................................................................................... 31
Section 8.1: Select children of element ...................................................................................................................... 31
Section 8.2: Get next element .................................................................................................................................... 31
Section 8.3: Get previous element ............................................................................................................................. 31
Section 8.4: Filter a selection ...................................................................................................................................... 32
Section 8.5: find() method .......................................................................................................................................... 33

, Section 8.6: Iterating over list of jQuery elements ................................................................................................... 34
Section 8.7: Selecting siblings ..................................................................................................................................... 34
Section 8.8: closest() method ..................................................................................................................................... 34
Chapter 9: CSS Manipulation ................................................................................................................................ 36
Section 9.1: CSS – Getters and Setters ....................................................................................................................... 36
Section 9.2: Increment/Decrement Numeric Properties ......................................................................................... 36
Section 9.3: Set CSS property ..................................................................................................................................... 37
Section 9.4: Get CSS property .................................................................................................................................... 37
Chapter 10: Element Visibility ............................................................................................................................... 38
Section 10.1: Overview ................................................................................................................................................. 38
Section 10.2: Toggle possibilities ................................................................................................................................ 38
Chapter 11: Append .................................................................................................................................................... 40
Section 11.1: Ecient consecutive .append() usage .................................................................................................. 40
Section 11.2: jQuery append ....................................................................................................................................... 43
Section 11.3: Appending an element to a container ................................................................................................. 43
Chapter 12: Prepend .................................................................................................................................................. 45
Section 12.1: Prepending an element to a container ................................................................................................ 45
Section 12.2: Prepend method .................................................................................................................................... 45
Chapter 13: Getting and setting width and height of an element ..................................................... 47
Section 13.1: Getting and setting width and height (ignoring border) .................................................................... 47
Section 13.2: Getting and setting innerWidth and innerHeight (ignoring padding and border) ......................... 47
Section 13.3: Getting and setting outerWidth and outerHeight (including padding and border) ....................... 47
Chapter 14: jQuery .animate() Method ............................................................................................................ 48
Section 14.1: Animation with callback ........................................................................................................................ 48
Chapter 15: jQuery Deferred objects and Promises ................................................................................. 50
Section 15.1: jQuery ajax() success, error VS .done(), .fail() ..................................................................................... 50
Section 15.2: Basic promise creation ......................................................................................................................... 50
Chapter 16: Ajax ........................................................................................................................................................... 52
Section 16.1: Handling HTTP Response Codes with $.ajax() .................................................................................... 52
Section 16.2: Using Ajax to Submit a Form ............................................................................................................... 53
Section 16.3: All in one examples ................................................................................................................................ 53
Section 16.4: Ajax File Uploads ................................................................................................................................... 55
Chapter 17: Checkbox Select all with automatic check/uncheck on other checkbox
change .............................................................................................................................................................................. 58
Section 17.1: 2 select all checkboxes with corresponding group checkboxes ....................................................... 58
Chapter 18: Plugins ..................................................................................................................................................... 59
Section 18.1: Plugins - Getting Started ....................................................................................................................... 59
Credits .............................................................................................................................................................................. 61
You may also like ........................................................................................................................................................ 64

,Chapter 1: Getting started with jQuery
Version Notes Release Date
1.0 First stable release 2006-08-26
1.1 2007-01-14
1.2 2007-09-10
1.3 Sizzle introduced into core 2009-01-14
1.4 2010-01-14
1.5 Deferred callback management, ajax module rewrite 2011-01-31
1.6 Significant performance gains in the attr() and val() methods 2011-05-03
1.7 New Event APIs: on() and off(). 2011-11-03
1.8 Sizzle rewritten, improved animations and $(html, props) flexibility. 2012-08-09
1.9 Removal of deprecated interfaces and code cleanup 2013-01-15
1.10 Incorporated bug fixes and differences reported from both the 1.9 and 2.0 beta cycles 2013-05-24
1.11 2014-01-24
1.12 2016-01-08
2.0 Dropped IE 6–8 support for performance improvements and reduction in size 2013-04-18
2.1 2014-01-24
2.2 2016-01-08
3.0 Massive speedups for some jQuery custom selectors 2016-06-09
3.1 No More Silent Errors 2016-07-07
3.2 No More Silent Errors 2017-03-16
3.3 No More Silent Errors 2018-01-19


Section 1.1: Getting Started
Create a file hello.html with the following content:

<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<div>
<p id="hello">Some random text</p>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function() {
$('#hello').text('Hello, World!');
});
</script>
</body>
</html>


Live Demo on JSBin

Open this file in a web browser. As a result you will see a page with the text: Hello, World!

Explanation of code


2

, 1. Loads the jQuery library from the jQuery CDN:


<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>


This introduces the $ global variable, an alias for the jQuery function and namespace.


Be aware that one of the most common mistakes made when including jQuery is failing to load the
library BEFORE any other scripts or libraries that may depend on or make use of it.




2. Defers a function to be executed when the DOM (Document Object Model) is detected to be "ready" by
jQuery:


// When the `document` is `ready`, execute this function `...`
$(document).ready(function() { ... });

// A commonly used shorthand version (behaves the same as the above)
$(function() { ... });


3. Once the DOM is ready, jQuery executes the callback function shown above. Inside of our function, there is
only one call which does 2 main things:


1. Gets the element with the id attribute equal to hello (our selector #hello). Using a selector as the
passed argument is the core of jQuery's functionality and naming; the entire library essentially evolved
from extending document.querySelectorAllMDN.

2. Set the text() inside the selected element to Hello, World!.

# ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
# ↑ - Set the Text on the element



For more refer to the jQuery - Documentation page.


Section 1.2: Avoiding namespace collisions
Libraries other than jQuery may also use $ as an alias. This can cause interference between those libraries and
jQuery.

To release $ for use with other libraries:

jQuery.noConflict();


After calling this function, $ is no longer an alias for jQuery. However, you can still use the variable jQuery itself to
access jQuery functions:

jQuery('#hello').text('Hello, World!');


Optionally, you can assign a different variable as an alias for jQuery:

var jqy = jQuery.noConflict();


3