You are on page 1of 8

SELECTORS - ATTRIBUTES CSS -

MANIPULATION - TRAVERSING -
EVENTS - EFFECTS - AJAX - CORE

JQUERY CSS
SELECTORS
Basic Content Filters Child Filters

“*” :contains() :first-child


.class :empty :first-of-type
element :has() :last-child
#id :parent :last-of-type
selector1, selectorN, ... :nth-child()
:nth-last-child()
Hierarchy Visibility Filters :nth-last-of-type()
:nth-of-type()
parent > child :hidden :only-child
ancestor descendant :visible :only-of-type()
prev + next
prev ~ siblings
Attributes Forms
Basic Filters
[name|="value"] :button :input
:animated :lang() [name*="value"] :checkbox :password
:eq() :last [name~="value"] :checked :radio
:even :lt() [name$="value"] :disabled :rest
:first :not() [name="value"] :enabled :selected
:gt() :odd [name!="value"] :focus :submit
:header :root [name^="value"] :file :text
:target [name] :image
[name="value"][name2="value2"]

ATTRIBUTES \ CSS

Attributes CSS Dimensions

.attr() .addClass() .height()


.prop() .css() .innerHeight()
.removeAttr() jQuery.cssHooks .innerWidth()
.removeProp() .hasClass() .outerHeight()
.val() .removeClass() .outerWidth()
.toggleClass() .width()

Data Offset

jQuery.data() .offset()
.data() .offsetParent()
jQuery.hasData() .position()
jQuery.removeData() .scrollLeft()
.removeData() .scrollTop()
MANIPULATION

Copying DOM Insertion, Around DOM Insertion, Inside

.clone() .wrap() .append()


.wrapAll() .appendTo()
.wrapInner() .html()
.prepend()
.prependTo()
DOM Removal DOM Insertion, Outside
.text()

.detach() .after()
.empty() .before() DOM Replacement
.remove() .insertAfter()
.unwrap() .insertBefore() .replaceAll()
.replaceWith()

TRAVERSING

Filtering Miscellaneous Tree Traversal


Traversing
.eq() .addBack() .parent()
.filter() .add() .children() .parents()
.first() .andSelf() .closest() .parentsUntil()
.has() .contents() .find() .prev()
.is() .each() .next() .prevAll()
.last() .end() .nextAll() .prevUntil()
.map() .nextUntil() .siblings()
.not()
.slice()
EVENTS

Browser Events Mouse Events Event Handler


Attachment
.error() event.currentTarget
.resize() event.data .bind()
.scroll() event.isDefaultPrevented() .delegate()
event.isImmediatePropagationStopped() .off()
event.isPropagationStopped() .on()
event.namespace .one()
Form Events event.pageX .trigger()
event.pageY .triggerHandler()
.blur()
event.preventDefault() .unbind()
.change()
event.relatedTarget .undelegate()
.focus()
event.result
.select()
event.stopImmediatePropagation()
.submit()
event.stopPropagation() Mouse Events
event.target
event.timeStamp .click()
Document Loading .dblclick()
event.type
event.which .focusin()
.holdReady()
.focusout()
.load()
.hover()
.ready() Keyboard Events
.mousedown()
.unload()
.mouseenter()
.keydown()
.mouseleave()
.keypress()
.mousemove()
.keyup()
.mouseout()
.mouseover()
.mouseup()

EFFECTS
Basics Custom Fading

.hide() .animate() .fadeIn()


.show() .clearQueue() .fadeOut()
.toggle() .delay() .fadeTo()
.dequeue() .fadeToggle()
jQuery.dequeue()
Sliding .finish()
jQuery.fx.interval

.slideDown() jQuery.fx.off

.slideToggle() .queue()

.slideUp() jQuery.queue()
.stop()
AJAX
Global Ajax Event Helper Functions Low-Level Interface
Handlers
jQuery.param() jQuery.ajax()
.ajaxComplete() .serialize() jQuery.ajaxSetup()
.ajaxError() .serializeArray()
.ajaxSend()
.ajaxStart()
Shorthand Methods
.ajaxStop()
.ajaxSuccess() jQuery.get()
jQuery.getJSON()
jQuery.getScript()
.load()
jQuery.post()

CORE

jQuery Object Utilities DOM Element Methods

jQuery() jQuery.contains() .get()


jQuery.noConflict() jQuery.each() .index()
jQuery.when() jQuery.extend() .size()
jQuery.globalEval() .toArray()
jQuery.grep()
jQuery.inArray()
Internals
Deferred Object jQuery.isArray()
jQuery.isEmptyObject()
.jquery
deferred.always() jQuery.isFunction()
.context
deferred.done() jQuery.isNumeric()
jQuery.error()
deferred.fail() jQuery.isPlainObject()
.length
deferred.notify() jQuery.isWindow()
.pushStack()
deferred.notifyWith() jQuery.isXMLDoc()
.selector
deferred.pipe() jQuery.makeArray()
deferred.progress() jQuery.map()
deferred.promise() jQuery.merge() Callbacks Object
deferred.reject() jQuery.noop()
deferred.rejectWith() jQuery.now() jQuery.Callbacks()
deferred.resolve() jQuery.parseHTML() callbacks.add()
deferred.resolveWith() jQuery.parseJSON() callbacks.disable()
deferred.state() jQuery.parseXML() callbacks.empty()
deferred.then() jQuery.proxy() callbacks.fire()
.promise() jQuery.support callbacks.fired()
jQuery.trim() callbacks.fireWith()
jQuery.type() callbacks.has()
jQuery.unique() callbacks.lock()
callbacks.locked()
callbacks.remove()
CSS - POSITIONING - HEIGHT & WIDTH - STYLESHEETS -
CLASS - ATTRIBUTES
jQuery CSS - CSS

Get css property of element. $(“#elementid”).(cssproperty);

Set multiple properties. $(“#elementid”).css({‘border’:’1px


solid red’, ‘font-size’ : ‘12px’,
‘font-weight:bold’});

Set single property. Set single property. $(“#elementid”).css(‘border’, ‘1px


solid red’);

jQuery CSS - Positioning

Get the offset (position var offset =


of element relative to $(“#elementid”).offset();
the page). Returned as alert(offset.left);
an object. alert(offset.top);

Get the position var position =


(position of element $(“#elementid”).offset();
relative to parent). alert(position.left);
Returned as object. alert(position.top);

Get scrollbar vertical $(window).scrollTop();


position. Works on any
element with scrollbar.

Set scrollbar vertical position. $(window).scrollTop(700);

Get scrollbar horizontal position. $(window).scrollLeft();

Set scrollbar horizontal position $(window).scrollLeft(400);


jQuery CSS - Height & Width

Get the current height of element. $(“#elementid”).height();

Set the current height of element. $(“#elementid”).height(120);

Get the current width of element. $(“#elementid”).width();

Set the current width of element. $(“#elementid”).width(170);

Get the inner height (height of element $(“#elementid”).innerHeight();


incl. padding excl. border) of element.

Get the inner width (width of element $(“#elementid”).innerWidth();


incl. padding excl. border) of element.

Get the outer height (height of element $(“#elementid”).outerHeight();


incl. padding and border) of element. If or
true param passed in also includes $(“#elementid”).outerHeight(true);
margin height.

Get the outer width of element $(“#elementid”).outerWidth();


(see outer height notes above). or
$(“#elementid”).outerWidth(true);

Stylesheets

Change single stylesheet. $("link[rel=stylesheet]").attr({href :


"css/sheet_a.css"});

Switch particular stylesheet. $("link[rel=stylesheet][href=css/sheet_c.css]").attr(


{href : "css/sheet_a.css"});

Add a stylesheet. $("head").append('<link rel="stylesheet"


type="text/css" href="css/sheet_a.css" />');
jQuery Attributes - Class

Add a class to an element. $(“#elementid").addClass(“class”);

Check element has a particular class. $(“#elementid").hasClass(“class”);

Remove a class from an element. $(“#elementid”).removeClass(“class”);

Remove a class if element has it $(“#elementid").toggleClass(“class”);


otherwise add the class.

jQuery Attributes - Attr

Get the ID of element. e.g. $(“#elementid div:firstchild").attr("id");

Set the ID of element. e.g. $(“#elementid div:firstchild").attr("id",


“my_new_id”);

Remove the ID attribute $(“#elementid”).removeAttr(“id”);


from an element.

You might also like