Admin at 20:03, 1 September 2011

2011-09-01T20:03:39Z

Admin: Created page with "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 elemen..."

2011-09-01T01:58:05Z

Created page with "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 elemen..."

New page

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

<pre>// 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"
</pre>

@@ Line 10: / Line 10: @@
 * AJAX
 * Utilities
 <pre>// in <head>, to get the jQuery loaded
@@ Line 20: / Line 24: @@
    });
 });
-</script>
+</script></pre>
-// generally, jQuery is suited for selecting an element, and performing an action on it:
+== Selecting Elements ==
 // $(selector).action()
@@ Line 32: / Line 38: @@
 $("#foo")             // all elements with id="foo"
 $(".foo")             // all elements with class="foo"
-$(".foo.bar")         // all elements with class="foo" and class="bar"
+$("p.foo.bar")        // all <p> elements with class="foo" and class="bar"
-$(".foo,.bar")        // all elements with class="foo" or class="bar"
+$("#foo,.bar")        // all elements with id="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
+$(":header")          // all header elements - h1, h2, ...
 $(":animated")        // all animated elements
 $(":contains('foo')") // all elements containing the text "foo"
@@ Line 43: / Line 47: @@
 $("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"
+$("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
@@ Line 49: / Line 53: @@
 $("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

Small jQuery Reference - Revision history

Admin at 20:03, 1 September 2011

Admin: Created page with "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 elemen..."