accessing and manipulating DOM objects and gives it a sane API. It allows you
to easily access any element just using CSS Selectors, and
lets you bind callbacks to various events with the
Jquery, add the following script tag to your page:
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
|Mouse Events||Keyboard Events||Form Events||Document/Window Events|
Binding an action to an event with
Jquery is really easy. Say you want to pop
up an alert every time someone mouses over an element, you could do:
Jquery also has methods that will bind to a specific event, instead of the
.on() method. For example, you can do something similar with the
A useful pattern for running code once the entire page has loaded is to add a
callback to the
Each event handler is passed an object with information about the event. Most event objects have attributes specific to the event which occurred, but here are some of the more common ones. For more information, consult the documentation.
- e.currentTarget - The current DOM element within the event bubbling phase.
- e.data - An optional object of data passed to an event method when the current executing handler is bound.
- e.delegateTarget - The element where the currently-called jQuery event handler was attached.
- e.isDefaultPrevented() - Returns whether event.preventDefault() was ever called on this event object.
- e.isImmediatePropagationStopped() - Returns whether e.stopImmediatePropagation() was ever called on this event object.
- e.isPropagationStopped() - Returns whether event.stopPropagation() was ever called on this event object.
- e.metaKey - Indicates whether the META key was pressed when the event fired.
- e.namespace - The namespace specified when the event was triggered.
- e.pageX - The mouse position relative to the left edge of the document.
- e.pageY - The mouse position relative to the top edge of the document.
- e.preventDefault() - If this method is called, the default action of the event will not be triggered.
- e.relatedTarget - The other DOM element involved in the event, if any.
- e.result - The last value returned by an event handler that was triggered by this event, unless the value was undefined.
- e.stopImmediatePropagation() - Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.
- e.stopPropagation() - Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
- e.target - The DOM element that initiated the event.
- e.timeStamp - The difference in milliseconds between the time the browser created the event and January 1, 1970.
- e.type - Describes the nature of the event.
- e.which - For key or mouse events, this property indicates the specific key or button that was pressed.
- setTimeout(function, milliseconds)
- Executes a function, after waiting a specified number of milliseconds.
- setInterval(function, milliseconds)
- Same as setTimeout(), but repeats the execution of the function continuously.
For example, this is an (annoying) timer that'll raise an
alert() every 3
- jQuery.get(): Load data from the server using a HTTP GET request.
- jQuery.getJSON(): Load JSON-encoded data from the server using a GET HTTP request.
- jQuery.post(): Load data from the server using a HTTP POST request.
- jQuery.load(): Load data from the server and place the returned HTML into the matched element.
Here is an example of grabbing data from a web API and then printing it to the screen:
Because Jquery gives you access to the
keypressed event, it's quite easy to
bind an event handler to the body element which listens for
then logs it somewhere.
The event object given to the handler contains the key pressed (as its ascii
value), as well as information such as whether ctrl, alt, or shift were held
down at the time. You can tie this in with either the mouse position or the
target to figure out what the user was looking at when they entered some
Similar to the last example, you can hook into a form's
submit event to then
get whatever was entered into the form. Then using the
method, you can get this data in a easy to read format and do whatever you want
with it to validate a user's input before sending the form on to wherever it is
meant to go.