JQuery

jQuery is a JavaScript Library.

jQuery Syntax Examples

$(this).hide()  Demonstrates the jQuery hide() method, hiding the current HTML element.

$("#test").hide() Demonstrates the jQuery hide() method, hiding the element with id="test".

$("p").hide()  Demonstrates the jQuery hide() method, hiding all <p> elements.

$(".test").hide() Demonstrates the jQuery hide() method, hiding all elements with class="test".

 

jQuery Syntax
The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).

 

Basic syntax is: $(selector).action()

•A dollar sign to define jQuery
•A (selector) to "query (or find)" HTML elements
•A jQuery action() to be performed on the element(s)

 

Syntax Description
$(this) Selects the current HTML element
$("p#intro:first") Selects the first <p> element with id="intro"
$(".intro") Selects all elements with class="intro"
$("#intro") Selects the first element with id="intro"
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("[href$='.jpg']") Selects all elements with an href attribute that ends with ".jpg"
$("[href='#']") Selects all elements with an href value equal to "#"
$("[href!='#']") Selects all elements with an href value NOT equal to "#"
$("div#intro .head") Selects all elements with class="head" inside a <div> element with id="intro"

 

jQuery Name Conflicts
jQuery uses the $ sign as a shortcut for jQuery.

Some other JavaScript libraries also use the dollar sign for their functions.

 

Event Method Description
$(document).ready(function)   Binds a function to the ready event of a document
(when the document is finished loading)
$(selector).click(function) Triggers, or binds a function to the click event of selected elements
$(selector).dblclick(function) Triggers, or binds a function to the double click event of selected elements
$(selector).focus(function) Triggers, or binds a function to the focus event of selected elements
$(selector).mouseover(function) Triggers, or binds a function to the mouseover event of selected elements

 

jQuery Effects
Here are some examples of effect functions in jQuery:

Function Description
$(selector).hide() Hide selected elements
$(selector).show() Show selected elements
$(selector).toggle() Toggle (between hide and show) selected elements
$(selector).slideDown() Slide-down (show) selected elements
$(selector).slideUp() Slide-up (hide) selected elements
$(selector).slideToggle() Toggle slide-up and slide-down of selected elements
$(selector).fadeIn() Fade in selected elements
$(selector).fadeOut() Fade out selected elements
$(selector).fadeTo() Fade out selected elements to a given opacity
$(selector).animate() Run a custom animation on selected elements

A callback function is executed after the current animation is 100% finished.

--------------------------------------------------------------------------------

jQuery Callback Functions
JavaScript statements are executed line by line. However, with animations, the next line of code can be run even though the animation is not finished. This can create errors.

To prevent this, you can create a callback function.

A callback function is executed after the current animation (effect) is finished.

$("#div2").width("300px");

jQuery CSS Methods From this Page:

CSS Properties Description
$(selector).css(name) Get the style property value of the first matched element
$(selector).css(name,value) Set the value of one style property for matched elements
$(selector).css({properties}) Set multiple style properties for matched elements
$(selector).height(value) Set the height of matched elements
$(selector).width(value) Set the width of matched elements

jQuery AJAX Methods From This Page:

Request Description
$(selector).load(url,data,callback) Load remote data into selected elements
$.ajax(options) Load remote data into an XMLHttpRequest object