id="mark"
, when the document is ready to be
manipulated.
$(document).ready()
is an event that is used to manipulate a
page safely with the jQuery. Code
included inside this event will only run
once the page DOM is ready. We'll
learn more about the events in next
chapter.
class="mark"
, when the document is ready.
<p>
elements of the document when it is
ready.
target
attribute or an input's type
attribute, etc.
<input>
elements with the type="text"
, when the document is ready.
<h1>
element using the jQuery element
selector and css()
method when the document is ready which
is known as document ready event.
We'll learn about jQuery selectors,
events and methods in upcoming
chapters.
ready()
, click()
, keypress()
, focus()
, blur()
, change()
, etc. For example, to execute some
JavaScript code when the DOM is ready,
you can use the jQuery ready()
method, like this:
$(document).ready()
is an event that is used to manipulate a
page safely with the jQuery. Code
included inside this event will only run
once the page DOM is ready i.e. when the
document is ready to be
manipulated.
click()
Method
click()
method attach an event handler function
to the selected elements for
"click" event. The attached
function is executed when the user
clicks on that element. The following
example will hide the
<p>
elements on a page when they are
clicked.
this
keyword inside the jQuery event handler
function is a reference to the element
where the event is currently being
delivered.
dblclick()
Method
dblclick()
method attach an event handler function
to the selected elements for
"dblclick" event. The attached
function is executed when the user
double-clicks on that element. The
following example will hide the <p>
elements when they are
double-clicked.
hover()
Method
hover()
method attach one or two event handler
functions to the selected elements that
is executed when the mouse pointer
enters and leaves the elements. The
first function is executed when the user
place the mouse pointer over an element,
whereas the second function is executed
when the user removes the mouse pointer
from that element.
<p>
elements when you place the cursor on
it, the highlighting will be removed
when you remove the cursor.
hover()
method is a combination of the jQuery mouseenter()
and mouseleave()
methods.
mouseenter()
Method
mouseenter()
method attach an event handler function
to the selected elements that is
executed when the mouse enters an
element. The following example will add
the class highlight to the <p>
element when you place the cursor on
it.
mouseleave()
Method
mouseleave()
method attach an event handler function
to the selected elements that is
executed when the mouse leaves an
element. The following example will
remove the class highlight from the <p>
element when you remove the cursor from
it.
keypress()
Method
keypress()
method attach an event handler function
to the selected elements (typically form
controls) that is executed when the
browser receives keyboard input from the
user. The following example will display
a message when the kypress event is
fired and how many times it is fired
when you press the key on the
keyboard.
keydown()
Method
keydown()
method attach an event handler function
to the selected elements (typically form
controls) that is executed when the user
first presses a key on the keyboard. The
following example will display a message
when the keydown event is fired and how
many times it is fired when you press
the key on the keyboard.
keyup()
Method
keyup()
method attach an event handler function
to the selected elements (typically form
controls) that is executed when the user
releases a key on the keyboard. The
following example will display a message
when the keyup event is fired and how
many times it is fired when you press
and release a key on the keyboard.
change()
Method
change()
method attach an event handler function
to the
<input>
,
<textarea>
and
<select>
elements that is executed when its value
changes. The following example will
display an alert message when you select
any option in dropdown select box.
focus()
Method
focus()
method attach an event handler function
to the selected elements (typically form
controls and links) that is executed
when it gains focus. The following
example will display a message when the
text input receive focus.
blur()
Method
blur()
method attach an event handler function
to the form elements such as <input>
, <textarea>
, <select>
that is executed when it loses focus.
The following example will display a
message when the text input loses
focus.
submit()
Method
submit()
method attach an event handler function
to the
<form>
elements that is executed when the user
is attempting to submit a form. The
following example will display a message
depending on the value entered when you
try to submit the form.
ready()
Method
ready()
method specify a function to execute
when the DOM is fully loaded.
resize()
Method
resize()
method attach an event handler function
to the window element that is executed
when the size of the browser window
changes.
scroll()
Method
scroll()
method attach an event handler function
to the window or scrollable iframes and
elements that is executed whenever the
element's scroll position
changes.
show()
and hide()
Methods
show()
and hide()
methods.
hide()
method simply sets the
inline style
display: none
for the selected elements. Conversely,
the show()
method restores the
display properties
of the matched set of elements to
whatever they initially were—typically
block, inline, or inline-block—before
the inline style display: none
was applied to them. Here's is an
example.
'slow'
or 'fast'
, or in a number of milliseconds, for
greater precision; higher values
indicate slower animations.
'fast'
indicates the durations of 200
milliseconds, while the string 'slow'
indicates the durations of 600
milliseconds.
show()
or hide()
method completes. We'll learn more
about the callback function in upcoming
chapters.
toggle()
Method
toggle()
method show or hide the elements in such
a way that if the element is initially
displayed, it will be hidden; if hidden,
it will be displayed (i.e. toggles the
visibility).
toggle()
method to make it animated like the show()
and hide()
methods.
fadeIn()
and fadeOut()
Methods
fadeIn()
and fadeOut()
methods to display or hide the HTML
elements by gradually increasing or
decreasing their opacity.
fadeIn()
and fadeOut()
methods to control how long the fading
animation will run. Durations can be
specified either using one of the
predefined string 'slow'
or 'fast'
, or in a number of milliseconds;
higher values indicate slower
animations.
fadeIn()
/fadeOut()
method looks similar to show()
/hide()
, but unlike show()
/hide()
method the fadeIn()
/fadeOut()
method only animates the opacity of the
target elements and does not animates
their dimensions.
fadeIn()
or fadeOut()
method completes. We'll learn more
about the callback function in upcoming
chapters.
fadeToggle()
Method
fadeToggle()
method display or hide the selected
elements by animating their opacity in
such a way that if the element is
initially displayed, it will be fade
out; if hidden, it will be fade in (i.e.
toggles the fading effect).
fadeToggle()
method like fadeIn()
/fadeOut()
method to control the duration or speed
of the fade toggle animation.
fadeTo()
Method
fadeTo()
method is similar to the .fadeIn()
method, but unlike .fadeIn()
the fadeTo()
method lets you fade in the elements to
a certain opacity
level.$(selector).fadeTo(speed, opacity,
callback);
slideUp()
and slideDown()
Methods
slideUp()
and slideDown()
methods is used to hide or show the HTML
elements by gradually decreasing or
increasing their height (i.e. by sliding
them up or down).
slideUp()
and slideDown()
methods to control how long the slide
animation will run. Durations can be
specified either using one of the
predefined string 'slow'
or 'fast'
, or in a number of milliseconds;
higher values indicate slower
animations.
slideUp()
or slideDown()
method completes. We'll learn more
about the callback function in upcoming
chapters.
slideToggle()
Method
slideToggle()
method show or hide the selected
elements by animating their height in
such a way that if the element is
initially displayed, it will be slide
up; if hidden, it will be slide down
i.e. toggles between the slideUp()
and slideDown()
methods.
slideToggle()
method like slideUp()
and slideDown()
methods to control the speed of the
slide toggle animation.
animate()
Method
animate()
method is used to create custom
animations. The animate()
method is typically used to animate
numeric CSS properties, for example,
width
,
height
,
margin
,
padding
,
opacity
,
top
,
left
, etc. but the non-numeric properties
such as
color
or
background-color
cannot be animated using the basic
jQuery functionality.
animate()
method can be given
with:$(selector).animate({ properties },
duration, callback);
animate()
method have the following
meanings:
'slow'
or 'fast'
, or in a number of
milliseconds; higher values
indicate slower
animations.
animate()
method that animates an image from its
original position to the right by 300
pixels on click of the button.
position
property for the element to relative
, fixed
, or absolute
to manipulate or animate its
position.
animate()
method. All the properties animated
simultaneously without any delay.
animate()
method, e.g. if you want to animate the
font size you need to write 'fontSize'
rather than '
font-size
'
. Similarly, write 'marginLeft'
instead of '
margin-left
'
, 'borderWidth'
instead of '
border-width
'
, and so on.
border-style
property for the element before
animating its
border-width
property. An element must have borders
before you can animate the border width,
because the default value of the border-style
property is none
.
+=
or -=
prefix, then the target value is
calculated by adding or subtracting the
given number from the current value of
the property.
'show'
, 'hide'
, and 'toggle'
. It will be very helpful in a
situation when you simply want to
animate the property from its current
value to the initial value and vice
versa.
html()
method. If no parameters are passed to
it, the HTML contents of the selected
element is returned instead of a jQuery
object.
slideToggle()
effect method with a callback function
can be given
with:$(selector).slideToggle(duration,
callback);
slideToggle()
and alert()
statements next to each other. If you
try this code the alert will be
displayed immediately once you click the
trigger button without waiting for slide
toggle effect to complete.
alert()
statement inside a callback function for
the slideToggle()
method. If you try this code the alert
message will be displayed once the slide
toggle effect has completed.
show()
, hide()
, fadeIn()
, fadeOut()
, animate()
, etc.