General JQuery: $(selector).action()
Examples:
$(this).hide() -- hides the current element
$("p").hide() -- hides all <p> elements
$(".test").hide() -- hides all element of class="test"
$("#test").hide() -- hides the element with id="test"
Use a document ready event to delay running of JQuery functions until
the page is fully loaded:
$(document).ready(function() {
//JQuery methods ...
});
Some more selectors
$("*") -- Selects all elements
$("p.intro") -- Selects all <p> elements with class="intro"
$("p:first") -- Selects the first <p> element
$("ul li:first") -- Selects the first <li> element in the first <ul>
$("ul li:first-child") -- Selects the first <li> element of every <ul>
$("a[target!='_blank'") -- Selects all <a> elements with a target attribute NOT equal to "_blank"
$(":button") -- Selects all <button> element and all <input> of type="button"
$("tr:even") -- Selects all even <tr> elements
$("tr:odd") -- Selects all odd <tr> elements
$("h1, p") -- Selects all <h1> and <p> elements (read , as AND)
$("p:first-child") -- Selects all <p> elements where they are the first child element of their parent
$("p:first-of-type") -- Selects all <p> elements that are the first <p> element of their parent
Also available: :last-child, :last-of-type, :nth-child(1), :nth-last-child(2), :nth-of-type(3), :only-child, :only-of-type
$("div p") -- Selects all <p> elements that are a descendant of a <div>
$("div > p") -- Selects all <p> elements that are a direct child of a <div>
$("ul + h3") -- Selects the <h3> next to an <ul>
$("ul ~ h3") -- Selects the <h3> that is a sibling of an <ul>
$("ul li:eq(2)") -- Selects third <li> element (zero based index) of each <ul>
Also available: :gt(2), :lt(2)
$(":header") -- Selects all header elements: <h1>, <h2>, ...
$(":header:not(h1)") -- Selects all non-h1 header elements: <h2>, <h3>, ...
$(":animated") -- Selects all animated elements
$(":focus") -- Selects the element that current has focus
$(":contains(Duck)") -- Selects all elements that current the text Duck (including the body and whole document
$(":div:has(p)") -- Selects all <div> elements that have a <p> element
$(":empty") -- Selects all empty elements
$(":parent") -- Selects all elements that are a parent of another element
$("p:hidden") -- Selects all hidden elements
$("table:visible") -- Selects tables that are visible
$(":root") -- Selects the document's root element
$("p:lang(it)") -- Selects all <p> elements with a language attribute starting with it
$("[id]") -- Selects all elements with an id
$("[id=my-Address]") -- Selects all elements with a particular id
$("p[id!=my-Address]") -- Selects all elements not of a particular id
$("[id$=ess]") -- Selects all elements with id ending in ess
$("[id|=my]") -- Selects all elements with id of my or starting with my-
$("[id^=L]") -- Selects all elements with id starting with L
$("[title~=beautiful]") -- Selects all elements with title attribute containing beautiful
$("[id*=s]") -- Selects all elements with id contaiing s
$(":input") -- Selects all form elements
$(":text") -- Selects all form elements with type=text
Also can use: :password, :radio, :checkbox, :submit, :reset, :button, :image
$(":enabled") -- Selects all enabled form elements
$(":disabled") -- Selects all disabled form elements
$(":selected") -- Selects all selected form elements
$(":checked") -- Selects all checked form elements
Events
Some Common Ones:
click, dblclick, mouseenter, mouseleave, keypress, keydown, keyup, submit, change, focus, blur, load, resize, scroll, unload
Example use:
$("p").click(function() {
// Action here
});
hover() takes two functions: one upon entering, a second upon leaving.
Methods
hide(speed, callback) / show(speed, callback) - optional arguments
toggle() - hide/show toggle (note: when hidden, space is removed, things slide up from below
Many effects possible, including:
fadeIn(), fadeOut(), fadeToggle(), fadeTo()
slidDown(), slideUp(), slideToggle()
Animation
Requires the position of the element to be set to relative, fixed, or absolute.
Animation Example:
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Almost all css properties can be animated, but use camel casing, not dashes:
padding-left becomes paddingLeft
Color requires the Color Animations plugin
Relative movement is possible, e.g., height:'+=150px'
You can also use: show, hide, or toggle such as: opacity:'toggle'
Annimations are executed one after the other (a queue) so you can
cause a series of things to happen
HELLO
stop() can be used to stop an animation in progress
Callbacks
A callback in an animate, fade, or hide can be used to keep something
from happening before the process is finished.
Chaining of multiple methods on one selection, e.g., $("#p1").slideUp(1000).slideDown(1000);
JQuery HTML
text() -- gets text of an element
html() -- gets html of an element
val() -- gets value of an input field
attr() -- get an attribute's value
The same methods can be used to set these values.
These function also have callbacks. Such as:
$("#test1").text(function(i, origText) {
return "Old: " + origText;
});
Attributes can be set:
$("#demo").attr("href", "http://www.win.net");
or for multipile attributes:
$("#demo").attr({
"href" : "http://www.win.net",
"title" : "Win.Net"
});
.attr() can be used with a two parameter callback function in places of the 2nd argument
Content can be added with: append(), prepend(), after(), before()
Or removed: remove() -- element and children, empty() -- remove children
There are some CSS manipulation routines:
addClass(), removeClass(), toggleClass()
css() allows one to get/set style elements, e.g.,
$("p").css("background-color"); -- gets background-color
$("p").css("background-color", "yellow"); -- gets background-color
Or multiple elements can be set using the {attribute1 : value, attribute2: value} approach
Width & Height
width(), height() -- no padding, border, or margin
innerWidth(), innerHeight() -- includes padding
outerWidth(), outerHeight() -- includes padding and border
outerWidth(true), outerHeight(true) -- includes padding, border, and margin
A value can be provided to set the respective values.
Traversing
Traversing Up: parent(), parents(), parentsUntil(). Optional parameter allows you to filter for just certain addributes: .parents("p")
Traversing Down: children() -- direct children, find(). Example:
$("div").find("span").css({"color" : "red", "border" : "2px solid red"});
Traversing Sideways: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()
Other: .first(), .last(), .eq(&lyan index>), .filter(), or .not(). E.g.,
$("p").not(".intro");
AJAX - Asynchornous JavaScript and XML
Examples: $("#div1").load("demo_test.txt"); -- loads file into element
$("#div1").load("demo_test.txt #p1"); -- load p1 within file into element
A callback function can receive text or status
get() and post()
get("test.txt") -- get possibly cached text
post("test.txt") -- get text, never cached
An optional data parameter can specify parameters to the request, a callback function can return status.
NoConflict
$.noConflict() will release the $ function for use by other frameworks.
Then just use JQuery() instead. Or, something shorter, e.g., var jq = $.noConflict().
This: JQuery(document).ready(function($) { ... }); will allows you to temporarily use the $ within the braces