JQuery Notes For Professionals - GoalKicker
jQueryjQueryNotes for Professionals Notes for Professionals50 pagesof professional hints and tricksGoalKicker.comFree Programming BooksDisclaimerThis is an uno cial free book created for educational purposes and isnot a liated with o cial jQuery group(s) or company(s).All trademarks and registered trademarks arethe property of their respective owners
ContentsAbout . 1Chapter 1: Getting started with jQuery . 2Section 1.1: Getting Started . 2Section 1.2: Avoiding namespace collisions . 3Section 1.3: jQuery Namespace ("jQuery" and " ") . 4Section 1.4: Loading jQuery via console on a page that does not have it . 5Section 1.5: Include script tag in head of HTML page . 5Section 1.6: The jQuery Object . 7Chapter 2: Selectors . 8Section 2.1: Overview . 8Section 2.2: Types of Selectors . 8Section 2.3: Caching Selectors . 10Section 2.4: Combining selectors . 11Section 2.5: DOM Elements as selectors . 13Section 2.6: HTML strings as selectors . 13Chapter 3: Each function . 15Section 3.1: jQuery each function . 15Chapter 4: Attributes . 16Section 4.1: Di erece between attr() and prop() . 16Section 4.2: Get the attribute value of a HTML element . 16Section 4.3: Setting value of HTML attribute . 17Section 4.4: Removing attribute . 17Chapter 5: document-ready event . 18Section 5.1: What is document-ready and how should I use it? . 18Section 5.2: jQuery 2.2.3 and earlier . 18Section 5.3: jQuery 3.0 . 19Section 5.4: Attaching events and manipulating the DOM inside ready() . 19Section 5.5: Di erence between (document).ready() and (window).load() . 20Section 5.6: Di erence between jQuery(fn) and executing your code before /body . 21Chapter 6: Events . 22Section 6.1: Delegated Events . 22Section 6.2: Attach and Detach Event Handlers . 23Section 6.3: Switching specific events on and o via jQuery. (Named Listeners) . 24Section 6.4: originalEvent . 25Section 6.5: Events for repeating elements without using ID's . 25Section 6.6: Document Loading Event .load() . 26Chapter 7: DOM Manipulation . 27Section 7.1: Creating DOM elements . 27Section 7.2: Manipulating element classes . 27Section 7.3: Other API Methods . 29Chapter 8: DOM Traversing . 31Section 8.1: Select children of element . 31Section 8.2: Get next element . 31Section 8.3: Get previous element . 31Section 8.4: Filter a selection . 32Section 8.5: find() method . 33
Section 8.6: Iterating over list of jQuery elements . 34Section 8.7: Selecting siblings . 34Section 8.8: closest() method . 34Chapter 9: CSS Manipulation . 36Section 9.1: CSS – Getters and Setters . 36Section 9.2: Increment/Decrement Numeric Properties . 36Section 9.3: Set CSS property . 37Section 9.4: Get CSS property . 37Chapter 10: Element Visibility . 38Section 10.1: Overview . 38Section 10.2: Toggle possibilities . 38Chapter 11: Append . 40Section 11.1: E cient consecutive .append() usage . 40Section 11.2: jQuery append . 43Section 11.3: Appending an element to a container . 43Chapter 12: Prepend . 45Section 12.1: Prepending an element to a container . 45Section 12.2: Prepend method . 45Chapter 13: Getting and setting width and height of an element . 47Section 13.1: Getting and setting width and height (ignoring border) . 47Section 13.2: Getting and setting innerWidth and innerHeight (ignoring padding and border) . 47Section 13.3: Getting and setting outerWidth and outerHeight (including padding and border) . 47Chapter 14: jQuery .animate() Method . 48Section 14.1: Animation with callback . 48Chapter 15: jQuery Deferred objects and Promises . 50Section 15.1: jQuery ajax() success, error VS .done(), .fail() . 50Section 15.2: Basic promise creation . 50Chapter 16: Ajax . 52Section 16.1: Handling HTTP Response Codes with .ajax() . 52Section 16.2: Using Ajax to Submit a Form . 53Section 16.3: All in one examples . 53Section 16.4: Ajax File Uploads . 55Chapter 17: Checkbox Select all with automatic check/uncheck on other checkboxchange . 58Section 17.1: 2 select all checkboxes with corresponding group checkboxes . 58Chapter 18: Plugins . 59Section 18.1: Plugins - Getting Started . 59Credits . 61You may also like . 64
AboutPlease feel free to share this PDF with anyone for free,latest version of this book can be downloaded from:https://goalkicker.com/jQueryBookThis jQuery Notes for Professionals book is compiled from Stack OverflowDocumentation, the content is written by the beautiful people at Stack Overflow.Text content is released under Creative Commons BY-SA, see credits at the endof this book whom contributed to the various chapters. Images may be copyrightof their respective owners unless otherwise specifiedThis is an unofficial free book created for educational purposes and is notaffiliated with official jQuery group(s) or company(s) nor Stack Overflow. Alltrademarks and registered trademarks are the property of their respectivecompany ownersThe information presented in this book is not guaranteed to be correct noraccurate, use at your own riskPlease send feedback and corrections to web@petercv.comGoalKicker.com – jQuery Notes for Professionals1
Chapter 1: Getting started with jQueryVersion1.0 First stable releaseNotesRelease Date2006-08-261.12007-01-141.22007-09-101.3 Sizzle introduced into core2009-01-141.42010-01-141.5 Deferred callback management, ajax module rewrite2011-01-311.6 Significant performance gains in the attr() and val() methods2011-05-031.7 New Event APIs: on() and off().2011-11-031.8 Sizzle rewritten, improved animations and (html, props) flexibility.2012-08-091.9 Removal of deprecated interfaces and code cleanup2013-01-151.10 Incorporated bug fixes and differences reported from both the 1.9 and 2.0 beta cycles 2013-05-241.112014-01-241.122016-01-082.0 Dropped IE 6–8 support for performance improvements and reduction in size2013-04-182.12014-01-242.22016-01-083.0 Massive speedups for some jQuery custom selectors2016-06-093.1 No More Silent Errors2016-07-073.2 No More Silent Errors2017-03-163.3 No More Silent Errors2018-01-19Section 1.1: Getting StartedCreate 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 JSBinOpen this file in a web browser. As a result you will see a page with the text: Hello, World!Explanation of codeGoalKicker.com – jQuery Notes for Professionals2
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 thelibrary 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" byjQuery:// 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 isonly 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 thepassed argument is the core of jQuery's functionality and naming; the entire library essentially evolvedfrom 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 elementFor more refer to the jQuery - Documentation page.Section 1.2: Avoiding namespace collisionsLibraries other than jQuery may also use as an alias. This can cause interference between those libraries andjQuery.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 toaccess 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 Professionals3
jqy('#hello').text('Hello, World!');Conversely, to prevent other libraries from interfering with jQuery, you can wrap your jQuery code in animmediately 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 sodoes 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 onflicts-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 variablejQuery.foo. is an alias for jQuery and the two can usually be interchanged for each other (except wherejQuery.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 Professionals4
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(
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 -
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 -
Chapter 1: Getting started with jQuery 2 Remarks 2 Versions 2 Examples 3 jQuery Namespace ("jQuery" and " ") 3 Getting Started 3 Explanation of code 4 Include script tag in head of HTML page 5 Avoiding namespace collisions 6 Loading jQuery via console on a page that does not have it. 8 The jQuery Object 8 Loading namespaced jQuery plugins 8 .
To get started with the jQuery UI library, you'll need to add the jQuery script, the jQuery UI script, and the jQuery UI stylesheet to your HTML. First, download jQuery UI; choose the features you need on the download page.
browsers. However, the jQuery team has taken care of this for us, so that we can write AJAX functionality with only one single line of code jQuery - AJAX load() Method jQuery load() Method The jQuery load() method is a simple, but powerful AJAX method. The load() method loads data from a server and puts the returned data into the selected element.
jQuery UI 1.8.16 jQuery Timepicker Addon 1.4.5 jquery-2.1.0 jQuery-ui-1.10.4 jquery-2.1.0 jQuery.event.drag - v 2.2 . WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH T
elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively. This reference card puts the power of jQuery selectors at your very fingertips. A jQuery statement typically follows the syntax pattern: by any sibling of tag name E. (selector).methodName();
Implementing JQuery Plugins Implementing jQuery plugins into your site is fairly easy, and as you move through this lecture, you'll notice a pattern in implementing a jQuery plugin. Once you link to the the main jQuery library in your HTML document, using a plugin usually involves the following steps: 1.
Hooks) g. Request the “Event Hooks” Early Access Feature by checking the box h. After the features are selected click the Save button 3. An API Token is required. This will be needed later in the setup of the Postman collections. To get an API Token do: a. Login to you Okta Org as described above and select the Classic UI b. Click on .
