This is not intended to be a definitive list of jQuery features, just a quick reminder of the specific things we have used in the course.
For more details, see the jQuery Reference.
Top-Level Function
Each of these returns a jQuery object representing some elements on the page.
| Function/Example | Description |
|---|---|
jQuery('p') |
A jQuery object representing all <p>. |
$('p') |
Exactly the same as jQuery('p'). |
$('#thing') |
A jQuery object representing the element with id="thing". |
$(document) |
A jQuery object representing the whole HTML page. |
jQuery Object Functions
Filtering jQuery Objects
These take a jQuery object and refine the selection, giving back a new jQuery object.
| Function/Example | Description |
|---|---|
$(…).first() |
A jQuery object representing the first of the selected element(s). |
$(…).last() |
A jQuery object representing the last of the selected element(s). |
Event Handling
Each of these attaches a function to an event on everything in a jQuery object.
| Function/Example | Description |
|---|---|
$(…).click(handler) |
When the selected element(s) are clicked, call handler(). |
$(…).ready(handler) |
When the selected element(s) are fully loaded, call handler(). Usually applied to $(document). |
$(…).mouseenter(handler) |
When one of the selected element(s) has the mouse cursor move over it, call handler(). |
$(…).mouseleave(handler) |
When one of the selected element(s) has the mouse cursor move away from it, call handler(). |
$(…).on('click', handler) |
Exactly the same as $(…).click(handler). |
$(…).on('touchstart', handler) |
Attach a handler() callback to the “touchstart” event. |
Modifying the Page
Each of these modifies the element(s) in the jQuery object.
| Function/Example | Description |
|---|---|
$(…).append('<p>Hi</p>') |
Add a paragraph to the end of the selected element(s). |
$(…).animate({'width': '8em'}, 2000) |
Animate CSS properties of the selected element(s) from current value to the ones given, over 2 seconds. |
$(…).attr('class', 'nice') |
Set the class="nice" on the selected element(s). |
$(…).css({'color': '#f00'}) |
Change CSS properties of the selected element(s). |
$(…).html('Hello') |
Set the content of the selected element(s) to Hello. |
$(…).remove() |
Remove the selected element(s) from the page. |
Others
These don't fall into the categories above.
| Function/Example | Description |
|---|---|
$(…).val() |
Get the value the user has entered/selected on the form control. |