www.MichaelTague.com

JQuery Summary and Examples

From w3schools tutorial

Notes and examples with many examples taken from W3Schools.

Disappearing Lines

Hide Text

General JQuery: $(selector).action()

Notes

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

This is a class test