jQuery Tour

This is not meant to be a comprehensive jQuery guide, or even a tutorial, but a tour through some of its core concepts and fun and useful functions.

For more info and some great tutorials, see the jQuery site, especially

Core concept: $

jQuery('#foo').hide();
$('#foo').hide();
$.now(); // returns the current time in msec

Core concept: Selectors

Core concept: Collections 1

Core concept: Collections 2

Core concept: Collections 3

Loading jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Animation

$("#logo").animate({
    backgroundColor: "#aa0000"
}, 1000 );

Event Listening

$('#hi').on('click', function() {
    alert("hi");
});
$('#hi').click(function() {
    alert("hi");
});

return false

More about jQuery Event Listening

var f = function(event) {....}

$('#hi').click(f);
$('#hi').change(f);
$('#hi').on('click', f);
$('#ho').on('change', f);
$('#hi').on('click change', f);
$('#hi').on('click', f)
        .on('change', f);

Ready, Fire, Aim

jQuery has a special event that is fired when the page is "ready", i.e. the DOM hierarchy has been fully constructed.

$(document).ready(function() {
    // set up your page
});

It's best to put setup code in a "ready" handler rather than directly inside a <script> tag since the document might not be ready yet.

This can be abbreviated, but this might be unclear:

$(function() {
    // set up your page
});

"In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead." - http://api.jquery.com/ready/

 Previous Next 

Outline

[menu]

/