23

25

25

26

29

31

31

31

32

33

Section 8.6: Iterating over list of jQuery elements

Section 8.7: Selecting siblings

Section 8.8: closest() method

Chapter 9: CSS Manipulation

...................................................................................................

34

.....................................................................................................................................

.....................................................................................................................................

................................................................................................................................

.......................................................................................................................

Section 9.1: CSS – Getters and Setters

Section 9.2: Increment/Decrement Numeric Properties

Section 9.3: Set CSS property

Section 9.4: Get CSS property

Chapter 10: Element Visibility

.....................................................................................................................................

....................................................................................................................................

...............................................................................................................................

.........................................................................................

36

Section 10.1: Overview

Section 10.2: Toggle possibilities

.................................................................................................................................................

................................................................................................................................

38

Chapter 11: Append

....................................................................................................................................................

40

Section 11.1: Ecient consecutive .append() usage

Section 11.2: jQuery append

Section 11.3: Appending an element to a container

.......................................................................................................................................

..................................................................................................

.................................................................................................

43

Chapter 12: Prepend

..................................................................................................................................................

45

Section 12.1: Prepending an element to a container

Section 12.2: Prepend method

....................................................................................................................................

45

................................................................................................

45

Chapter 13: Getting and setting width and height of an element

.....................................................

47

Section 13.1: Getting and setting width and height (ignoring border)

Section 13.2: Getting and setting innerWidth and innerHeight (ignoring padding and border)

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

Section 15.1: jQuery ajax() success, error VS .done(), .fail()

Section 15.2: Basic promise creation

.................................................................................

50

.....................................................................................

.........................................................................................................................

Chapter 16: Ajax

...........................................................................................................................................................

52

Section 16.1: Handling HTTP Response Codes with $.ajax()

Section 16.2: Using Ajax to Submit a Form

Section 16.3: All in one examples

Section 16.4: Ajax File Uploads

...............................................................................................................

................................................................................................................................

...................................................................................................................................

....................................................................................

52

34

34

36

36

37

37

38

38

40

43

47

47

50

50

53

53

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

About

Please feel free to share this PDF with anyone for free,

latest version of this book can be downloaded from:

https://goalkicker.com/jQueryBook

This jQuery® Notes for Professionals book is compiled from Stack Overflow

Documentation, the content is written by the beautiful people at Stack Overflow.

Text content is released under Creative Commons BY-SA, see credits at the end

of this book whom contributed to the various chapters. Images may be copyright

of their respective owners unless otherwise specified

This is an unofficial free book created for educational purposes and is not

affiliated with official jQuery® group(s) or company(s) nor Stack Overflow. All

trademarks and registered trademarks are the property of their respective

company owners

The information presented in this book is not guaranteed to be correct nor

accurate, use at your own risk

Please send feedback and corrections to [email protected]

GoalKicker.com – jQuery® Notes for Professionals

1

Chapter 1: Getting started with jQuery

Version

1.0 First stable release

Notes

1.1

1.2

1.3 Sizzle introduced into core

1.4

1.5 Deferred callback management, ajax module rewrite

1.6 Significant performance gains in the attr() and val() methods

1.7 New Event APIs: on() and off().

1.8 Sizzle rewritten, improved animations and $(html, props) flexibility.

1.9 Removal of deprecated interfaces and code cleanup

Release Date

2006-08-26

2007-01-14

2007-09-10

2009-01-14

2010-01-14

2011-01-31

2011-05-03

2011-11-03

2012-08-09

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

1.12

2.0 Dropped IE 6–8 support for performance improvements and reduction in size

2.1

2.2

3.0 Massive speedups for some jQuery custom selectors

3.1 No More Silent Errors

3.2 No More Silent Errors

3.3 No More Silent Errors

Section 1.1: Getting Started

Create a file hello.html with the following content:

2014-01-24

2016-01-08

2013-04-18

2014-01-24

2016-01-08

2016-06-09

2016-07-07

2017-03-16

2018-01-19

<!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

GoalKicker.com – jQuery® Notes for Professionals

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();

GoalKicker.com – jQuery® Notes for Professionals

3

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

Conversely, to prevent other libraries from interfering with jQuery, you can wrap your jQuery code in an

immediately invoked function expression (IIFE) and pass in jQuery as the argument:

(function($) {

$(document).ready(function() {

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

});

})(jQuery);

Inside this IIFE, $ is an alias for jQuery only.

Another simple way to secure jQuery's $ alias and make sure DOM is ready:

jQuery(function( $ ) { // DOM is ready

// You're now free to use $ alias

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

});

To summarize,

jQuery.noConflict() : $ no longer refers to jQuery, while the variable jQuery does.

var jQuery2 = jQuery.noConflict() - $ no longer refers to jQuery, while the variable jQuery does and so

does the variable jQuery2.

Now, there exists a third scenario - What if we want jQuery to be available only in jQuery2? Use,

var jQuery2 = jQuery.noConflict(true)

This results in neither $ nor jQuery referring to jQuery.

This is useful when multiple versions of jQuery are to be loaded onto the same page.

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>

<script>

var jQuery1 = jQuery.noConflict(true);

</script>

<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>

<script>

// Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.

</script>

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Section 1.3: jQuery Namespace ("jQuery" and "$")

jQuery is the starting point for writing any jQuery code. It can be used as a function jQuery(...) or a variable

jQuery.foo.

$ is an alias for jQuery and the two can usually be interchanged for each other (except where

jQuery.noConflict(); has been used - see Avoiding namespace collisions).

Assuming we have this snippet of HTML -

<div id="demo_div" class="demo"></div>

GoalKicker.com – jQuery® Notes for Professionals

4

We might want to use jQuery to add some text content to this div. To do this we could use the jQuery text()

function. This could be written using either jQuery or $. i.e. -

jQuery("#demo_div").text("Demo Text!");

Or -

$("#demo_div").text("Demo Text!");

Both will result in the same final HTML -

<div id="demo_div" class="demo">Demo Text!</div>

As $ is more concise than jQuery it is the generally the preferred method of writing jQuery code.

jQuery uses CSS selectors and in the example above an ID selector was used. For more information on selectors in

jQuery see types of selectors.

Section 1.4: Loading jQuery via console on a page that does

not have it

Sometimes one has to work with pages that are not using jQuery while most developers are used to have jQuery

handy.

In such situations one can use Chrome Developer Tools console ( F12 ) to manually add jQuery on a loaded page

by running following:

var j = document.createElement('script');

j.onload = function(){ jQuery.noConflict(); };

j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";

document.getElementsByTagName('head')[0].appendChild(j);

Version you want might differ from above(1.12.4) you can get the link for one you need here.

Section 1.5: Include script tag in head of HTML page

To load jQuery from the official CDN, go to the jQuery website. You'll see a list of different versions and formats

available.

GoalKicker.com – jQuery® Notes for Professionals

5

Now, copy the source of the version of jQuery, you want to load. Suppose, you want to load jQuery 2.X, click

uncompressed or minified tag which will show you something like this:

Copy the full code (or click on the copy icon) and paste it in the <head> or <body> of your html.

The best practice is to load any external JavaScript libraries at the head tag with the async attribute. Here is a

demonstration:

<!DOCTYPE html>

<html>

<head>

<title>Loading jquery-2.2.4</title>

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

</head>

<body>

<p>This page is loaded with jquery.</p>

</body>

</html>

GoalKicker.com – jQuery® Notes for Professionals

6

When using async attribute be conscious as the javascript libraries are then asynchronously loaded and executed

as soon as available. If two libraries are included where second library is dependent on the first library is this case if

second library is loaded and executed before first library then it may throw an error and application may break.

Section 1.6: The jQuery Object

Every time jQuery is called, by using $() or jQuery(), internally it is creating a new instance of jQuery. This is the

source code which shows the new instance:

// Define a local copy of jQuery

jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

// Need init if jQuery is called (just allow error to be thrown if not included)

return new jQuery.fn.init( selector, context );

}

Internally jQuery refers to its prototype as .fn, and the style used here of internally instantiating a jQuery object

allows for that prototype to be exposed without the explicit use of new by the caller.

In addition to setting up an instance (which is how the jQuery API, such as .each, children,filter, etc. is exposed),

internally jQuery will also create an array-like structure to match the result of the selector (provided that something

other than nothing, undefined, null, or similar was passed as the argument). In the case of a single item, this array-

like structure will hold only that item.

A simple demonstration would be to find an element with an id, and then access the jQuery object to return the

underlying DOM element (this will also work when multiple elements are matched or present).

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector

var div = $div[0];//access array-like structure of jQuery object to get the DOM Element

GoalKicker.com – jQuery® Notes for Professionals

7

Chapter 2: Selectors

A jQuery selectors selects or finds a DOM (document object model) element in an HTML document. It is used to

select HTML elements based on id, name, types, attributes, class and etc. It is based on existing CSS selectors.

Section 2.1: Overview

Elements can be selected by jQuery using jQuery Selectors. The function returns either an element or a list of

elements.

Basic selectors

$("*") // All elements

$("div") // All <div> elements

$(".blue") // All elements with class=blue

$(".blue.red") // All elements with class=blue AND class=red

$(".blue,.red") // All elements with class=blue OR class=red

$("#headline") // The (first) element with id=headline

$("[href]") // All elements with an href attribute

$("[href='example.com']") // All elements with href=example.com

Relational operators

$("div span") // All <span>s that are descendants of a <div>

$("div > span") // All <span>s that are a direct child of a <div>

$("a ~ span") // All <span>s that are siblings following an <a>

$("a + span") // All <span>s that are immediately after an <a>

Section 2.2: Types of Selectors

In jQuery you can select elements in a page using many various properties of the element, including:

Type

Class

ID

Possession of Attribute

Attribute Value

Indexed Selector

Pseudo-state

If you know CSS selectors you will notice selectors in jQuery are the same (with minor exceptions).

Take the following HTML for example:

<a href="index.html"></a> <!-- 1 -->

<a id="second-link"></a> <!-- 2 -->

<a class="example"></a> <!-- 3 -->

<a class="example" href="about.html"></a> <!-- 4 -->

<span class="example"></span> <!-- 5 -->

Selecting by Type:

The following jQuery selector will select all <a> elements, including 1, 2, 3 and 4.

$("a")

GoalKicker.com – jQuery® Notes for Professionals

8

Selecting by Class

The following jQuery selector will select all elements of class example (including non-a elements), which are 3, 4 and

5.

$(".example")

Selecting by ID

The following jQuery selector will select the element with the given ID, which is 2.

$("#second-link")

Selecting by Possession of Attribute

The following jQuery selector will select all elements with a defined href attribute, including 1 and 4.

$("[href]")

Selecting by Attribute Value

The following jQuery selector will select all elements where the href attribute exists with a value of index.html,

which is just 1.

$("[href='index.html']")

Selecting by Indexed Position (Indexed Selector)

The following jQuery selector will select only 1, the second <a> ie. the second-link because index supplied is 1 like

eq(1) (Note that the index starts at 0 hence the second got selected here!).

$("a:eq(1)")

Selecting with Indexed Exclusion

To exclude an element by using its index :not(:eq())

The following selects <a> elements, except that with the class example, which is 1

$("a").not(":eq(0)")

Selecting with Exclusion

To exclude an element from a selection, use :not()

The following selects <a> elements, except those with the class example, which are 1 and 2.

$("a:not(.example)")

Selecting by Pseudo-state

You can also select in jQuery using pseudo-states, including :first-child, :last-child, :first-of-type, :last-

of-type, etc.

The following jQuery selector will only select the first <a> element: number 1.

GoalKicker.com – jQuery® Notes for Professionals

9

$("a:first-of-type")

Combining jQuery selectors

You can also increase your specificity by combining multiple jQuery selectors; you can combine any number of

them or combine all of them. You can also select multiple classes, attributes and states at the same time.

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-

child")

This would select an <a> element that:

Has the following classes: class1, class2, and class3

Has the following ID: someID

Has the following Attribute: attr1

Has the following Attributes and values: attr2 with value something, attr3 with value something

Has the following states: first-child and first-of-type

You can also separate different selectors with a comma:

$("a, .class1, #someID")

This would select:

All <a> elements

All elements that have the class class1

An element with the id #someID

Child and Sibling selection

jQuery selectors generally conform to the same conventions as CSS, which allows you to select children and siblings

in the same way.

To select a non-direct child, use a space

To select a direct child, use a >

To select an adjacent sibling following the first, use a +

To select a non-adjacent sibling following the first, use a ~

Wildcard selection

There might be cases when we want to select all elements but there is not a common property to select upon (class,

attribute etc). In that case we can use the * selector that simply selects all the elements:

$('#wrapper *') // Select all elements inside #wrapper element

Section 2.3: Caching Selectors

Each time you use a selector in jQuery the DOM is searched for elements that match your query. Doing this too

often or repeatedly will decrease performance. If you refer to a specific selector more than once you should add it

to the cache by assigning it to a variable:

var nav = $('#navigation');

nav.show();

GoalKicker.com – jQuery® Notes for Professionals

10

This would replace:

$('#navigation').show();

Caching this selector could prove helpful if your website needs to show/hide this element often. If there are

multiple elements with the same selector the variable will become an array of these elements:

<div class="parent">

<div class="child">Child 1</div>

<div class="child">Child 2</div>

</div>

<script>

var children = $('.child');

var firstChildText = children[0].text();

console.log(firstChildText);

// output: "Child 1"

</script>

NOTE: The element has to exist in the DOM at the time of its assignment to a variable. If there is no element in the

DOM with a class called child you will be storing an empty array in that variable.

<div class="parent"></div>

<script>

var parent = $('.parent');

var children = $('.child');

console.log(children);

// output: []

parent.append('<div class="child">Child 1</div>');

children = $('.child');

console.log(children[0].text());

// output: "Child 1"

</script>

Remember to reassign the selector to the variable after adding/removing elements in the DOM with that selector.

Note: When caching selectors, many developers will start the variable name with a $ to denote that the variable is a

jQuery object like so:

var $nav = $('#navigation');

$nav.show();

Section 2.4: Combining selectors

Consider following DOM Structure

<ul class="parentUl">

<li> Level 1

<ul class="childUl">

<li>Level 1-1 <span> Item - 1 </span></li>

<li>Level 1-1 <span> Item - 2 </span></li>

</ul>

</li>

GoalKicker.com – jQuery® Notes for Professionals

11

<li> Level 2

<ul class="childUl">

<li>Level 2-1 <span> Item - 1 </span></li>

<li>Level 2-1 <span> Item - 1 </span></li>

</ul>

</li>

</ul>

Descendant and child selectors

Given a parent <ul> - parentUl find its descendants (<li>),

1.

Simple $('parent child')

>> $('ul.parentUl li')

This gets all matching descendants of the specified ancestor all levels down.

2.

> - $('parent > child')

>> $('ul.parentUl > li')

This finds all matching children (only 1st level down).

3.

Context based selector - $('child','parent')

>> $('li','ul.parentUl')

This works same as 1. above.

4.

find() - $('parent').find('child')

>> $('ul.parentUl').find('li')

This works same as 1. above.

5.

children() - $('parent').find('child')

>> $('ul.parentUl').children('li')

This works same as 2. above.

Other combinators

Group Selector : ","

Select all <ul> elements AND all <li> elements AND all <span> elements :

$('ul, li, span')

Multiples selector : "" (no character)

GoalKicker.com – jQuery® Notes for Professionals

12

Select all <ul> elements with class parentUl :

$('ul.parentUl')

Adjacent Sibling Selector : "+"

Select all <li> elements that are placed immediately after another <li> element:

$('li + li')

General Sibling Selector : "~"

Select all <li> elements that are siblings of other <li> elements:

$('li ~ li')

Section 2.5: DOM Elements as selectors

jQuery accepts a wide variety of parameters, and one of them is an actual DOM element. Passing a DOM element to

jQuery will cause the underlying array-like structure of the jQuery object to hold that element.

jQuery will detect that the argument is a DOM element by inspecting its nodeType.

The most common use of a DOM element is in callbacks, where the current element is passed to the jQuery

constructor in order to gain access to the jQuery API.

Such as in the each callback (note: each is an iterator function).

$(".elements").each(function(){

//the current element is bound to this internally by jQuery when using each

var currentElement = this;

//at this point, currentElement (or this) has access to the Native API

//construct a jQuery object with the currentElement(this)

var $currentElement = $(this);...