jQuery Tutorial

jQuery is a small 24k (minified) JavaScript library, provides an extremely easy and powerful selectors to select almost anything you want in HTML page. In addition, it also comes with many innovative ways for DOM traversing, event handling (form, browser, mouse ,keyboard), animations effects and Ajax to simplifies the web development. It will definitely change the way you code JavaScript.

Happy learning jQuery. :)

jQuery Quick Start

jQuery simple usage examples.

• jQuery Hello World Example
  A simple jQuery hello world example to show how to download and include the jQuery library into a HTML page.
• Call function in JavaScript and jQuery
  Demonstrate the different way of calling a function in JavaScript and jQuery to create dynamic content after page loaded.
• Load jQuery from Google code
  Example to show how to load the jQuery library from Google and why you should do so.

jQuery Practical Examples

Some jQuery practical usage and examples.

• Table Zebra Stripes effect with jQuery
  Create a table zebra stripes effect with jQuery (Just one line).
• Page loading effects with jQuery
  Create a fade in page loading effect with jQuery.
• Page refresh with jQuery
  Refresh a page with jQuery location.reload();
• Stop a page from exit or unload with jQuery
  Stop a page from exit or unload with jQuery “beforeunload” event.
• Check if an image is loaded with jQuery
  Combine the use of jQuery “load()” and “error()” event to check if an image is loaded or not.
• Check if an element is exists with jQuery
  Example to show how to check if an element exists with jQuery.
• Add / remove CSS class dynamically
  Example to show how to add / remove CSS class dynamically with jQuery.
• Check if an element has a certain CSS class
  Example to show how to check if an element has a certain CSS class with jQuery.
• Load JavaScript library at runtime with jQuery
  Example to show load extrenal JavsScript library ay runtion with jQuery.
• Tooltips example with jQuery
  Example to show how to create a tooltips effect with jQuery.
• Check if jQuery library is loaded
  How to check if jQuery library is loaded.
• Get Delicious bookmark count with jQuery Ajax function
  How to get Delicious bookmark count with jQuery Ajax remote call.
• Highlight table row record on hover
  How to highlight table row record on hover with jQuery.

jQuery Selectors

Select anything you want in jQuery.

• Select CSS class name and id with jQuery
  Select the CSS class name and id with jQuery, $(.classname) and $(#id).
• Universal * selector
  Select all elements, everything.
• Select mutiple elements
  Select the mutiple elements with jQuery.
• Get tag name with jQuery
  Get the tag name with jQuery tagName.
• Get tag value with jQuery
  Get the tag value with jQuery .html().
• Not selector
  select all elements that do not match the selector.
• Empty selector
  select all elements that have no children or text inside.
• Contains selector
  Select all elements that are contains specified text.

jQuery Attribute Selectors

Everything about attribute selectors in jQuery.

• Attribute selectors [ ]
  8 attribute selectors examples to show the use of the attribute selectors with jQuery.

jQuery DOM Traversing

Everything about element traversing in jQuery.

• Child and Sibling Selectors
  Understanding the four type of jQuery child and sibling selectors : Descendant selector (A B), Child selector (A > B), Adjacent sibling selector (A + B) and General sibling selector (A ~ B).
• nth-child selector
  Select all elements that are ntg-child of of their parent.
• First child & Last child selectors
  Select the first child or last child element with jQuery, shorthand for ntg-child.
• Only child selector
  Select all elements that are the only child of their parent.
• Child selector (X > Y)
  select all elements matched by “Y” that are child of a “X” element.
• Descendant selector (X Y)
  Select all elements matched by “Y” that are child, grandchild, great-grandchild, great-great-grandchild..(any levels deep) of a “X” element.
• General sibling selector (X ~ Y)
  Select all elements matched by “Y” that is a sibling of a “X” element.
• Adjacent sibling selector (X + Y)
  Select the immediately follow or next elements matched by “Y” that is a sibling of a “X” element.
• find() selector
  Select certain elements from a set of the matched elements (Descendants only).
• filter() selector
  Select certain elements from a set of the matched elements (All levels).
• Different between filter() and find()
  Example to show the diffreent between filter() and find() in jQuery.
• next() selector
  Select the immediate following sibling element in the set of matched elements
• prev() selector
  Select the immediate preceding sibling element in the set of matched elements
• children() selector
  Select the child of the matched elements, it’s only travels a single level down.
• Difference between find() and children()
  Example to show the difference between find() and children() in jQuery.

jQuery DOM Manipulation

Everything about dom manipulation in jQuery.

• before() and insertBefore() example
  Add a text or html content before the matched elements with jQuery.
• after() and insertAfter() example
  Add a text or html content after the matched elements with jQuery.
• prepend() and prependTo() example
  Add a text or html content before the content of the matched elements with jQuery.
• append() and appendTo() example
  Add a text or html content after the content of the matched elements with jQuery.
• clone() example
  Create a copy of the matched elements with jQuery
• empty() and remove() example
  Remove the matched elements with jQuery.
• html() example
  Get or set the html contents of the matched elements with jQuery.
• text() example
  Get or set the text of the matched elements with jQuery.
• toggleClass example
  Example to show how to use the jQuery’s toggleClass – if matched elements do not have the class name, then add it; if matched elements already have the class name, then remove it.
• wrap() example
  Wrap HTML element around each of the matched elements.

jQuery HTML Form

Everything about HTML form elements in jQuery.

• Form selectors examples
  jQuery selectors for form elements : TextBox, Password, Textarea, Radio Buttons, Check Box, Upload File, Hidden value, Select(dropdown box), Submit button and Reset button.
• Form events examples
  jQuery form events : focus(), blur(), change(), select() and submit().
• Get textbox value
  use val() to get the textbox value with jQuery.
• Add / remove textbox
  Add or remove textbox with jQuery.
• Select a radio button
  Select a radio button with jQuery.
• Set a dropdown box value
  Set a dropdown box value in jQuery.
• Disable submit button after clicked
  Disable submit button after clicked with jQuery.

jQuery Effects

Everything about build-in effects in jQuery.

• fadeIn(), fadeOut() and fadeTo() example
  Demostrate about the jQuery fadeIn(), fadeOut() and fadeTo() effects.
• slideUp(), slideDown() and slideToggle() example
  Demostrate about the jQuery slideUp(), slideDown() and slideToggle() effects.
• show() and hide() example
  Demostrate about the jQuery show() and hide() effects.

jQuery Event Handling

Everything about event handling in jQuery.

• bind() and unbind() example
  How to attach or deattached event handler for the matched elements.
• Trigger other elements event handler
  How to trigger other elements event handler with jQuery.

jQuery Browser Events

Everything about browser events in jQuery.

• Mashable floating effect example with jQuery
  Example to show how to use the browser’s scroll() event to implement the awesome Mashable’s scrolling effect.
• resize() example
  Detect the size of the browser is changed.

jQuery Mouse Events

Everything about mouse events in jQuery.

• click() and dblclick() example
  Detect the mouse single click and double clicks with jQuery.
• mousemove() example
  Detect the mouse move with jQuery.
• Different between mouseover() and mouseenter()
  Example to show the different between mouseover() and mouseenter() in jQuery.
• Different between mouseout() and mouseleave()
  Example to show the different between mouseout() and mouseleave() in jQuery.
• Different between mouseup() and mousedown()
  Example to show the different between mouseup() and mousedown() in jQuery.

jQuery Keyboard Events

Everything about keyboard events in jQuery.

• Keyboard events example
  Keyboard events – keyup(), keydown() and keypress() example.
• Check if an enter key is pressed
  Example to show how to check if an “enter key” is pressed with jQuery keyboard event.
• Detect copy, paste and cut behavior
  How to detect copy, paste and cut behavior with jQuery.

jQuery Common Problem

Some common jQuery problem and solution.

• jQuery $() function is not working?
  Show how to avoid the jQuery conflict issue with jQuery.noConflict() or jQuery().
• Access to restricted URI denied
  Solution to solve the “Access to restricted URI denied” error.

jQuery References

• jQuery API Documentation