jquery
include
<script src="jquery-3.5.1.min.js"></script>
searching the dom
find HTML elements of type 'div'
$('div')
find element with id 'example'
$('#example')
find elements with class 'example'
$('.example')
find elements having attribute [data-example]
$('[data-example]')
find input elements of type text
$('input[type=text]')
find anchor elements having title attribute starting with 'example'
$('a[title^="example"]')
find anchor elements having title attribute ending with 'example'
$('a[title$="example"]')
filtering results by index
$('table tr:gt(0)')
$('table tr:eq(5)')
$('table tr:lt(9)')
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/
general
accessing the matching element from within function
$('[selector]').click(function() {
var selected = $(this);
alert('clicked: ' + selected.text());
})
accessing the parent of a node
node.parent()
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();
visibility based on boolean value
element.toggle(visible)
CSS
apply css
$('[selector]').css('width', '250px');
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]");
html
get text contained in element
$('[selector]').text();
get contained html
$('[selector]').html();
set inner html (replace)
$('[selector]').html('');
prepend html
$('[selector]').prepend('');
append html
$('[selector]').append('');
forms
getting the value of an input
$('[selector]').val();
setting the value of an input
$('[selector]').val('new value');
check checkbox
$('[selector]').prop('checked', true);
checkbox is checked?
$('[selector]').is(":checked")
events
mouse
click on element(s) with selector
$('[selector]').click();
assign mouse click listener
$('[selector]').click(function() {
click listener but prevent default action (e.g. open link)
$("[selector]").click (function (event) {
// do something
event.preventDefault();
});
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, '');
$(this).val(number);
}
key bindings
key up event
$(document).keyup(function(e){
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
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/
examples
filtering rows in a table
function filter_table(selector, predicate) {
$(selector).find('tr').each(function() {
tr = $(this)
tr.toggle(predicate(tr));
})
}
filter_table('table', function(tr) {
return tr.hasClass('odd')
})
sorting rows in a table
function sortTable(table, tr, comparator) {
var root = $(table)
var rows = root.find(tr)
var sorted = rows.toArray().sort(comparator)
rows.remove()
sorted.forEach(function(row){
root.append(row)
})
}
$('#mytable th').click(function() {
column = $(this).index()
sortTable('#mytable', 'tr:gt(0)', function(rowA, rowB) {
aText = $(rowA).find("td").eq(column).text()
bText = $(rowB).find("td").eq(column).text()
return aText.localeCompare(bText)
})
})
keyboard shortcuts plugin
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