jQuery is a library of JavaScript Functions.

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

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
 
  $("p").click(function(){
  $(this).hide();
  });

$("button").click(function(){
    $("p").hide();
  });

$("button").click(function(){
$("#test").hide();
});

});
</script>

Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or
reading).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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)

Examples:

$(this).hide() - hides current element

$("p").hide() - hides all paragraphs

$("p.test").hide() - hides all paragraphs with class="test"

$("#test").hide() - hides the element with id="test"

jQuery uses a combination of XPath and CSS selector syntax.

jQuery Selectors

jQuery selectors allow you to select HTML elements (or groups of elements) by element name, attribute name or by
content.

jQuery Element Selectors

jQuery uses CSS selectors to select HTML elements.

$(this) Current HTML element

$("p") selects all <p> elements.

$("p.intro") selects all <p> elements with class="intro".

$(".intro") All elements with class="intro"

$("p#demo") selects the first <p> element with id="demo".

$("ul li:first") The first <li> element of each <ul>

$("[href$='.jpg']") All elements with an href attribute that ends with ".jpg"

$("div#intro .head") All elements with class="head" inside a <div> element with id="intro"

jQuery Attribute Selectors

jQuery uses XPath expressions to select elements with given attributes.

$("[href]") select all elements with an href attribute.

$("[href='#']") select all elements with an href value equal to "#".

$("[href!='#']") select all elements with an href attribute NOT equal to "#".

$("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".

jQuery CSS Selectors

jQuery CSS selectors can be used to change CSS properties for HTML elements.

$("p").css("background-color","yellow");

jQuery Name Conflicts

jQuery uses the $ sign as a shortcut for jQuery.

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

The jQuery noConflict() method specifies a custom name (like jq), instead of using the dollar sign.

<script type="text/javascript">

var jq=jQuery.noConflict();

jq(document).ready(function(){

jq("button").click(function(){

jq("p").hide();

});

});

</script>

jQuery Events

$(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 hide()

<script type="text/javascript">

$(document).ready(function(){

$("p").click(function(){

$(this).hide();

});

$(".ex .hide").click(function(){

$(this).parents(".ex").hide("slow");

});

});

</script>

Note: Pass the function as a parameter to the event

Both hide() and show() can take the two optional parameters: speed and callback.

Syntax:
$(selector).hide(speed,callback)

$(selector).show(speed,callback)

The speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast",
"normal", or milliseconds:

$("button").click(function(){
  $("p").hide(1000);
});

jQuery Toggle

The jQuery toggle() method toggles the visibility of HTML elements using the show() or hide() methods.

Shown elements are hidden and hidden elements are shown.

Syntax:

$(selector).toggle(speed,callback)

The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

$("button").click(function(){
  $("p").toggle();
});

jQuery Slide - slideDown, slideUp, slideToggle

The jQuery slide methods gradually change the height for selected elements.

jQuery has the following slide methods:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

$(".flip").click(function(){
  $(".panel").slideDown();
});

$(".flip").click(function(){
  $(".panel").slideUp()
})

$(".flip").click(function(){
  $(".panel").slideToggle();
});

jQuery Fade - fadeIn, fadeOut, fadeTo

The jQuery fade methods gradually change the opacity for selected elements.
jQuery has the following fade methods:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

The opacity parameter in the fadeTo() method allows fading to a given opacity.

The callback parameter is the name of a function to be executed after the function completes.

$("button").click(function(){
  $("div").fadeTo("slow",0.25);
});

$("button").click(function(){
  $("div").fadeOut(4000);
});

jQuery Custom Animations

The syntax of jQuery's method for making custom animations is:

$(selector).animate({params},[duration],[easing],[callback])

The key parameter is params. It defines the CSS properties that will be animated. Many properties can be animated
at the same time:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

$("button").click(function(){
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });

$("button").click(function(){
    $("div").animate({left:"100px"},"slow");
    $("div").animate({fontSize:"3em"},"slow");
  });

HTML elements are positioned static by default and cannot be moved.

To make elements moveable, set the CSS position property to fixed, relative or absolute.

jQuery Effects

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

jQuery Callback Functions

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

jQuery Callback Functions

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

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. The callback function will not be called until after the animation is
finished.

Typical syntax: $(selector).hide(speed,callback)

The callback parameter is a function to be executed after the hide effect is completed:

$("p").hide(1000,function(){
  alert("The paragraph is now hidden");
});

Without a callback parameter, the alert box is displayed before the hide effect is completed:

$("p").hide(1000);
alert("The paragraph is now hidden");

jQuery HTML Manipulation

Changing HTML Content

$(selector).html(content)

The html() method changes the contents (innerHTML) of matching HTML elements.

$("p").html("W3Schools");

Adding HTML content

$(selector).append(content)

The append() method appends content to the inside of matching HTML elements.
$(selector).prepend(content)

The prepend() method "prepends" content to the inside of  matching HTML elements.

$("p").append(" W3Schools");

$(selector).after(content)

The after() method inserts HTML content after all matching elements.

$(selector).before(content)

The before() method inserts HTML content before all matching elements.

$("p").after(" W3Schools.");

jQuery CSS Manipulation

jQuery css() Method

The css() method has three different syntaxes, to perform different tasks.

 css(name) - Return CSS property value

 css(name,value) - Set CSS property and value
 css({properties}) - Set multiple CSS properties and values

Return CSS Property

Use css(name) to return the specified CSS property value of the FIRST matched element:

$(this).css("background-color");

Set CSS Property and Value

Use css(name,value) to set the specified CSS property for ALL matched elements:

$("p").css("background-color","yellow");

Set Multiple CSS Property/Value Pairs

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery height() and width() Methods

The height() and width() method sets the height and width of all matching elements:

$("#div1").height("200px");

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

jQuery AJAX

jQuery has a rich library of methods (functions) for AJAX development.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind
the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

AJAX and jQuery

With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and
HTTP Post.

Write Less, Do More

$(selector).load(url,data,callback)

Only if you want to send data to the server, you need to use the data parameter. Only if you need to trigger a function
after completion, you will use the callback parameter.

Low Level AJAX

$.ajax(options) is the syntax of the low level AJAX function. Load remote data into an XMLHttpRequest object

$.ajax offers more functionality than higher level functions like load, get, and post, but it is also more difficult to use.

The option parameter takes name|value pairs defining url data, passwords, data types, filters, character sets, timeout
and error functions.