Jquery Greatly Simplifies Javascript Programming

jQuery

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

jQuery is easy to learn.With our online editor, you can edit the code, and click on a button to view the result.

Example

<html>
<head>
<script type="text/javascript" src="jquery.js"</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide()
})
})
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>

What You will Learn

In this tutorial you will learn, by text and lots of on-line examples, how to apply JavaScript effects to web pages using jQuery.

jQuery is a lightweight "write less, do more" JavaScript library.

Basically you will learn how to select HTML elements, and how to perform actions on them like hiding, moving and manipulating their content.

What You Should Already Know

Before you start studying jQuery, you should have a basic knowledge of:

HTML
CSS
JavaScript

If you want to study these subjects first, find the tutorials on our Home page.

jQuery Examples

Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.

jQuery References

At W3Schools you will find a complete reference of all jQuery objects and functions.

jQuery Introduction

jQuery can be added to your web pages with a single line of markup

Basic jQuery Example

The following example demonstrates the jQuery hide() function, hiding all <p> elements in an HTML document.

jQuery function: $("p").hide()

jQuery Features

jQuery is a library of JavaScript Functions.

The jQuery library contains the following features:

HTML element selections
HTML event functions
HTML element manipulation
CSS manipulation
JavaScript Effects and animations
HTML DOM traversal and modification
AJAX
Utilities

Adding the jQuery Library to Your Pages

The jQuery library is stored a single JavaScript file, containing all the jQuery functions.

It can be added to a web page with the following mark-up:

Example

Please note that the <script> tag should be inside the page's <head> section.

You can download your own copy of jQuery from the Downloading jQuery page

Library Alternatives

Both Google and Microsoft have good support for jQuery.

If you don't want to store the jQuery library on your own computer, you can load the CDN jQuery core file from Google or Microsoft.

Using Google's CDN

Using Microsoft's CDN

jQuery Syntax

With jQuery you select (query) HTML elements and perform "actions" on them.

jQuery Syntax Examples

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

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

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

jQuery: $(".test").hide()
Demonstrates the jQuery hide() function, 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
An jQuery action() to be performed upon 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 Selectors

Selectors allow you to manipulate HTML elements as a group or as a single element.

jQuery Selection

In the previous chapter we showed some examples of how to select HTML elements.

It is a key point learn how jQuery selects the exact element that you want to apply an effect to.

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

Selectors allow you to manipulate HTML elements as a group or as a single element.

/ In HTML DOM terms:
Selectors allow you to manipulate DOM elements as a group or as a single node.

jQuery Element Selectors

jQuery uses CSS style selectors to select HTML elements.

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

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

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

jQuery Attribute Selectors

jQuery uses XPath style selectors to select elements with given attributes.

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

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

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

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

jQuery CSS Selectors

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

Example

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

Some more examples:

Syntax / Description
$(this) / Current HTML element
$("p") / All <p> elements
$("p.intro") / All <p> elements with class="intro"
$(".intro") / All elements with class="intro"
$("#intro") / The element with id="intro"
$("ul li:first") / The first <li> element of each <ul>
$("[href$='.jpg']") / All elements with attribute href containing ".jpg"
$("div#intro .head") / All elements with class="head"
inside a <div> element with id="intro"

For a full reference please go to our jQuery Selectors Reference

jQuery Events

jQuery is tailor made to handle events.

jQuery Event Functions

The jQuery event handling functions are core functions in jQuery.

Event handling functions are functions that are automatically called when "something happens" in HTML. The term "triggered" (or "fired") by an "event" is often used.

In Your <head>

Since jQuery is tailor made to handle events, it is common to put jQuery code into "event handler" functions in the <head> section of web pages:

Example

<html>
<head>
<script type="text/javascript" src="jquery.js"</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
})
})
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body> </html>

In the example above, a click function is defined to handle the click event for the HTML button:

$("button").click(function() {..some code... } )

The code inside the click function hides all <p> elements:

$("p").hide();

All event functions are defined inside an "event handler" for the document itself:

$(document).ready(function() {..some code ..} )

In a Separate File

If your website has many pages, and you want your jQuery functions to be easy to maintain, you will soon se the benefit of putting your jQuery functions in a separate code file. Our demonstration scripts are included in the <head> section, but it is preferable to place them in a separate file (refer the file with the src attribute):

Example

jQuery Name Conflicts

jQuery uses the $ sign as a shortcut for jQuery.

Some other JavaScript libraries also use the dollar sign for their functions (like Prototype).

jQuery has a method called noConflict() to deal with this.

var jq=jQuery.noConflict(), lets you use your own name (like jq) instead of the dollar sign.

Conclusion

Since jQuery is tailor made to handle HTML events, your code will be more proper and much more easy to maintain if you:

Put all jQuery code inside event handling functions
Put all event handling functions inside the document ready event handler
Put you jQuery code in a separate .js file
Rename the jQuery library if you have name conflicts

jQuery Events

Here are some examples of event functions you can use in jQuery:

Event Function / Binds a Function to
(document).ready(function) / The ready event of a document
(when an HTML document is ready to use)
*
(selector).click(function) / The click event of selected elements
(selector).dblclick(function) / The double click event of selected elements
(selector).focus(function) / The focus event of selected elements
(selector).mouseover(function) / The mouse over event of selected elements

* (selector) jQuery element selector

For a full reference please go to our jQuery Events Reference

jQuery Effects

Hide, Show, Toggle, Slide, Fade, and Animate. WOW!

Examples

jQuery hide()
Demonstrates a simple jQuery hide() function.

jQuery hide()
Another hide() demonstration. How to hide parts of text.

jQuery slideToggle()
Demonstrates a simple slide panel effect.

jQuery fadeTo()
Demonstrates a simple jQuery fadeTo() function.

jQuery animate()
Demonstrates a simple jQuery animate() function.

jQuery Hide and Show

jQuery supports hide and show (HTML elements) with the two functions hide() and show():

Example

$("#hide").click(function(){
$("p").hide()
})
$("#show").click(function(){
$("p").show()
})

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

Syntax:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

The callback parameter is the name of a function to be executed after the hide (or show) function completes. You will learn more about the callback parameter in the next chapter of this tutorial.

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

Example

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

jQuery Toggle

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

Shown elements are hidden, hidden elements are shown.

Syntax:

$(selector).toggle(speed,callback)

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

Example

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

The callback parameter is the name of a function to be executed after the hide (or show) function completes.

jQuery Slide Functions - slideDown, slideUp, slideToggle

jQuery has the following slide functions:

(selector).slideDown(speed,callback)

(selector).slideUp(speed,callback)

(selector).slideToggle(speed,callback)

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

The callback parameter is the name of a function to be executed after the hide (or show) function completes.

slideDown() Example

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

slideUp() Example

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

slideToggle() Example

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

jQuery Fade Functions - fadeIn(), fadeOut(), fadeTo()

jQuery has the following fade functions:

(selector).fadeIn(speed,callback)

(selector).fadeOut(speed,callback)

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

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

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

The callback parameter is the name of a function to be executed after the hide (or show) function completes.

fadeTo() Example

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

fadeOut() Example

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

jQuery Custom Animations

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

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

The key parameter is params. It defines the 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"})

The second parameter is duration. It defines the time used to apply the animation. I takes the values "fast", "slow", "normal", or milliseconds.

Example

jQuery Effects - From This Page

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() / Fadeout selected elements to an opacity
(selector).animation() / Run a custom animation on selected elements

For a full reference please go to our jQuery Effect Reference

jQuery Callback Functions

Animations create the need for a callback function

jQuery Animation Problems

Many jQuery functions involve animations. These functions may take speed or duration as an optional parameter.

Example: $("p").hide("slow")

Speed or duration parameters can take many different values like "slow", "fast", "normal", or milliseconds.

Example

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

Since JavaScript statements (instructions) are executed in a one after each other sequence, statements executed after an animation may create errors or page conflict because the animation is not yet completed.

To avoid this situation Callback Functions are introduced.

jQuery Callback Functions

A callback function is a function that is called after the animations is 100% finished.

Typical syntax:

$(selector).hide(speed,callback)

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

Example WRONG (Without Callback)

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

Example RIGHT (With Callback)

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

Conclusion: If you want statements to be executed after a function involving animation, put these statements inside a callback function.

jQuery HTML Manipulation

jQuery contains very powerful functions for changing and manipulating HTML

Changing HTML Content

(selector).html(content)

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

Example

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

Adding HTML content

(selector).append(content)

The append() function appends content to the inside of matching HTML elements.

(selector).prepend(content)

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

Example

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

(selector).after(content)

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

(selector).before(content)

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

Example

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

jQuery HTML Manipulation - From This Page

Function / Description
(selector).html(content) / Changes the (inner) HTML of selected elements
(selector).append(content) / Appends content to the (inner) HTML of selected elements
(selector).prepend(content) / "Prepends" content to the (inner) HTML of selected elements
(selector).after(content) / Adds HTML after selected elements
(selector).before(content) / Adds HTML before selected elements

(selector) jQuery Element Selector Syntax

For a full reference please go to our jQuery HTML Manipulation Reference

jQuery CSS Functions

jQuery CSS Manipulation

jQuery has 3 important functions for CSS manipulation:

(selector).css(name,value)
(selector).css({properties})
(selector).css(name)

CSS Manipulation Examples

The function css(name,value) sets a value to a given CSS property for all matching elements:

Example

(selector).css(name,value)
$("p").css("background-color","yellow")

The function css({properties}) sets a value to a number of CSS properties (at the same time) for all matching elements:

Example

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

The function css(name) returns the value for a named CSS property:

Example

(selector).css(name)
$(this).css("background-color")

jQuery Size Manipulation

jQuery has 2 important functions for size manipulation.

(selector).height(value)
(selector).width(value)

Size Manipulation Examples

The function height(value) sets the height of all matching elements:

Example

(selector).height(value)
$("#id100").height("200px")

The function width(value) sets the height of all matching elements:

Example

(selector).width(value)
$("#id200").width("300px")

jQuery CSS Functions - From this Page

CSS Properties / Description
(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).css(name) / Get the style property value of the first matched element
(selector).height(value) / Set the height of matched elements
(selector).width(value) / Set the width of matched elements

(selector) Element selector syntax.

For a full reference please go to our jQuery CSS Manipulation Reference

jQuery Reference - Selectors

jQuery Selectors

Selector / Example / Selects
* / $("*") / All elements
#id / $("#lastname") / The element with id=lastname
.class / $(".intro") / All elements with class="intro"
element / $("p") / All <p> elements
.class.class / $(".intro.demo") / All elements with class=intro and class=demo
:first / $("p:first") / The first <p> element
:last / $("p:last") / The last <p> element
:even / $("tr:even") / All even <tr> elements
:odd / $("tr:odd") / All odd <tr> elements
:eq(index) / $("ul li:eq(3)") / The third element in a list
:gt(no) / $("ul li:gt(3)") / List elements with an index greater than 3
:lt(no) / $("ul li:lt(3)") / List elements with an index less than 3
:not(selector) / $("input:not(:empty)") / All input elements that are not empty
:header / $(":header") / All header elements <h1<h2>...
:animated / All animated elements
:contains(text) / $(":contains('W3Schools')") / All elements witch contains the text
:empty / $(":empty") / All elements with no child (elements) nodes
:hidden / $("p:hidden") / All hidden <p> elements
:visible / $("table:visible") / All visible tables
s1,s2,s3 / $("th,td,.intro") / All elements with matching selectors
[attribute] / $("[href]") / All elements with an href attribute
[attribute=value] / $("[href='#']") / All elements with href attribute value="#"
[attribute!=value] / $("[href!='#']") / All elements with href attribute value>"#"
[attribute$=value] / $("[href$='.jpg']") / All elements with href attribute value containing ",jpg"
:input / $(":input") / All <input> elements
:text / $(":text") / All <input> elements with type="text"
:password / $(":password") / All <input> elements with type="password"
:radio / $(":radio") / All <input> elements with type="radio"
:checkbox / $(":checkbox") / All <input> elements with type="checkbox"
:submit / $(":submit") / All <input> elements with type="submit"
:reset / $(":reset") / All <input> elements with type="reset"
:button / $(":button") / All <input> elements with type="button"
:image / $(":img" / All <input> elements with type="img"
:file / $(":file") / All <input> elements with type="file"
:enabled / $(":enabled") / All enabled input elements
:disabled / $(":disabled") / All disabled input elements
:selected / $(":selected") / All selected input elements
:checked / $(":checked") / All checked input elements

jQuery Trigger Functions