ict.ken.be

CSS SELECTORS

element
#elementId
.elementClass
* { any element }
#elementId * { all children of elementId }
E { all tags E }
E F { all tags F descendants of E }
E>F { all tags F direct children of E } // child combinator
E+F { all tags F immediately preceded by sibling E } // adjacent selector
E~F { all tags F preceded by any sibling E } // sibling combinator
E.C { all tags E with class C }  // .C = *.C
E#I { all tags E with id I } // #I = *#I
E[A] { all tags E with attribute A }
E[A=V] { all tags E with attribute A of value V } // eg. a[href="foo"]
E[A^=V] { all E with attribute A value beginning with V }
E[A$=V] { all E with attribute A value end with V } // eg. a[href$=".jpg"]
E[A*=V] { all E with attribute A value contains with V }
E[A~=V] { all E with value in space separated list A }
a:link { anchors tags that not been clicked on }
a:visited { anchors tags that have been clicked }
X:checked { all checked radio and checkboxes }
X:disabled, X:enabled
X:after, X:before { generate content around an element } // eg. .crumb:after { content : ">" }
X:hover { styling element on hover over } // user action pseudo class
X:not(selector) // eg. div:not(#container)
X:first-child
X:last-child
X:only-child { target elements wich are only child of parent }
X:only-of-type { elements that have no siblings within parent container }
X:first-of-type { first sibling of its type }
X:nth-child(n) { nth-child is 1-based all the other selectors are 0-based }
X:nth-child(Xn+Y) { every x element }
X:nth-last-child(n)
X:nth-of-type(n) { select according to type of element }
X:nth-last-of-type(n)
X:nth-child(even|odd)
X::first-letter { first letter of block elements }
X::first-line { first line of block elements }

JQUERY SELECTORS

:animated
:button
:checkbox
:checkbox:checked
:contains(foo)
:file
:header //h1 -> h6
:hidden
:image //input[type=image]
:input //input, select, textarea, button
:not(filter)
:parent //all elements that have children including text but not empty ones
:password
:radio
:radio:checked
:reset
:selected
:submit
:text
:visible
:even
:odd
:eq(n) returns nth matching element
:gt(n) elements after nth matching
:lt(n) elements before nth matching
E:has(F) all tags E with at least one F contained //only one nested level eg. foo:not(bar:has(baz))

XPATH-JQUERY PLUGIN

/html//form/fieldset all <fieldset> elements direct under <form>
/html//form/*/input all <input> elements directly under exactly on element under <form>
//div/.. matches all elements that are direct parent to a <div>
//div[@foo=bar]
//div[@p] all div elements with at least one <p>
position() equals :first
position()>n equals :gt(n)

A selector overview you can find at: https://ict.ken.be/selectors

$(selector) -> jQuery(selector) //jQuery.noConflict();
$(function() {}); -> $(document).ready(function() {});

.html();
$.trim(someString)
$("<div>"); -> $("<div/>"); -> $("<div></div>");
$("<p>inserted</p>").insertAfter(selector);
.end() //revert back to full set after a filter
.size(); //eg. $("#someDiv").html('There are '+$('a').size()+' links on this page.');
$('img[alt]').get(0) -> $('img[alt]')[O]
$('label+button').get();
$('img').index($('img#findMe')[0]);
$('img[alt], img[title]'); -> $('img[alt]').add('img[title]'); //or
$('img[title]').not('[title*=puppy]');
.filter(expression or fuction returning bool or selector);
.match(regex);
.slice(begin,end);
.children(), .contents(), .next(), .nextAll(), .parent(), .parents(), .prev(), .prevAll(), .siblings()
.addClass();
.find();
.contains();
.is(selector); //if any element in the wrapped set matches the selector
.clone();
.andSelf(); //merges two previous wrapped sets in a command chain

$.fn.disable = function () {} //extending jQuery

.each(function(n) {});

.append('<p>some html</p>')

if (!event) event = window.event; //IE
var target = (event.target) ? event.target : event.srcElement; //IE

$('*').each(function() {}); //for every element on the page

stopPropagation(); //stop bubbling up
return false; // will cancel the default semantics/actions and bubble

addEventListener('click', function(event) {}, useCapture); //DOM Level 2, use capture is false for bubble phase and true for capture - IE uses attachEvent()

.bind('click'), function(event) {}); //jQuery encapsultes the attachEvent and addEventListener
.one() //handler removed after one execution
$('*').unbind('click.editMode'); //namespace through suffix

.trigger(eventType);
.eventName(); //blur, click, focus, select, submit
.toggle(listenerOdd, listenerEven);
.hover(overListerner,outListener); //mouseover and mouseout will trigger on transitions of contained elements, hover will not

<label></label> //progressive disclosure: use to enclose radio and text, so clicking either will trigger click of control

EVENTS

Events: blur, change, click, dblclick, error, focus, keydown, keypress, keyup, load, mousedown, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload

Safe event instance properties: altKey, ctrlKey, data, keyCode, metaKey, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, type, which

APPENDIX

• a closure is a function instance coupled with the local variables from its enviroment that are necessary for its execution.
• javascript object is an unordered collection of name/value pairs
• class attribute is represented by the className attribute property
• an event bubbles all the way up until the root