Test jQuery will what equivalent symbol
$ (dollar sign)
what is document.ready (which occurs after the DOM has been loaded)
why is it important?
If you include script call in the head which access the yet to be created DOM, you will access nothing. Placing at end might slow page load.
Use document.ready with a function and call the function after the DOM has loaded.
example of loading a function into the jQuery object
function someFunction() {
// Do interesting things
}
$(someFunction)
or
$(function(){
// Do interesting things
})
write document.ready function
regular and shorthand example
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "document ready!" );
});
// Shorthand for $( document ).ready()
$(function() {
console.log( "document ready!" );
});
// dollar pren 'function' unpren openclosepren curly brack
monitor all events with what jQuery function
stop monitoring
monitorEvents($0)
unmonitorEvents($0)
jQuery listener
basic syntax ( 4 areas: A,B,C,D)
$(_A__).__B__(__C___,__D___);
sample example using above structure
- listen to element 'input'
- listen (on) for keypress event
- do this function on event
function () {
$('body').css('background-color', 'b
A) Target element to listen to events (of)
B) "on"
C) Type of event to listen for
D) function you would like to perform when event occurs
$('input').on("keypress", function () {
$('body').css('background-color', 'blue');
});
jQuery - 5 commonly mouse and keyboard related event methods
1) click()- Click: executes on a single mouse click.
2) hover() - Hover: executes when the mouse is hovered over an element.
3) mouseenter() and
4) mouseleave() apply only to the mouse entering or leaving an element, respectively.
5) keydown() - Keydown:
jQuery - 2 form related event methods
1) submit() - Submit: executes when a form is submitted.
2) scroll() - Scroll: executes when the screen is scrolled.
jQuery - 7 commonly used effect methods.
1) toggle() - Toggle: switches the visibility of an element or elements. show() and hide() are the related one-way effects.
2) fadeToggle() - Fade Toggle: switches the visibility and animates the opacity of an element or elements.
3) fadeIn() and
4) fadeO
jQuery Event Listener
$( '#my-button' ).on( 'click', function( evt ) {
$( evt.target ).css( 'background', 'red' );
});
what does evt contain? How else might this be designated?
describe the process
jQuery passes an event (e, evt, or event) object to the f
(e, evt, or event) object contains information about the event, including:
timestamp, selector reference name or object acted upon, where the click occurred, etc..
Event listener waits for event.
on event - evt object is passed to the callback function.
e
structure jQuery
show command chain example (hide/show)
show command css
$('my-selector').hide()
dollar open pren selector closepren
<action>
.command
$('my-selector').hide(500).show(30).hide(50)
$('my-selector').css({opacity:'0.5'});
.css({color:'red',
fontweight:'bold'
});
why use fontWeight instead of font-weight?
to solve
use fontWeight
jQuery might interpret '-' as minus
so font-weight will be interpreted as font - weight
JQuery $ search for button attribute
id=btn1
data-panel=panel1
$('button[id=btn1');
$('button[data-panel=panel1]');
DRY
utilize class selectors and attribute 'data-id' to uniquely identify item
String usage
var panelId = $(this).attr('data-panelid');
$('#'+ panelId+ ' .panel-body').html( content);
Don't Repeat Yourself
when an event occurs
the target element ______ the callback function when the event occurs
the _______ object which gets passed to an _____ _______ callback
the ______ object contains information about the ______
calls
event
event listener's
event event
The _____ property holds the page element that is the target of the event.
syntax
target
evt.target
What does the following prevent
$( '#myAnchor' ).on( 'click', function( evt ) {
evt.preventDefault();
console.log( 'You clicked a link!' );
});
In the code above, the evt.preventDefault(); line instructs the browser not to perform the default action , which is to open a new page.
what information event attributes contain:
event.target
event.keyCode
event.pageX and event.pageY
event.type
event.target - display target info
event.keyCode - key was pressed - invaluable if you need to listen for a specific key
event.pageX and event.pageY - XY coordinates of click - helpful for analytics tracking
event.type - what event type - useful if listen
convenience methods for
.on( "keypress", handler )
hover() is a convenience method for:
.keypress()
$( selector ).on( "mouseenter mouseleave", handlerInOut );
Event Delegation
setting up event listener for a target that does not yet exist?
for a 'container' listen for a click to a article
$( '.container' ).on( 'click', 'article', function() { ... });
Test jQuery will what equivalent symbol
$ (dollar sign)
what is document.ready (which occurs after the DOM has been loaded)
why is it important?
If you include script call in the head which access the yet to be created DOM, you will access nothing. Placing at end might slow page load.
Use document.ready with a function and call the function after the DOM has loaded.
example of loading a function into the jQuery object
function someFunction() {
// Do interesting things
}
$(someFunction)
or
$(function(){
// Do interesting things
})
write document.ready function
regular and shorthand example
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "document ready!" );
});
// Shorthand for $( document ).ready()
$(function() {
console.log( "document ready!" );
});
// dollar pren 'function' unpren openclosepren curly brack
monitor all events with what jQuery function
stop monitoring
monitorEvents($0)
unmonitorEvents($0)
jQuery listener
basic syntax ( 4 areas: A,B,C,D)
$(_A__).__B__(__C___,__D___);
sample example using above structure
- listen to element 'input'
- listen (on) for keypress event
- do this function on event
function () {
$('body').css('background-color', 'b
A) Target element to listen to events (of)
B) "on"
C) Type of event to listen for
D) function you would like to perform when event occurs
$('input').on("keypress", function () {
$('body').css('background-color', 'blue');
});
jQuery - 5 commonly mouse and keyboard related event methods
1) click()- Click: executes on a single mouse click.
2) hover() - Hover: executes when the mouse is hovered over an element.
3) mouseenter() and
4) mouseleave() apply only to the mouse entering or leaving an element, respectively.
5) keydown() - Keydown:
jQuery - 2 form related event methods
1) submit() - Submit: executes when a form is submitted.
2) scroll() - Scroll: executes when the screen is scrolled.
jQuery - 7 commonly used effect methods.
1) toggle() - Toggle: switches the visibility of an element or elements. show() and hide() are the related one-way effects.
2) fadeToggle() - Fade Toggle: switches the visibility and animates the opacity of an element or elements.
3) fadeIn() and
4) fadeO
jQuery Event Listener
$( '#my-button' ).on( 'click', function( evt ) {
$( evt.target ).css( 'background', 'red' );
});
what does evt contain? How else might this be designated?
describe the process
jQuery passes an event (e, evt, or event) object to the f
(e, evt, or event) object contains information about the event, including:
timestamp, selector reference name or object acted upon, where the click occurred, etc..
Event listener waits for event.
on event - evt object is passed to the callback function.
e
structure jQuery
show command chain example (hide/show)
show command css
$('my-selector').hide()
dollar open pren selector closepren
<action>
.command
$('my-selector').hide(500).show(30).hide(50)
$('my-selector').css({opacity:'0.5'});
.css({color:'red',
fontweight:'bold'
});
why use fontWeight instead of font-weight?
to solve
use fontWeight
jQuery might interpret '-' as minus
so font-weight will be interpreted as font - weight
JQuery $ search for button attribute
id=btn1
data-panel=panel1
$('button[id=btn1');
$('button[data-panel=panel1]');
DRY
utilize class selectors and attribute 'data-id' to uniquely identify item
String usage
var panelId = $(this).attr('data-panelid');
$('#'+ panelId+ ' .panel-body').html( content);
Don't Repeat Yourself
when an event occurs
the target element ______ the callback function when the event occurs
the _______ object which gets passed to an _____ _______ callback
the ______ object contains information about the ______
calls
event
event listener's
event event
The _____ property holds the page element that is the target of the event.
syntax
target
evt.target
What does the following prevent
$( '#myAnchor' ).on( 'click', function( evt ) {
evt.preventDefault();
console.log( 'You clicked a link!' );
});
In the code above, the evt.preventDefault(); line instructs the browser not to perform the default action , which is to open a new page.
what information event attributes contain:
event.target
event.keyCode
event.pageX and event.pageY
event.type
event.target - display target info
event.keyCode - key was pressed - invaluable if you need to listen for a specific key
event.pageX and event.pageY - XY coordinates of click - helpful for analytics tracking
event.type - what event type - useful if listen
convenience methods for
.on( "keypress", handler )
hover() is a convenience method for:
.keypress()
$( selector ).on( "mouseenter mouseleave", handlerInOut );
Event Delegation
setting up event listener for a target that does not yet exist?
for a 'container' listen for a click to a article
$( '.container' ).on( 'click', 'article', function() { ... });