searching the dom

find HTML elements of type 'div'
find element with id 'example'
find elements with class 'example'
find elements having attribute [data-example]
find input elements of type text
find anchor elements having title attribute starting with 'example'
find anchor elements having title attribute ending with '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
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


accessing the matching element from within function
$('[selector]').click(function() {
	var selected = $(this);
	alert('clicked: ' + selected.text());

manipulating the page


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


apply css
$('[selector]').css('width', '250px');
getting current class
add css class to dom element(s)
remove css class from dom element(s)
toggle between 2 classes
$(this).toggleClass("[A] [B]");


get text contained in element
get contained html
set inner html (replace)
prepend html
append html


getting the value of an input
setting the value of an input
$('[selector]').val('new value');
check checkbox
$('[selector]').prop('checked', true);
checkbox is checked?



click on element(s) with selector
assign mouse click listener
$('[selector]').click(function() {
click listener but prevent default action (e.g. open link)
$("[selector]").click (function (event) {
	// do something
call function on mouse enter
$(selector).mouseenter(function() {

change events

change event: fired when input loses focus
$("[selector]").change(function() {...});
change event: fired when mouse or keyboard modifies value, before writeback
$('[selector]').on('input', function() {
example: allow only numbers in input field
$('[selector]').on('input', function() {
	var old = $(this).val();
	var number = old.replace(/[^0-9]*/g, '');

key bindings

key up event
        if (e.which == 27){ 
                // do something
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


load the results of an ajax call into a dom element
ajax call with parameters
do HTTP POST with ajax
    		param1: "value1",
	    	param2: "value2"
	function(data, status){
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

keyboard shortcuts plugin

keyboard shortcuts with jquery.hotkeys

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


official site
key descriptions