HTML comments are not displayed in the browser, but they can
help document your HTML source code.
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the
end tag.
Note: Comments are not displayed by the browser, but they can help document your HTML source code.
Add Comments
With comments you can place notifications and reminders in your HTML code:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Hide Content
Comments can be used to hide content.
This can be helpful if you hide content temporarily:
Example
<p>This is a paragraph.</p>
<!-- <p>This is another paragraph
</p> -->
<p>This is a paragraph too.</p>
You can also hide more than one line. Everything between the <!-- and the -->
will be hidden from the display.
Example
Hide a section of HTML code:
<p>This is a paragraph.</p> <!-- <p>Look at this cool
image:</p>
<img border="0" src="pic_trulli.jpg"
alt="Trulli"> --> <p>This is a paragraph too.</p>
Comments are also great for debugging HTML, because you can
comment out HTML lines of code, one at a time, to search for errors.
Hide Inline Content
Comments can be used to hide parts in the middle of the HTML code.
Example
Hide a part of a paragraph:
<p>This <!-- great text --> is a paragraph.</p>
jQuery Tutorial
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
Examples in Each Chapter
Our "Try it Yourself" editor makes it easy to learn jQuery. You can edit code and view the result in your browser:
Click on the "Try it Yourself" button to see how it works.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
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.
What is jQuery?
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
Tip: In addition, jQuery has plugins for almost any task out there.
Why jQuery?
There are lots of other JavaScript libraries out there, but jQuery is probably the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:
Google
Microsoft
IBM
Netflix
Will jQuery work in all browsers? The jQuery team knows all about cross-browser issues, and they have written this knowledge into the jQuery library. jQuery will run exactly the same in all major browsers.
jQuery Get Started
Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your web site. You can:
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
Downloading jQuery
There are two versions of jQuery available for downloading:
Production version - this is for your live website because it has been minified and compressed
Development version - this is for testing and development (uncompressed and readable code)
Both versions can be downloaded from .
The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag
(notice that the <script> tag should be inside the <head> section):
One big advantage of using the hosted jQuery from Google:
Many users already have downloaded jQuery from Google when visiting
another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN's will make sure that once a user requests a file from it, it will be served
from the server closest to them, which also leads to faster loading time.
jQuery Syntax
With jQuery you select (query) HTML elements and perform "actions" on them.
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
Are you familiar with CSS selectors?
jQuery uses CSS syntax to select elements. You will learn more about the selector syntax in the next chapter of this tutorial.
Tip: If you don't know CSS, you can read our .
The Document Ready Event
You might have noticed that all jQuery methods in our examples, are inside a document ready event:
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running before the document is finished loading (is ready).
It is good practice to wait for the document to be fully loaded and ready before working with it.
This also allows you to have your JavaScript code before the body of your document, in the head section.
Here are some examples of actions that can fail if methods are run before the document is fully loaded:
Trying to hide an element that is not created yet
Trying to get the size of an image that is not loaded yet
Tip: The jQuery team has also created an even shorter method for the
document ready event:
$(function(){
// jQuery methods go here...
});
Use the syntax you prefer. We think that the document ready event is easier to understand when reading the code.
jQuery selectors are one of the most important parts of the jQuery library.
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:
Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']")
Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button")
Selects all <button> elements and <input> elements of type="button"
$("tr:even")
Selects all even <tr> elements
$("tr:odd")
Selects all odd <tr> elements
Use our jQuery Selector Tester to demonstrate the different selectors.
For a complete reference of all the jQuery selectors, please go to our jQuery Selectors Reference.
Functions In a Separate File
If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file.
When we demonstrate jQuery in this tutorial, the functions are added directly into the <head> section. However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file):
Hide, Show, Toggle, Slide, Fade, and Animate. WOW!
Click to show/hide panel
Because time is valuable, we deliver quick and easy learning.
At W3Schools, you can study everything you need to learn, in an accessible and handy format.
Examples
Demonstrates a simple jQuery hide() method.
Another hide() demonstration. How to hide parts of text.
jQuery hide() and show()
With jQuery, you can hide and show HTML elements with the hide() and show() methods:
Example
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
The optional speed parameter specifies the speed of the hiding/showing, and
can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after
the hide() or show() method completes (you will learn more about callback functions in a
later chapter).
The following example demonstrates the speed parameter with hide():
The jQuery animate() method is used to create custom animations.
Syntax:
$(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties to be animated.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or
milliseconds.
The optional callback parameter is a function to be executed after the
animation completes.
The following example demonstrates a simple use of the animate() method; it moves
a <div> element to the right, until it has reached a left property of 250px:
By default, all HTML elements have a static position, and cannot be moved.
To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!
jQuery animate() - Manipulate Multiple Properties
Notice that multiple properties can be animated at the same time:
Is it possible to manipulate ALL CSS properties with the animate() method?
Yes, almost! However, there is one important thing to remember: all property
names must be camel-cased when used with the animate() method: You will need to
write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
Also, color animation is not included in the core jQuery library.
If you want to animate color, you need to download the
from jQuery.com.
jQuery animate() - Using Relative Values
It is also possible to define relative values (the value is then relative to
the element's current value). This is done by putting += or -= in front of the
value:
By default, jQuery comes with queue functionality for animations.
This means that if you write multiple animate() calls after each other,
jQuery creates an "internal" queue with these method calls. Then it runs the
animate calls ONE by ONE.
So, if you want to perform different animations after each other, we take
advantage of the queue functionality:
The example below first moves the <div> element to the right, and then increases the font size of the text:
Example 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
The jQuery stop() method is used to stop animations or effects before it is finished.
Start sliding
Click to slide down/up the panel
Examples
jQuery stop() sliding Demonstrates the jQuery stop() method.
jQuery stop() animation (with parameters) Demonstrates the jQuery stop() method.
jQuery stop() Method
The jQuery stop() method is used to stop an animation or effect before it is finished.
The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.
Syntax:
$(selector).stop(stopAll,goToEnd);
The optional stopAll parameter specifies whether also the animation queue should be cleared or not. Default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards.
The optional goToEnd parameter specifies whether or not to complete the current animation immediately. Default is false.
So, by default, the stop() method kills the current animation being performed on the selected element.
The following example demonstrates the stop() method, with no parameters:
A callback function is executed after the current effect is 100% finished.
jQuery Callback Functions
JavaScript statements are executed line by line. However, with effects,
the next line of code can be run even though the effect is not finished. This
can create errors.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
Typical syntax: $(selector).hide(speed,callback);
Examples
The example below has a callback parameter that is a function that will be executed after the hide effect is completed:
Example with Callback
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
The example below has no callback parameter, and the alert box will be displayed before the hide effect is completed:
Example without Callback
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
jQuery - Chaining
With jQuery, you can chain together actions/methods.
Chaining allows us to run multiple jQuery methods (on the same
element) within a single statement.
jQuery Method Chaining
Until now we have been writing jQuery statements one at a time (one after the
other).
However, there is a technique called chaining, that
allows us to run multiple jQuery commands, one after the other, on the same
element(s).
Tip: This way, browsers do not have to find the same element(s) more than once.
To chain
an action, you simply append the action to the previous action.
The following example chains together the css(), slideUp(), and slideDown()
methods. The "p1" element first changes to red, then it slides up, and then it
slides down:
We could also have added more method calls if needed.
Tip: When chaining, the line of code
could become quite long. However, jQuery is not very strict on the syntax; you can format it like you want, including line breaks and indentations.
jQuery throws away extra whitespace and executes the lines above as one long line of code.
jQuery - Get Content and Attributes
jQuery contains powerful methods for changing and manipulating HTML elements and attributes.
jQuery DOM Manipulation
One very important part of jQuery is the possibility to manipulate the DOM.
jQuery comes with a bunch of DOM related methods that make it easy to
access and manipulate elements and attributes.
DOM = Document Object Model
The DOM defines a standard for accessing HTML and XML documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update the
content, structure, and style of a document."
Get Content - text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation are:
text() - Sets or returns the text content of selected elements
html() - Sets or returns the content of selected elements (including HTML markup)
val() - Sets or returns the value of form fields
The following example demonstrates how to get content with the jQuery text() and html() methods:
All of the three jQuery methods above: text(), html(),
and val(), also come with a callback function. The callback function has two
parameters: the index of the current element in the list of elements selected
and the original (old) value. You then return the string you wish to use as the
new value from the function.
The following example demonstrates text() and html() with a callback
function:
The jQuery method attr(), also comes with a callback function. The callback function has two
parameters: the index of the current element in the list of elements selected
and the original (old) attribute value. You then return the string you wish to use as the
new attribute value from the function.
The following example demonstrates attr() with a callback
function:
With jQuery, it is easy to add new elements/content.
Add New HTML Content
We will look at four jQuery methods that are used to add new content:
append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements
jQuery append() Method
The jQuery append() method inserts content AT THE END of the selected HTML elements.
Example
$("p").append("Some appended text.");
jQuery prepend() Method
The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.
Example
$("p").prepend("Some prepended text.");
Add Several New Elements With append() and prepend()
In both examples above, we have only inserted some text/HTML at the
beginning/end of the selected HTML elements.
However, both the append() and prepend() methods can take an infinite number of new
elements as parameters. The new elements can be generated with text/HTML (like
we have done in the examples above), with jQuery, or with
JavaScript code and DOM elements.
In the following example, we create several new elements. The elements are
created with text/HTML, jQuery, and JavaScript/DOM. Then we append the new
elements to the text with the append() method (this would have worked for
prepend() too) :
Example
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
jQuery after() and before() Methods
The jQuery after() method inserts content AFTER the selected HTML elements.
The jQuery before() method inserts content BEFORE the selected HTML elements.
Example
$("img").after("Some text after");
$("img").before("Some text before");
Add Several New Elements With after() and before()
Also, both the after() and before() methods can take an infinite number of new
elements as parameters. The new elements can be generated with text/HTML (like
we have done in the example above), with jQuery, or with
JavaScript code and DOM elements.
In the following example, we create several new elements. The elements are
created with text/HTML, jQuery, and JavaScript/DOM. Then we insert the new
elements to the text with the after() method (this would have worked for
before() too) :
Example
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
jQuery - Remove Elements
With jQuery, it is easy to remove existing HTML elements.
Remove Elements/Content
To remove elements and content, there are mainly two jQuery methods:
remove() - Removes the selected element (and its child elements)
empty() - Removes the child elements from the selected element
jQuery remove() Method
The jQuery remove() method removes the selected element(s) and its child
elements.
Example
$("#div1").remove();
jQuery empty() Method
The jQuery empty() method removes the child elements of the selected element(s).
Example
$("#div1").empty();
Filter the Elements to be Removed
The jQuery remove() method also accepts one parameter, which allows you to
filter the elements to be removed.
The parameter can be any of the jQuery selector syntaxes.
The following example removes all <p> elements with class="test":
Example
$("p").remove(".test");
This example removes all <p> elements with class="test" and
class="demo":
Example
$("p").remove(".test, .demo");
jQuery - Get and Set CSS Classes
With jQuery, it is easy to manipulate the style of elements.
jQuery Manipulating CSS
jQuery has several methods for CSS manipulation. We will look at the following methods:
addClass() - Adds one or more classes to the selected elements
removeClass() - Removes one or more classes from the selected elements
toggleClass() - Toggles between adding/removing classes from the selected elements
css() - Sets or returns the style attribute
Example Stylesheet
The following stylesheet will be used for all the examples on this page:
The following example will show how to use the jQuery toggleClass() method. This method toggles between adding/removing classes from the selected elements:
jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.
The image below illustrates an HTML page as a tree (DOM tree). With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM tree.
Illustration explained:
The <div> element is the parent of <ul>, and an ancestor of everything inside of it
The <ul> element is the parent of both <li> elements, and a child of <div>
The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
The <span> element is a child of the left <li> and a descendant of <ul> and <div>
The two <li> elements are siblings (they share the same parent)
The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
The <b> element is a child of the right <li> and a descendant of <ul> and <div>
An ancestor is a parent, grandparent, great-grandparent, and so on. A descendant is a child, grandchild, great-grandchild, and so on. Siblings share the same parent.
Traversing the DOM
jQuery provides a variety of methods that allow us to traverse the DOM.
The largest category of traversal methods are tree-traversal.
The next chapters will show us how to travel up, down and sideways in the DOM tree.
jQuery Traversing Reference
For a complete overview of all jQuery Traversing methods, please go to our jQuery Traversing Reference.
jQuery Traversing - Ancestors
With jQuery you can traverse up the DOM tree to
find ancestors of an element.
An ancestor is a parent, grandparent, great-grandparent, and so
on.
Traversing Up the DOM Tree
Three useful jQuery methods for traversing up the DOM tree are:
parent()
parents()
parentsUntil()
jQuery parent() Method
The parent() method returns the direct parent element of the selected element.
This method only traverse a single level up the DOM tree.
The following example returns the direct parent element of each <span>
elements:
The prev(), prevAll() and prevUntil() methods work just like the methods above but with reverse functionality: they
return previous sibling elements (traverse backwards along sibling
elements in the DOM tree, instead of forward).
jQuery Traversing - Filtering
The first(), last(), eq(), filter() and not() Methods
The most basic filtering methods are first(), last() and eq(), which
allow you to select a specific element based on its position in a group of
elements.
Other filtering methods, like filter() and not() allow you to select elements
that match, or do not match, a certain criteria.
jQuery first() Method
The first() method returns the first element of the specified elements.
The following example selects the first <div>
element:
The eq() method returns an element with a specific index number of the
selected elements.
The index numbers start at 0, so the first element will have the index number
0 and not 1. The following example selects the second <p> element (index number
1):
Example
$(document).ready(function(){ $("p").eq(1); });
jQuery filter() Method
The filter() method lets you specify a criteria. Elements that do not match
the criteria are removed from the selection, and those that match will be
returned.
The following example returns all <p> elements with class name "intro":
AJAX is the art of exchanging data with a server, and updating
parts of a web page - without reloading the whole page.
jQuery AJAX Example
Let jQuery AJAX Change This Text
What is AJAX?
AJAX = Asynchronous JavaScript and XML.
In short; AJAX is about loading data in the background and display it on the
webpage, without reloading the whole page.
Examples of applications using AJAX: Gmail, Google Maps, Youtube, and
Facebook tabs.
You can learn more about AJAX in our .
What About jQuery and AJAX?
jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote
server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your
web page!
Without jQuery, AJAX coding can be a bit tricky!
Writing regular AJAX code can be a bit tricky, because different browsers have different
syntax for AJAX implementation. This means that you will have to write extra code
to test for different browsers. However, the jQuery team has taken care of this
for us, so that we can write AJAX functionality with only one single line of code.
jQuery AJAX Methods
In the next chapters we will look at the most important jQuery AJAX methods.
jQuery - AJAX load() Method
jQuery load() Method
The jQuery load() method is a simple, but powerful AJAX method.
The load() method loads data from a
server and puts the returned data into the selected element.
Syntax:
$(selector).load(URL,data,callback);
The required URL parameter specifies the URL you wish to load.
The optional data parameter specifies a set of querystring key/value pairs to send along with
the request.
The optional callback parameter is the name of a function to be executed
after the load() method is completed.
Here is the content of our example file: "demo_test.txt":
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
The following example loads the content of the file "demo_test.txt" into a
specific <div> element:
Example
$("#div1").load("demo_test.txt");
It is also possible to add a jQuery selector to the URL parameter.
The following example loads the content of the element with id="p1", inside
the file "demo_test.txt", into a specific <div> element:
Example
$("#div1").load("demo_test.txt #p1");
The optional callback parameter specifies a callback function to run when the
load() method is completed. The callback function can have different parameters:
responseTxt - contains the resulting content if the call succeeds
statusTxt - contains the status of the call
xhr - contains the XMLHttpRequest object
The following example displays an alert box after the load() method
completes. If the load() method has succeeded, it displays "External content
loaded successfully!", and if it fails it displays an error message:
For a complete overview of all jQuery AJAX methods, please go to our .
jQuery - AJAX get() and post() Methods
The jQuery get() and post() methods are used to request data from the server
with an HTTP GET
or POST request.
HTTP Request: GET vs. POST
Two commonly used methods for a request-response between a client and server
are: GET and
POST.
GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource
GET is basically used for just getting (retrieving) some data from the server.
Note: The GET method may return cached data.
POST can also be used to get some data from the server. However, the POST
method NEVER caches data, and is often used to send data along with the request.
To learn more about GET and POST, and the differences between the two
methods, please read our chapter.
jQuery $.get() Method
The $.get() method requests data from the server with an HTTP GET request.
Syntax:
$.get(URL,callback);
The required URL parameter specifies the URL you wish to request.
The optional callback parameter is the name of a function to be executed
if the request succeeds.
The following example uses the $.get() method to retrieve data from a file on
the server:
The first parameter of $.get() is the URL we wish to request ("demo_test.asp").
The second
parameter is a callback function. The first callback parameter holds the content of
the page requested, and the second callback parameter holds the status of
the request.
Tip: Here is how the ASP file looks like ("demo_test.asp"):
<%
response.write("This is some text from an external ASP file.")
%>
jQuery $.post() Method
The $.post() method requests data from the server using an HTTP POST request.
Syntax:
$.post(URL,data,callback);
The required URL parameter specifies the URL you wish to request.
The optional data parameter specifies some data to send along with the
request.
The optional callback parameter is the name of a function to be executed
if the request succeeds.
The following example uses the $.post() method to send some data along with the
request:
The first parameter of $.post() is the URL we wish to request ("demo_test_post.asp").
Then we pass in some data to send along with the request (name and city).
The ASP script in "demo_test_post.asp" reads the parameters,
processes them, and returns a result.
The third
parameter is a callback function. The first callback parameter holds the content of
the page requested, and the second callback parameter holds the status of
the request.
Tip: Here is how the ASP file looks like ("demo_test_post.asp"):
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
jQuery AJAX Reference
For a complete overview of all jQuery AJAX methods, please go to our .
jQuery - The noConflict() Method
What if you wish to use other frameworks on your pages,
while still using jQuery?
jQuery and Other JavaScript Frameworks
As you already know; jQuery uses the $ sign as a shortcut for jQuery.
There are many other popular JavaScript frameworks like: Angular, Backbone, Ember, Knockout, and more.
What if other JavaScript frameworks also use the $ sign as a shortcut?
If two different frameworks are using the same shortcut, one of them might stop working.
The jQuery team have already thought about this, and implemented the noConflict() method.
The jQuery noConflict() Method
The noConflict() method releases the hold on the $ shortcut identifier,
so that other scripts can use it.
You can of course still use jQuery, simply by
writing the full name instead of the shortcut:
Example
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});
You can also create your
own shortcut very easily. The noConflict() method returns a reference to jQuery,
that you can save in a variable, for later use. Here is an example:
Example
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
If you have a block of jQuery code which uses the $ shortcut and you do not
want to change it all, you can pass the $ sign in as a parameter to the ready method. This allows
you to access jQuery using $, inside this function - outside of it,
you will have to use "jQuery":
Example
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
jQuery Misc Reference
For a complete overview of all jQuery Misc methods, please go to our
.
jQuery Filters
Use jQuery to filter/search for specific elements.
Filter Tables
Perform a case-insensitive search for items in a table:
Example
Type something in the input field to search the table for first names, last names or emails:
<script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script>
-
Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle() method hides the row (display:none) that does not match the search. We use the toLowerCase() DOM method to convert the text to lower case, which makes the search case insensitive (allows "john", "John", and even "JOHN" on search).
Filter Lists
Perform a case-insensitive search for items in a list:
Example
Type something in the input field to search the list for items:
·First item
·Second item
·Third item
·Fourth
-
Filter Anything
Perform a case-insensitive search for text inside a div element:
jQuery Examples
Do you want to test your jQuery selector skills?
jQuery Selectors
jQuery Events
jQuery Hide/Show
jQuery Fade
jQuery Slide
jQuery Animate
jQuery Stop Animations
jQuery HTML Get Content and Attributes
jQuery HTML Set Content and Attributes
jQuery HTML Add Elements/Content
jQuery HTML Remove Elements/Content
jQuery Get and Set CSS Classes
jQuery css() Method
jQuery Dimensions
jQuery Traversing Ancestors
jQuery Traversing Descendants
jQuery Traversing Siblings
jQuery Traversing Filtering
jQuery Filters
jQuery AJAX load() Method
jQuery AJAX get() and post() Methods
jQuery Editor
With our online jQuery editor, you can edit jQuery code, and view the result in your browser.
Click on the "Try it Yourself" button to see how it works.
Publish Your Code
If you want to save your jQuery code, and create your own website or web application, check out W3Schools Spaces.
W3Schools Spaces is a website-building tool that lets you make and share your own website.
You can change the website's look and how it works by editing the code right in your web browser.
It's easy to use and doesn't require any setup:
The code editor is packed with features to help you achieve more:
Templates: Start from scratch or use a template
Cloud-based: no installations required. You only need your browser
Terminal & Log: debug and troubleshoot your code easily
File Navigator: switch between files inside the code editor
And much more!
Learn More
Learn Faster
Practice is key to mastering coding, and the best way to put your jQuery knowledge into practice is by getting practical with code.
Use W3Schools Spaces to build, test and deploy code.
The code editor lets you write and practice different types of computer languages. It includes HTML/CSS/JavaScript, and you can use it for other languages too.
New languages are added all the time:
Learn More
If you do not know jQuery, we suggest that you read our jQuery Tutorial from scratch.
Build Powerful Websites
You can also use the code editor in W3School Spaces to build frontend or full-stack websites from scratch.
Or you can use the 60+ templates available and save time:
Create your Spaces account today and explore them all!
Learn More
Share It With The World
Host and publish your websites in no time with W3School Spaces.
W3Schools subdomain and SSL certificate are included for free with W3School Spaces. An SSL certificate makes your website safe and secure. It also helps people trust your website and makes it easier to find it online.
Want a custom domain for your website?
You can buy a domain or transfer an existing one and connect it to your space.
jQuery Quiz Test
You can test your jQuery skills with W3Schools' Quiz.
The Test
The test contains 25 questions and there is no time limit.
The test is not official, it's just a nice way to see how much you know, or don't know, about the jQuery library.
Count Your Score
You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 25 points.
Start the Quiz
Good luck!
If you don't know jQuery, we suggest that you read our from scratch.
You can test your jQuery skills with W3Schools' Quiz.
The Test
The test contains 25 questions and there is no time limit.
The test is not official, it's just a nice way to see how much you know, or don't know, about the jQuery library.
Count Your Score
You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 25 points.
Start the Quiz
Good luck!
Start the jQuery Quiz ❯
If you don't know jQuery, we suggest that you read our jQuery Tutorial from scratch.
W3Schools jQuery Certificate
W3Schools offers an Online Certification Program.
The perfect solution for busy professionals who need to balance work, family, and career building.
More than 50 000 certificates already issued!
W3Schools offers an Online Certification Program.
The perfect solution for busy professionals who need to balance work, family, and career building.
More than 50 000 certificates already issued!
Document your skills Improve your career
Study at your own pace Save time and money
Known brand Trusted by top companies
Who Should Consider Getting Certified?
Any student or professional within the digital industry.
Certifications are valuable assets to gain trust and demonstrate knowledge to your clients, current or future employers on a ever increasing competitive market.
W3Schools is Trusted by Top Companies
W3Schools has over two decades of experience with teaching coding online.
Our certificates are recognized and valued by companies looking to employ skilled developers.
Save Time and Money
Show the world your coding skills by getting a certification.
The prices is a small fraction compared to the price of traditional education.
Document and validate your competence by getting certified!
Exam overview
Fee: 95 USD
Number of questions: 70
Requirement to pass: 75% correct answers
Time limit: 70 minutes
Number of attempts to pass: Two
Exam deadline: None
Certification Expiration: None
Format: Online, multiple choice
Advance Faster in Your Career
Getting a certificate proves your commitment to upgrading your skills.
The certificate can be added as credentials to your CV, Resume, LinkedIn profile, and so on.
It gives you the credibility needed for more responsibilities, larger projects, and a higher salary.
Knowledge is power, especially in the current job market.
Documentation of your skills enables you to advance your career or helps you to start a new one.
How Does It Work?
Study for free at W3Schools.com
Study at your own speed
Test your skills with W3Schools online quizzes
Apply for your certificate by paying an exam fee
Take your exam online, at any time, and from any location
Get Your Certificate and Share It With The World
Example certificate:
Each certificate gets a unique link that can be shared with others.
Validate your certification with the link or QR code.
Check how it looks like in this .
Share your certificate on LinkedIn in the Certifications section in just one click!
Document Your Skills
Getting a certificate proves your commitment to upgrade your skills,
gives you the credibility needed for more responsibilities, larger projects, and a higher salary.
Looking to add multiple users?
Are you an educator, manager or business owner looking for courses or certifications?
We are working with schools, companies and organizations from all over the world.
This section contains a complete jQuery reference documentation.
jQuery Reference
The jQuery reference contains a list of all jQuery selectors, methods, properties and events, along with examples.
jQuery Selectors
Use our jQuery Selector Tester to demonstrate the different selectors.
Selector
Example
Selects
*
$("*")
All elements
#id
$("#lastname")
The element with id="lastname"
.class
$(".intro")
All elements with class="intro"
.class,.class
$(".intro,.demo")
All elements with the class "intro" or "demo"
element
$("p")
All <p> elements
el1,el2,el3
$("h1,div,p")
All <h1>, <div> and <p> elements
: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
:first-child
$("p:first-child")
All <p> elements that are the first child of their parent
:first-of-type
$("p:first-of-type")
All <p> elements that are the first <p> element of their parent
:last-child
$("p:last-child")
All <p> elements that are the last child of their parent
:last-of-type
$("p:last-of-type")
All <p> elements that are the last <p> element of their parent
:nth-child(n)
$("p:nth-child(2)")
All <p> elements that are the 2nd child of their parent
:nth-last-child(n)
$("p:nth-last-child(2)")
All <p> elements that are the 2nd child of their parent, counting from the last child
:nth-of-type(n)
$("p:nth-of-type(2)")
All <p> elements that are the 2nd <p> element of their parent
:nth-last-of-type(n)
$("p:nth-last-of-type(2)")
All <p> elements that are the 2nd <p> element of their parent, counting from the last child
:only-child
$("p:only-child")
All <p> elements that are the only child of their parent
:only-of-type
$("p:only-of-type")
All <p> elements that are the only child, of its type, of their parent
parent > child
$("div > p")
All <p> elements that are a direct child of a <div> element
parent descendant
$("div p")
All <p> elements that are descendants of a <div> element
element + next
$("div + p")
The <p> element that are next to each <div> elements
element ~ siblings
$("div ~ p")
All <p> elements that appear after the <div> element
:eq(index)
$("ul li:eq(3)")
The fourth element in a list (index starts at 0)
: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
$(":animated")
All animated elements
:focus
$(":focus")
The element that currently has focus
:contains(text)
$(":contains('Hello')")
All elements which contains the text "Hello"
:has(selector)
$("div:has(p)")
All <div> elements that have a <p> element
:empty
$(":empty")
All elements that are empty
:parent
$(":parent")
jQuery Event Methods
Event methods trigger or attach a function to an event handler for the selected elements.
The following table lists all the jQuery methods used to handle events.
Method / Property
Description
bind()
Deprecated in version 3.0. Use the on() method instead. Attaches event handlers to elements
blur()
Attaches/Triggers the blur event
change()
Attaches/Triggers the change event
click()
Attaches/Triggers the click event
dblclick()
Attaches/Triggers the double click event
delegate()
Deprecated in version 3.0. Use the on() method instead. Attaches a handler to current, or future, specified child elements of the matching elements
die()
Removed in version 1.9. Removes all event handlers added with the live() method
error()
Removed in version 3.0. Attaches/Triggers the error event
event.currentTarget
The current DOM element within the event bubbling phase
event.data
Contains the optional data passed to an event method when the current executing handler is bound
event.delegateTarget
Returns the element where the currently-called jQuery event handler was attached
event.isDefaultPrevented()
Returns whether event.preventDefault() was called for the event object
event.isImmediatePropagationStopped()
Returns whether event.stopImmediatePropagation() was called for the event object
event.isPropagationStopped()
Returns whether event.stopPropagation() was called for the event object
event.namespace
Returns the namespace specified when the event was triggered
event.pageX
Returns the mouse position relative to the left edge of the document
event.pageY
Returns the mouse position relative to the top edge of the document
event.preventDefault()
Prevents the default action of the event
event.relatedTarget
Returns which element being entered or exited on mouse movement
event.result
Contains the last/previous value returned by an event handler triggered by the specified event
event.stopImmediatePropagation()
Prevents other event handlers from being called
event.stopPropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event
event.target
Returns which DOM element triggered the event
event.timeStamp
Returns the number of milliseconds since January 1, 1970, when the event is triggered
event.type
Returns which event type was triggered
event.which
Returns which keyboard key or mouse button was pressed for the event
focus()
Attaches/Triggers the focus event
focusin()
Attaches an event handler to the focusin event
focusout()
Attaches an event handler to the focusout event
hover()
Attaches two event handlers to the hover event
keydown()
Attaches/Triggers the keydown event
keypress()
Attaches/Triggers the keypress event
keyup()
Attaches/Triggers the keyup event
live()
Removed in version 1.9. Adds one or more event handlers to current, or future, selected elements
load()
Removed in version 3.0. Attaches an event handler to the load event
mousedown()
Attaches/Triggers the mousedown event
mouseenter()
Attaches/Triggers the mouseenter event
mouseleave()
Attaches/Triggers the mouseleave event
mousemove()
Attaches/Triggers the mousemove event
mouseout()
Attaches/Triggers the mouseout event
mouseover()
Attaches/Triggers the mouseover event
mouseup()
Attaches/Triggers the mouseup event
off()
Removes event handlers attached with the on() method
on()
Attaches event handlers to elements
one()
Adds one or more event handlers to selected elements. This handler can only be triggered once per element
$.proxy()
Takes an existing function and returns a new one with a particular context
ready()
Specifies a function to execute when the DOM is fully loaded
resize()
Attaches/Triggers the resize event
scroll()
Attaches/Triggers the scroll event
select()
Attaches/Triggers the select event
submit()
Attaches/Triggers the submit event
toggle()
Removed in version 1.9. Attaches two or more functions to toggle between for the click event
trigger()
Triggers all events bound to the selected elements
jQuery Effect Methods
The following table lists all the jQuery methods for creating animation effects.
Method
Description
animate()
Runs a custom animation on the selected elements
clearQueue()
Removes all remaining queued functions from the selected elements
delay()
Sets a delay for all queued functions on the selected elements
dequeue()
Removes the next function from the queue, and then executes the function
fadeIn()
Fades in the selected elements
fadeOut()
Fades out the selected elements
fadeTo()
Fades in/out the selected elements to a given opacity
fadeToggle()
Toggles between the fadeIn() and fadeOut() methods
finish()
Stops, removes and completes all queued animations for the selected elements
hide()
Hides the selected elements
queue()
Shows the queued functions on the selected elements
show()
Shows the selected elements
slideDown()
Slides-down (shows) the selected elements
slideToggle()
Toggles between the slideUp() and slideDown() methods
slideUp()
Slides-up (hides) the selected elements
stop()
Stops the currently running animation for the selected elements
toggle()
Toggles between the hide() and show() methods
jQuery HTML / CSS Methods
The following table lists all the methods used to manipulate the HTML and CSS.
The methods below work for both HTML and XML documents. Exception: the html() method.
Method
Description
addClass()
Adds one or more class names to selected elements
after()
Inserts content after selected elements
append()
Inserts content at the end of selected elements
appendTo()
Inserts HTML elements at the end of selected elements
attr()
Sets or returns attributes/values of selected elements
before()
Inserts content before selected elements
clone()
Makes a copy of selected elements
css()
Sets or returns one or more style properties for selected elements
detach()
Removes selected elements (keeps data and events)
empty()
Removes all child nodes and content from selected elements
hasClass()
Checks if any of the selected elements have a specified class name
height()
Sets or returns the height of selected elements
html()
Sets or returns the content of selected elements
innerHeight()
Returns the height of an element (includes padding, but not border)
innerWidth()
Returns the width of an element (includes padding, but not border)
insertAfter()
Inserts HTML elements after selected elements
insertBefore()
Inserts HTML elements before selected elements
offset()
Sets or returns the offset coordinates for selected elements (relative to the document)
offsetParent()
Returns the first positioned parent element
outerHeight()
Returns the height of an element (includes padding and border)
outerWidth()
Returns the width of an element (includes padding and border)
position()
Returns the position (relative to the parent element) of an element
prepend()
Inserts content at the beginning of selected elements
prependTo()
Inserts HTML elements at the beginning of selected elements
prop()
Sets or returns properties/values of selected elements
remove()
Removes the selected elements (including data and events)
removeAttr()
Removes one or more attributes from selected elements
removeClass()
Removes one or more classes from selected elements
removeProp()
Removes a property set by the prop() method
replaceAll()
Replaces selected elements with new HTML elements
replaceWith()
Replaces selected elements with new content
scrollLeft()
Sets or returns the horizontal scrollbar position of selected elements
scrollTop()
Sets or returns the vertical scrollbar position of selected elements
text()
Sets or returns the text content of selected elements
toggleClass()
Toggles between adding/removing one or more classes from selected elements
unwrap()
Removes the parent element of the selected elements
val()
Sets or returns the value attribute of the selected elements (for form elements)
width()
Sets or returns the width of selected elements
wrap()
Wraps HTML element(s) around each selected element
wrapAll()
Wraps HTML element(s) around all selected elements
wrapInner()
Wraps HTML element(s) around the content of each selected element
jQuery Traversing Methods
Method
Description
add()
Adds elements to the set of matched elements
addBack()
Adds the previous set of elements to the current set
andSelf()
Deprecated in version 1.8. An alias for addBack()
children()
Returns all direct children of the selected element
closest()
Returns the first ancestor of the selected element
contents()
Returns all direct children of the selected element (including text and comment nodes)
each()
Executes a function for each matched element
end()
Ends the most recent filtering operation in the current chain, and return the set of matched elements to its previous state
eq()
Returns an element with a specific index number of the selected elements
filter()
Reduce the set of matched elements to those that match the selector or pass the function's test
find()
Returns descendant elements of the selected element
first()
Returns the first element of the selected elements
has()
Returns all elements that have one or more elements inside of them
is()
Checks the set of matched elements against a selector/element/jQuery object, and return true if at least one of these elements matches the given arguments
last()
Returns the last element of the selected elements
map()
Passes each element in the matched set through a function, producing a new jQuery object containing the return values
next()
Returns the next sibling element of the selected element
nextAll()
Returns all next sibling elements of the selected element
nextUntil()
Returns all next sibling elements between two given arguments
not()
Returns elements that do not match a certain criteria
offsetParent()
Returns the first positioned parent element
parent()
Returns the direct parent element of the selected element
parents()
Returns all ancestor elements of the selected element
parentsUntil()
Returns all ancestor elements between two given arguments
prev()
Returns the previous sibling element of the selected element
prevAll()
Returns all previous sibling elements of the selected element
prevUntil()
Returns all previous sibling elements between two given arguments
siblings()
Returns all sibling elements of the selected element
slice()
Reduces the set of matched elements to a subset specified by a range of indices
jQuery AJAX Methods
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
The following table lists all the jQuery AJAX methods:
Method
Description
$.ajax()
Performs an async AJAX request
$.ajaxPrefilter()
Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax()
$.ajaxSetup()
Sets the default values for future AJAX requests
$.ajaxTransport()
Creates an object that handles the actual transmission of Ajax data
$.get()
Loads data from a server using an AJAX HTTP GET request
$.getJSON()
Loads JSON-encoded data from a server using a HTTP GET request
$.parseJSON()
Deprecated in version 3.0, use JSON.parse() instead. Takes a well-formed JSON string and returns the resulting JavaScript value
$.getScript()
Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request
$.param()
Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests)
$.post()
Loads data from a server using an AJAX HTTP POST request
ajaxComplete()
Specifies a function to run when the AJAX request completes
ajaxError()
Specifies a function to run when the AJAX request completes with an error
ajaxSend()
Specifies a function to run before the AJAX request is sent
ajaxStart()
Specifies a function to run when the first AJAX request begins
ajaxStop()
Specifies a function to run when all AJAX requests have completed
ajaxSuccess()
Specifies a function to run when an AJAX request completes successfully
load()
Loads data from a server and puts the returned data into the selected element
serialize()
Encodes a set of form elements as a string for submission
serializeArray()
Encodes a set of form elements as an array of names and values
jQuery Misc Methods
Method
Description
data()
Attaches data to, or gets data from, selected elements
each()
Execute a function for each matched element
get()
Get the DOM elements matched by the selector
index()
Search for a given element from among the matched elements
$.noConflict()
Release jQuery's control of the $ variable
$.param()
Create a serialized representation of an array or object (can be used as URL query string for AJAX requests)
removeData()
Removes a previously-stored piece of data
size()
Removed in version 3.0. Use the length property instead
toArray()
Retrieve all the DOM elements contained in the jQuery set, as an array
jQuery Properties
Property
Description
context
Removed in version 3.0. Contains the original context passed to jQuery()
jquery
Contains the jQuery version number
jQuery.fx.interval
Change the animation firing rate in milliseconds
jQuery.fx.off
Globally disable/enable all animations
jQuery.support
A collection of properties representing different browser features or bugs (Intended for jQuery's internal use)
length
Contains the number of elements in the jQuery object
