Index

jquery

searching the dom

find HTML elements of type 'div'
$('div')
find element with id 'example'
$('#example')
find elements with class 'example'
$('.example')
find anchor elements having titles starting with 'example'
$('a[title^="example"]')
find anchor elements having titles ending with 'example'
$('a[title$="example"]')
get an attribute from a html element
var url = $('#example').attr('href');
getting the text contained by an element
var text = $('#example').text();
finding elements containing specified text
$("div:contains('partial match')")
finding elements with contained text matching exactly
$('#example').filter(function() { return $.text([this]) === 'exact match'; });
select children of a jquery match
$('[selector]').children('[selector]');
iterate selector results
$('a').each(function() {
    console.log('link:' + $(this).attr('href'));
});
only do something if the selector has matches
if ($(selector).length ) {
documentation on selectors
http://api.jquery.com/category/selectors/

manipulating the page

visibility

getting current visibility
var visible = $(this).is(":visible")
show an element
$('[selector]').show();
hide an element
$('[selector]').hide();
toggle between visible and invisible
$('[selector]').toggle();

classes

getting current class
$('[selector]').attr('class');
add css class to dom element(s)
$('[selector]').addClass("example");
remove css class from dom element(s)
$("[selector]").removeClass("example");
toggle between 2 classes
$(this).toggleClass("[A] [B]");

inserting html

set inner html
$('[selector]').html('');
prepend html
$('[selector]').prepend('');
append html
$('[selector]').append('');

forms

getting the value of an input
$('#foo').val();

events

click on element(s) with selector
$('[selector]').click();
assign mouse click listener
$('[selector]').click(function() {
call function on mouse enter
$(selector).mouseenter(function() {
input change event
$("#foo").change(function() {...});
key up event
$("#foo").keyup(function() {...});
binding a key with ctrl + alt
$(document).bind('keydown', function(event) {
	if(event.altKey && event.ctrlKey) {
		var key = String.fromCharCode(event.which).toLowerCase();
javascript key codes
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

AJAX

load the results of an ajax call into a dom element
$("#someelement").load('http://example.com');
ajax call with parameters
$.ajax({
	url:"/path/to/page", 
	cache:false, 
	data:{foo:'bar',bas:'baz'}
}).done(function(result){
	$('#foo').html(result)
});
do HTTP POST with ajax
$.post("/path/to/page",
	{
    		param1: "value1",
	    	param2: "value2"
	},
	function(data, status){
		$('body').html('<h1>Success!</h1>');
	}
);
register events on a top level element, so that they don't disappear when the content is replaced with ajax
.on( events [, selector ] [, data ], handler )
links for the "on" selector
http://api.jquery.com/on/
https://api.jquery.com/contains-selector/

keyboard shortcuts

keyboard shortcuts with jquery.hotkeys

$(document).bind('keyup', 'F1', function() {
	alert('F1 pressed');
});

references

official site
https://github.com/jeresig/jquery.hotkeys
key descriptions
https://rawgit.com/jeresig/jquery.hotkeys/master/test-static-01.html