Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Wiki Markup
h3. Including jQuery

Local

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

CDN

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>

h3. jQuery Selectors

| 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") |

h3. jQuery Actions and Methods

| 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\]\]) |