jQuery Notes

Basic Selectors

• By tag $("tag")
• By class $(".class")
• By id $("#id")
• Combination $("tag.class#id")
• Multiple $("sel1, sel2")

Hierarchy Selectors

• Descendant $("ancestor descendant")
• Child $("parent>child")
• Next $("start+next")
• Sibling $("start~siblings")

Basic Filters :filter(param)

• First/Last $("sel:first") $("sel:last")
• Not $("sel1:not(sel2)")
• Even/Odd $("sel:even") $("sel:odd")
• Index (starts from 0) $("sel:eq(index)")

Content Filters

• Contain Text $("sel:contains(text)")
• Contain Element $("sel:has(element)")
• Empty $("sel:empty")
• Parents $("sel:parent")

Visibility Filters

• $("sel:visible") $("sel:hidden")

Attribute Filters

• $("sel[attr=value]")

Child Filters

• Nth Child $("sel:nth-child([even|odd|eq|index])")
• First/Last $("parent child:last")

Form Filters

• By Element Type $("input:type")
• Disabled/Enabled $(":disabled")
• Checled/Selected $(":checked")

Traversing DOM Elements

• .eq(index)
• .filter(sel)
• .not(sel)
• .first() .last()
• .has(sel)
• .is(sel)
• .slice(start [, end])
• .children([sel])
• .closest(sel)
• .find(sel)
• .next([sel]) .nextAll([sel]) .nextUntil(sel)
• .prev([sel]) .prevAll([sel]) .prevUntil(sel)
• .siblings([sel])
• .parent([sel]) .parents([sel]) .parentsUntil([sel])
• .add(sel|text)
• .andSelf()
• .contents()
• .end()

Creating and Inserting DOM Elements

• $("<tag>",{ attr:value })
• .append(el) .prepend(el)
• .appendTo(sel) .prependTo(sel)
• .after(el) .before(el)
• .insertAfter(sel) .insertBefore(sel)
• .wrap(el)
• .unwrap()
• .wrapAll(el)
• .wrapInner(el)
• .remove(sel) .detach(sel)

Accessing and Modifying CSS Attributes

• .attr(attr [, value])
• .removeAttr(attr)
• .css({ styles })
• .text([replace]) .html([replace])
• .val([value])
• .data(name, value | {JSON})
• .addClass(classes) .removeClass(classes) .toggleClass(classes)
• .hasClass(classes)
• .height([value]) .width([value])
• .innerHeight() .innerWidth() .outerHeight() .outerWidth()

Affecting Result Sets

• .map(function(index, el) { })
• .each(function(index, el) { })

Using Animations and other Effects

• .show([duration [, callback]]) .hide([duration [, callback]])
• .fadeIn([duration [, callback]]) .fadeOut([duration [, callback]]) .fadeTo(duration, opacity [, callback])
• .slideUp([duration [, callback]]) .slideDown([duration [, callback]]) .slideToggle([duration [, callback]])
• .animate(JSON CSS, [duration [, easing [, callback]]])
• .delay(duration)
• .stop([clearQ [, jumptoend]])

Handling Events

• .error(callback)
• .scroll(callback)
• .ready(function($alias) { })
• .unload(callback)
• Events : blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and error
• .bind(events, [data, ] callback) .unbind(events [, callback])
• .live(events, callback) .die(events [, callback])
• .one(events, callback)
• .toggle(functions|duration|none)
• .trigger(event)

Using AJAX Controls

• $.ajax(options)
  • data : key=value&|JSON
  • dataFilter(data, type)
  • dataType : xml|html|script|json|jsonp|text
  • error(XMLHttpRequest, textStatus, errorThrown)
  • success(data, textStatus, XMLHttpRequest)
  • type : GET|POST|PUT|DELETE
  • url : URL
• $.ajaxSetup(defaultOptions)
• $.get(url [, data [, callback [, datatype]]]) $.post(url [, dtat [, callback [, datatype]]])
• $.getJSON(url [, data [, callback]])
• $.getScript(url [, callback])
• .load(url [, data [, callback]])