Example:

Creates a div element (and all of its contents) dynamically, and appends it to the body element. Internally, an element is created and its innerHTML property set to the given markup. It is therefore both quite flexible and limited.

$("<div><p>Hello</p></div>").appendTo("body")

Example:

Sets the background color of the page to black.

$(document.body).css( "background", "black" );

Example:

Hides all the input elements within a form

$( myForm.elements ).hide()

Example:

Executes the function when the DOM is ready to be used.

$(function(){
  // Document is ready
});

Example:

Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.

jQuery(function($) {
  // Your code using failsafe $ alias here...
});

Example:

Finds all p elements that are children of a div element.

$("div > p")

HTML:

<p>one</p> <div><p>two</p></div> <p>three</p>

Result:

[ <p>two</p> ]

Example:

Searches for all inputs of type radio within the first form in the document

$("input:radio", document.forms[0])

Example:

This finds all div elements within the specified XML document.

$("div", xml.responseXML)

Example:

Compare the above result to the result of <code>$('p')</code>, which would just result in <code><nowiki>[ <p>Hello</p> ]</nowiki></code>. Using add(), matched elements of <code>$('span')</code> are simply added to the returned jQuery-object.

$("p").add("span")

HTML:

(HTML) <p>Hello</p><span>Hello Again</span>

Result:

(jQuery object matching 2 elements) [ <p>Hello</p>, <span>Hello Again</span> ]

Example:

$("p").add("<span>Again</span>")

HTML:

<p>Hello</p>

Result:

[ <p>Hello</p>, <span>Again</span> ]

Example:

$("p").add( document.getElementById("a") )

HTML:

<p>Hello</p><p><span id="a">Hello Again</span></p>

Result:

[ <p>Hello</p>, <span id="a">Hello Again</span> ]

Example:

$("p").add( document.forms[0].elements )

HTML:

<p>Hello</p><p><form><input/><button/></form>

Result:

[ <p>Hello</p>, <input/>, <button/> ]

Example:

$("p").addClass("selected")

HTML:

<p>Hello</p>

Result:

[ <p class="selected">Hello</p> ]

Example:

$("p").addClass("selected highlight")

HTML:

<p>Hello</p>

Result:

[ <p class="selected highlight">Hello</p> ]

Example:

Inserts some HTML after all paragraphs.

$("p").after("<b>Hello</b>");

HTML:

<p>I would like to say: </p>

Result:

<p>I would like to say: </p><b>Hello</b>

Example:

Inserts an Element after all paragraphs.

$("p").after( $("#foo")[0] );

HTML:

<b id="foo">Hello</b><p>I would like to say: </p>

Result:

<p>I would like to say: </p><b id="foo">Hello</b>

Example:

Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.

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

HTML:

<b>Hello</b><p>I would like to say: </p>

Result:

<p>I would like to say: </p><b>Hello</b>

Example:

Load and execute a JavaScript file.

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
})

Example:

Save some data to the server and notify the user once its complete.

$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

Example:

Loads data synchronously. Blocks the browser while the requests is active. It is better to block user interaction by other means when synchronization is necessary.

var html = $.ajax({
 url: "some.php",
 async: false
}).responseText;

Example:

Sends an xml document as data to the server. By setting the processData option to false, the automatic conversion of data to strings is prevented.

var xmlDocument = [create xml document];
$.ajax({
  url: "page.php",
  processData: false,
  data: xmlDocument,
  success: handleResponse
});

Example:

Show a message when an AJAX request completes.

$("#msg").ajaxComplete(function(request, settings){
  $(this).append("<li>Request Complete.</li>");
});

Example:

Show a message when an AJAX request fails.

$("#msg").ajaxError(function(request, settings){
  $(this).append("<li>Error requesting page " + settings.url + "</li>");
});

Example:

Show a message before an AJAX request is sent.

$("#msg").ajaxSend(function(request, settings){
  $(this).append("<li>Starting request at " + settings.url + "</li>");
});

Example:

Sets the defaults for AJAX requests to the url "/xmlhttp/", disables global handlers and uses POST instead of GET. The following AJAX requests then sends some data without having to set anything else.

$.ajaxSetup( {
  url: "/xmlhttp/",
  global: false,
  type: "POST"
} );
$.ajax({ data: myData });

Example:

Show a loading message whenever an AJAX request starts (and none is already active).

$("#loading").ajaxStart(function(){
  $(this).show();
});

Example:

Hide a loading message after all the AJAX requests have stopped.

$("#loading").ajaxStop(function(){
  $(this).hide();
});

Example:

Show a message when an AJAX request completes successfully.

$("#msg").ajaxSuccess(function(request, settings){
  $(this).append("<li>Successful Request!</li>");
});

Example:

Make all AJAX requests timeout after 5 seconds.

$.ajaxTimeout( 5000 );

Example:

$("p").animate({
  height: 'toggle', opacity: 'toggle'
}, "slow");

Example:

$("p").animate({
  left: 50, opacity: 'show'
}, 500);

Example:

An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function (Only 'linear' is provided by default, with jQuery).

$("p").animate({
  opacity: 'show'
}, "slow", "easein");

Example:

Appends some HTML to all paragraphs.

$("p").append("<b>Hello</b>");

HTML:

<p>I would like to say: </p>

Result:

<p>I would like to say: <b>Hello</b></p>

Example:

Appends an Element to all paragraphs.

$("p").append( $("#foo")[0] );

HTML:

<p>I would like to say: </p><b id="foo">Hello</b>

Result:

<p>I would like to say: <b id="foo">Hello</b></p>

Example:

Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

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

HTML:

<p>I would like to say: </p><b>Hello</b>

Result:

<p>I would like to say: <b>Hello</b></p>

Example:

Appends all paragraphs to the element with the ID "foo"

$("p").appendTo("#foo");

HTML:

<p>I would like to say: </p><div id="foo"></div>

Result:

<div id="foo"><p>I would like to say: </p></div>

Example:

Returns the src attribute from the first image in the document.

$("img").attr("src");

HTML:

<img src="test.jpg"/>

Result:

test.jpg

Example:

Sets src and alt attributes to all images.

$("img").attr({ src: "test.jpg", alt: "Test Image" });

HTML:

<img/>

Result:

<img src="test.jpg" alt="Test Image"/>

Example:

Sets src attribute to all images.

$("img").attr("src","test.jpg");

HTML:

<img/>

Result:

<img src="test.jpg"/>

Example:

Sets title attribute from src attribute.

$("img").attr("title", function() { return this.src });

HTML:

<img src="test.jpg" />

Result:

<img src="test.jpg" title="test.jpg" />

Example:

Enumerate title attribute.

$("img").attr("title", function(index) { return this.title + (i + 1); });

HTML:

<img title="pic" /><img title="pic" /><img title="pic" />

Result:

<img title="pic1" /><img title="pic2" /><img title="pic3" />

Example:

Inserts some HTML before all paragraphs.

$("p").before("<b>Hello</b>");

HTML:

<p>I would like to say: </p>

Result:

<b>Hello</b><p>I would like to say: </p>

Example:

Inserts an Element before all paragraphs.

$("p").before( $("#foo")[0] );

HTML:

<p>I would like to say: </p><b id="foo">Hello</b>

Result:

<b id="foo">Hello</b><p>I would like to say: </p>

Example:

Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.

$("p").before( $("b") );

HTML:

<p>I would like to say: </p><b>Hello</b>

Result:

<b>Hello</b><p>I would like to say: </p>

Example:

$("p").bind("click", function(){
  alert( $(this).text() );
});

HTML:

<p>Hello</p>

Result:

alert("Hello")

Example:

Pass some additional data to the event handler.

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

Result:

alert("bar")

Example:

Cancel a default action and prevent it from bubbling by returning false from your function.

$("form").bind("submit", function() { return false; })

Example:

Cancel only the default action by using the preventDefault method.

$("form").bind("submit", function(event){
  event.preventDefault();
});

Example:

Stop only an event from bubbling by using the stopPropagation method.

$("form").bind("submit", function(event){
  event.stopPropagation();
});

Example:

$("p").blur();

HTML:

<p onblur="alert('Hello');">Hello</p>

Result:

alert('Hello');

Example:

$("p").blur( function() { alert("Hello"); } );

HTML:

<p>Hello</p>

Result:

<p onblur="alert('Hello');">Hello</p>

Example:

Returns true if the current useragent is some version of microsoft's internet explorer

$.browser.msie

Example:

Alerts "this is safari!" only for safari browsers

if($.browser.safari) { $( function() { alert("this is safari!"); } ); }

Example:

$("p").change( function() { alert("Hello"); } );

HTML:

<p>Hello</p>

Result:

<p onchange="alert('Hello');">Hello</p>

Example:

Find all children of each div.

$("div").children()

HTML:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Result:

[ <span>Hello Again</span> ]

Example:

Find all children with a class "selected" of each div.

$("div").children(".selected")

HTML:

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

Result:

[ <p class="selected">Hello Again</p> ]

Example:

$("p").click();

HTML:

<p onclick="alert('Hello');">Hello</p>

Result:

alert('Hello');

Example:

$("p").click( function() { alert("Hello"); } );

HTML:

<p>Hello</p>

Result:

<p onclick="alert('Hello');">Hello</p>

Example:

Clones all b elements (and selects the clones) and prepends them to all paragraphs.

$("b").clone().prependTo("p");

HTML:

<b>Hello</b><p>, how are you?</p>

Result:

<b>Hello</b><p><b>Hello</b>, how are you?</p>

Example:

$("p").contains("test")

HTML:

<p>This is just a test.</p><p>So is this</p>

Result:

[ <p>This is just a test.</p> ]

Example:

Retrieves the color style of the first paragraph

$("p").css("color");

HTML:

<p style="color:red;">Test Paragraph.</p>

Result:

"red"

Example:

Retrieves the font-weight style of the first paragraph.

$("p").css("font-weight");

HTML:

<p style="font-weight: bold;">Test Paragraph.</p>

Result:

"bold"

Example:

Sets color and background styles to all p elements.

$("p").css({ color: "red", background: "blue" });

HTML:

<p>Test Paragraph.</p>

Result:

<p style="color:red; background:blue;">Test Paragraph.</p>

Example:

Changes the color of all paragraphs to red

$("p").css("color","red");

HTML:

<p>Test Paragraph.</p>

Result:

<p style="color:red;">Test Paragraph.</p>

Example:

Changes the left of all paragraphs to "30px"

$("p").css("left",30);

HTML:

<p>Test Paragraph.</p>

Result:

<p style="left:30px;">Test Paragraph.</p>

Example:

$("p").dblclick( function() { alert("Hello"); } );

HTML:

<p>Hello</p>

Result:

<p ondblclick="alert('Hello');">Hello</p>

Example:

Iterates over two images and sets their src property

$("img").each(function(i){
  this.src = "test" + i + ".jpg";
});

HTML:

<img/><img/>

Result:

<img src="test0.jpg"/><img src="test1.jpg"/>

Example:

This is an example of iterating over the items in an array, accessing both the current item and its index.

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});

Example:

This is an example of iterating over the properties in an Object, accessing both the current item and its key.

$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

Example:

$("p").empty()

HTML:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

Result:

[ <p></p> ]

Example:

Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.

$("p").find("span").end();

HTML:

<p><span>Hello</span>, how are you?</p>

Result:

[ <p>...</p> ]

Example:

$("p").eq(1)

HTML:

<p>This is just a test.</p><p>So is this</p>

Result:

[ <p>So is this</p> ]

Example:

$("p").error( function() { alert("Hello"); } );

HTML:

<p>Hello</p>

Result:

<p onerror="alert('Hello');">Hello</p>

Example:

Adds two plugin methods.

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck();

Example:

Adds two functions into the jQuery namespace

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

Example:

Merge settings and options, modifying settings

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

Result:

settings == { validate: true, limit: 5, name: "bar" }

Example:

Merge defaults and options, without modifying the defaults

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend({}, defaults, options);

Result:

settings == { validate: true, limit: 5, name: "bar" }

Example:

$("p").fadeIn("slow");

Example:

$("p").fadeIn("slow",function(){
  alert("Animation Done.");
});

Example:

$("p").fadeOut("slow");

Example:

$("p").fadeOut("slow",function(){
  alert("Animation Done.");
});

Example:

$("p").fadeTo("slow", 0.5);

Example:

$("p").fadeTo("slow", 0.5, function(){
  alert("Animation Done.");
});

Example:

Selects all paragraphs and removes those without a class "selected".

$("p").filter(".selected")

HTML:

<p class="selected">Hello</p><p>How are you?</p>

Result:

[ <p class="selected">Hello</p> ]

Example:

Selects all paragraphs and removes those without class "selected" and being the first one.

$("p").filter(".selected, :first")

HTML:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

Result:

[ <p>Hello</p>, <p class="selected">And Again</p> ]

Example:

Remove all elements that have a child ol element

$("p").filter(function(index) {
  return $("ol", this).length == 0;
})

HTML:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

Result:

[ <p>How are you?</p> ]

Example:

Starts with all paragraphs and searches for descendant span elements, same as $("p span")

$("p").find("span");

HTML:

<p><span>Hello</span>, how are you?</p>

Result:

[ <span>Hello</span> ]

Example:

$("p").focus();

HTML:

<p onfocus="alert('Hello');">Hello</p>

Result:

alert('Hello');

Example:

$("p").focus( function() { alert("Hello"); } );

HTML:

<p>Hello</p>

Result:

<p onfocus="alert('Hello');">Hello</p>

Example:

Selects all images in the document and returns the DOM Elements as an Array

$("img").get();

HTML:

<img src="test1.jpg"/> <img src="test2.jpg"/>

Result:

[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]

Example:

Selects all images in the document and returns the first one

$("img").get(0);

HTML:

<img src="test1.jpg"/> <img src="test2.jpg"/>

Result:

<img src="test1.jpg"/>

Example:

$.get("test.cgi");

Example:

$.get("test.cgi", { name: "John", time: "2pm" } );

Example:

$.get("test.cgi", function(data){
  alert("Data Loaded: " + data);
});

Example:

$.get("test.cgi",
  { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }
);

Example:

$.getIfModified("test.html");

Example:

$.getIfModified("test.html", { name: "John", time: "2pm" } );

Example:

$.getIfModified("test.cgi", function(data){
  alert("Data Loaded: " + data);
});

Example:

$.getifModified("test.cgi",
  { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }
);

Example:

$.getJSON("test.js", function(json){
  alert("JSON Data: " + json.users[3].name);
});

Example:

$.getJSON("test.js",
  { name: "John", time: "2pm" },
  function(json){
    alert("JSON Data: " + json.users[3].name);
  }
);

Example:

$.getScript("test.js");

Example:

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

Example:

$.grep( [0,1,2], function(i){
  return i > 0;
});

Result:

[1, 2]

Example:

$("p").gt(0)

HTML:

<p>This is just a test.</p><p>So is this</p>

Result:

[ <p>So is this</p> ]

Example:

$("p").height();

HTML:

<p>This is just a test.</p>

Result:

300

Example:

$("p").height(20);

HTML:

<p>This is just a test.</p>

Result:

<p style="height:20px;">This is just a test.</p>

Example:

$("p").height("20em");

HTML:

<p>This is just a test.</p>

Result:

<p style="height:20em;">This is just a test.</p>

Example:

$("p").hide()

HTML:

<p>Hello</p>

Result:

[ <p style="display: none">Hello</p> ]

Example:

$("p").hide("slow");

Example:

$("p").hide("slow",function(){
  alert("Animation Done.");
});

Example:

$("p").hover(function(){
  $(this).addClass("hover");
},function(){
  $(this).removeClass("hover");
});

Example:

$("div").html();

HTML:

<div><input/></div>

Result:

<input/>

Example:

$("div").html("<b>new stuff</b>");

HTML:

<div><input/></div>

Result:

<div><b>new stuff</b></div>

Example:

Returns the index for the element with ID foobar

$("*").index( $('#foobar')[0] )

HTML:

<div id="foobar"><b></b><span id="foo"></span></div>

Result:

0

Example:

Returns the index for the element with ID foo within another element

$("*").index( $('#foo')[0] )

HTML:

<div id="foobar"><b></b><span id="foo"></span></div>

Result:

2

Example:

Returns -1, as there is no element with ID bar

$("*").index( $('#bar')[0] )

HTML:

<div id="foobar"><b></b><span id="foo"></span></div>

Result:

-1

Example:

Same as $("#foo").after("p")

$("p").insertAfter("#foo");

HTML:

<p>I would like to say: </p><div id="foo">Hello</div>

Result:

<div id="foo">Hello</div><p>I would like to say: </p>

Example:

Same as $("#foo").before("p")

$("p").insertBefore("#foo");

HTML:

<div id="foo">Hello</div><p>I would like to say: </p>

Result:

<p>I would like to say: </p><div id="foo">Hello</div>

Example:

Returns true, because the parent of the input is a form element

$("input[@type='checkbox']").parent().is("form")

HTML:

<form><input type="checkbox" /></form>

Result:

true

Example:

Returns false, because the parent of the input is a p element

$("input[@type='checkbox']").parent().is("form")

HTML:

<form><p><input type="checkbox" /></p></form>

Result:

false

Example:

$("p").keydown( function() { alert("Hello"); } );

HTML:

<p>Hello</p>

Result:

<p onkeydown="alert('Hello');">Hello</p>

Example:

$("p").keypress( function() { alert("Hello"); } );

HTML:

<p>Hello</p>

Result:

<p onkeypress="alert('Hello');">Hello</p>

Example:

$("p").keyup( function() { alert("Hello"); } );

HTML:

<p>Hello</p>

Result:

<p onkeyup="alert('Hello');">Hello</p>

Example:

$("img").length;

HTML:

<img src="test1.jpg"/> <img src="test2.jpg"/>

Result:

2

Example:

$("p").load( function() { alert("Hello"); } );

HTML:

<p>Hello</p>

Result:

<p onload="alert('Hello');">Hello</p>

Example:

$("#feeds").load("feeds.html");

HTML:

<div id="feeds"></div>

Result:

<div id="feeds"><b>45</b> feeds found.</div>

Example:

Same as above, but with an additional parameter and a callback that is executed when the data was loaded.

$("#feeds").load("feeds.html",
  {limit: 25},
  function() { alert("The last 25 entries in the feed have been loaded"); }
);