211382
Introduction to jQuery
- What is it and what does it do?
- An open source JS Library
- Simplifies the interaction
between HTML document and
JS
- Simplifies the interaction
between HTML document and
JS
- An open source JS Library
- Why jQuery?
- Open source
- Free
- Small 18kb
compressed and
114kb uncompressed
- Popular
- Useful community
support
- Open source
- Chaining
- Allows jQuery methods to
be chained
- Endless chain on
currently selected jQuery
function
- Cuts down on processing
by selecting a set of DOM
elements only once
- Allows jQuery methods to
be chained
- Wrapper set
- Set of elements
wrapped with
jQuery functionality
- Can contain
several DOM
elements
- Sometimes
contains no
DOM elements
- jQuery
methods/properties
will fail silently
- jQuery
methods/properties
will fail silently
- Set of elements
wrapped with
jQuery functionality
- Organisation of jQuery API
- Organised into logical categories
- Makes it easier to narrow down
functionality that's needed
- Makes it easier to narrow down
functionality that's needed
- Organised into logical categories
- Including jQuery libs in
an HTML page
- Use the Google hosted CDN
- Download your
own version
- Use the Google hosted CDN
- Executing jQuery After
the DOM bt b4
complete page load
- jQuery ready()
method is typically
bound to the DOM
- ready() method
passed a single
param func tht
contains JS code 2
b executed when
DOM ready
- jQuery ready()
method is typically
bound to the DOM
- Selecting DOM elements
- jQuery provides 2
options 2 select
elements from DOM
- Using CSS
selectors &
custom
selectors
- By passing a str containing
a selector expression 2
jQuery will go through the
DOM & locate the nodes
defined by the expression
- By passing a str containing
a selector expression 2
jQuery will go through the
DOM & locate the nodes
defined by the expression
- Pass the jQuery
function 2 an actual
JS reference 2 DOM
elements (less
Common)
- Using CSS
selectors &
custom
selectors
- jQuery provides 2
options 2 select
elements from DOM
- Selecting DOM
elements within
specified context
- jQuery function when
passed a CSS
expression will also
accept a 2nd param
that tells the jQuery
function 2 which
context it should
search for the DOM
element
- The second param
can b a DOM ref,
jQuery wrapper, or
document
- jQuery function when
passed a CSS
expression will also
accept a 2nd param
that tells the jQuery
function 2 which
context it should
search for the DOM
element
- Methods
- addClass()
- Updates the
class attr val with
a new class/val
- Updates the
class attr val with
a new class/val
- hasCLass()
- Checks the
value of the
class attr for a
specific class
- Checks the
value of the
class attr for a
specific class
- removeClass()
- Removes a
unique class
from the class
attr while
keeping vals
already set
- Removes a
unique class
from the class
attr while
keeping vals
already set
- toggleClass()
- Adds a specified
class if not present
& removes class if
present
- Adds a specified
class if not present
& removes class if
present
- addClass()
Möchten Sie kostenlos Ihre eigenen Mindmaps mit GoConqr erstellen? Mehr erfahren.