jQueryNotesForProfessionals.pdf

(965 KB) Pobierz
Notes for Professionals
jQuery
jQuery
Notes for Professionals
®
of professional hints and tricks
50+ pages
GoalKicker.com
Free Programming Books
Disclaimer
This is an unocial free book created for educational purposes and is
not aliated with ocial jQuery
®
group(s) or company(s).
All trademarks and registered trademarks are
the property of their respective owners
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: Ajax
............................................................................................................................................................... 8
Section 2.1: Handling HTTP Response Codes with $.ajax()
....................................................................................... 8
Section 2.2: Using Ajax to Submit a Form
................................................................................................................... 9
Section 2.3: All in one examples
................................................................................................................................... 9
Section 2.4: Ajax File Uploads
.................................................................................................................................... 11
Chapter 3: Selectors
.................................................................................................................................................. 14
Section 3.1: Overview
................................................................................................................................................... 14
Section 3.2: Types of Selectors
.................................................................................................................................. 14
Section 3.3: Caching Selectors
................................................................................................................................... 16
Section 3.4: Combining selectors
............................................................................................................................... 17
Section 3.5: DOM Elements as selectors
................................................................................................................... 19
Section 3.6: HTML strings as selectors
...................................................................................................................... 19
Chapter 4: document-ready event
................................................................................................................... 21
Section 4.1: What is document-ready and how should I use it?
............................................................................. 21
Section 4.2: jQuery 2.2.3 and earlier
.......................................................................................................................... 21
Section 4.3: jQuery 3.0
................................................................................................................................................ 22
Section 4.4: Attaching events and manipulating the DOM inside ready()
............................................................ 22
Section 4.5: Dierence between $(document).ready() and $(window).load()
..................................................... 23
Section 4.6: Dierence between jQuery(fn) and executing your code before </body>
..................................... 24
Chapter 5: DOM Manipulation
.............................................................................................................................. 25
Section 5.1: Creating DOM elements
......................................................................................................................... 25
Section 5.2: Manipulating element classes
............................................................................................................... 25
Section 5.3: Other API Methods
.................................................................................................................................. 27
Chapter 6: DOM Traversing
................................................................................................................................... 29
Section 6.1: Select children of element
...................................................................................................................... 29
Section 6.2: Get next element
..................................................................................................................................... 29
Section 6.3: Get previous element
............................................................................................................................. 29
Section 6.4: Filter a selection
...................................................................................................................................... 30
Section 6.5: find() method
.......................................................................................................................................... 31
Section 6.6: Iterating over list of jQuery elements
................................................................................................... 32
Section 6.7: Selecting siblings
..................................................................................................................................... 32
Section 6.8: closest() method
..................................................................................................................................... 32
Chapter 7: Element Visibility
................................................................................................................................. 34
Section 7.1: Overview
................................................................................................................................................... 34
Section 7.2: Toggle possibilities
................................................................................................................................. 34
Chapter 8: Events
....................................................................................................................................................... 36
Section 8.1: Delegated Events
.................................................................................................................................... 36
Section 8.2: Attach and Detach Event Handlers
...................................................................................................... 37
Section 8.3: Switching specific events on and o via jQuery. (Named Listeners)
................................................ 38
Section 8.4: originalEvent
........................................................................................................................................... 39
Section 8.5: Events for repeating elements without using ID's
............................................................................... 39
Section 8.6: Document Loading Event .load()
.......................................................................................................... 40
Chapter 9: Plugins
....................................................................................................................................................... 41
Section 9.1: Plugins - Getting Started
......................................................................................................................... 41
Chapter 10: Prepend
.................................................................................................................................................. 43
Section 10.1: Prepending an element to a container
................................................................................................ 43
Section 10.2: Prepend method
................................................................................................................................... 43
Chapter 11: Append
.................................................................................................................................................... 45
Section 11.1: Ecient consecutive .append() usage
.................................................................................................. 45
Section 11.2: jQuery append
....................................................................................................................................... 48
Section 11.3: Appending an element to a container
................................................................................................. 48
Chapter 12: Getting and setting width and height of an element
..................................................... 50
Section 12.1: Getting and setting width and height (ignoring border)
.................................................................... 50
Section 12.2: Getting and setting innerWidth and innerHeight (ignoring padding and border)
......................... 50
Section 12.3: Getting and setting outerWidth and outerHeight (including padding and border)
....................... 50
Chapter 13: CSS Manipulation
............................................................................................................................... 51
Section 13.1: CSS – Getters and Setters
...................................................................................................................... 51
Section 13.2: Increment/Decrement Numeric Properties
........................................................................................ 51
Section 13.3: Set CSS property
.................................................................................................................................... 52
Section 13.4: Get CSS property
................................................................................................................................... 52
Chapter 14: Attributes
.............................................................................................................................................. 53
Section 14.1: Dierece between attr() and prop()
.................................................................................................... 53
Section 14.2: Get the attribute value of a HTML element
........................................................................................ 53
Section 14.3: Setting value of HTML attribute
........................................................................................................... 54
Section 14.4: Removing attribute
............................................................................................................................... 54
Chapter 15: jQuery .animate() Method
............................................................................................................ 55
Section 15.1: Animation with callback
........................................................................................................................ 55
Chapter 16: jQuery Deferred objects and Promises
................................................................................. 57
Section 16.1: jQuery ajax() success, error VS .done(), .fail()
..................................................................................... 57
Section 16.2: Basic promise creation
......................................................................................................................... 57
Chapter 17: Checkbox Select all with automatic check/uncheck on other checkbox
change
.............................................................................................................................................................................. 59
Section 17.1: 2 select all checkboxes with corresponding group checkboxes
....................................................... 59
Chapter 18: Each function
....................................................................................................................................... 60
Section 18.1: jQuery each function
............................................................................................................................. 60
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
web@petercv.com
GoalKicker.com – jQuery® Notes for Professionals
1
Chapter 1: Getting started with jQuery
Version
1.0
First stable release
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
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
Notes
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
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
1.10
Incorporated bug fixes and differences reported from both the 1.9 and 2.0 beta cycles 2013-05-24
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
GoalKicker.com – jQuery® Notes for Professionals
2
Zgłoś jeśli naruszono regulamin