Small jQuery Reference

From PaskvilWiki
Revision as of 02:58, 1 September 2011 by Admin (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

This is not intended to be a full blown reference guide, it's just a simple reminder.

The jQuery library contains the following features:

  • HTML element selections
  • HTML element manipulation
  • CSS manipulation
  • HTML event functions
  • JavaScript Effects and animations
  • HTML DOM traversal and modification
  • AJAX
  • Utilities
// in <head>, to get the jQuery loaded
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

// all initialization should be done once the document is fully loaded
<script type="text/javascript">
$(document).ready(function(){
  // whatever
  });
});
</script>

// generally, jQuery is suited for selecting an element, and performing an action on it:
// $(selector).action()

$(this)               // current HTML element
$("*")                // all elements

// CSS selectors - selectors by DOM, id and class
$("p")                // all <p> elements
$("#foo")             // all elements with id="foo"
$(".foo")             // all elements with class="foo"
$(".foo.bar")         // all elements with class="foo" and class="bar"
$(".foo,.bar")        // all elements with class="foo" or class="bar"
$("p#foo")            // all <p> elements with id="foo"
$("p.foo")            // all <p> elements with class="foo"
$("p:first")          // first <p> element
$(":header")          // all header elements
$(":animated")        // all animated elements
$(":contains('foo')") // all elements containing the text "foo"
$(":empty")           // all empty elements (without child nodes)
$("p:hidden")         // all hidden <p> elements
$("table:visible")    // all visible <table> elements
$("ul#foo li:last")   // last <li> element of each <ul> with class="foo"
$("div#foo .bar")     // all elements with class="bar" inside <div> elements with id="foo"
$("tr:even")          // all even <tr> elements; use :odd to get all odd ones
$("ul li:eq(3)")      // fourth <li> element (zero-based index)
$("ul li:gt(3)")      // elements with index greater than 3 (5th and further); opposite of :lt(n)
$("p:not(:empty)")    // all <p> elements that are not empty

// XPath selectors - by attributes
$("[href]")           // all elements with href attribute
$("[href='#']")       // all elements with href value "#"
$("[href!='#']")      // all elements with href value not "#"
$("[href$='.jpg']")   // all elements with href value ending with ".jpg"