Just enough jQuery to survive
Selecting elements
<header class="page__header">
<a class="page__header__logo" href="/">Company</a>
<nav class="page__header__nav>
<a class="page__header__nav__item" href="#">Item</a>
<a class="page__header__nav__item" href="#">Item</a>
<a class="page__header__nav__item" href="#">Item</a>
</nav>
</header>
$('a'); // select all links on the page
var $header = $('.page__header__nav'); // select the navigation
$('a', $header); // select the links in the navigation, or:
$header.find('a');
Handling events
$('.js-log').on('click', function(event) {
console.log('click!', event.target);
});
Run code after the HTML is ready
A lot of the code will depend on the DOM Tree (representation of HTML in JS).
$(document).ready(function() {
// run the code
});
// or
$(function() {
// run the code
});
Using custom plugins
After including the plugin in the bundle, it will be available on the jQuery object:
$('selector').plugin();