jQuery: The Write Less, Do More JavaScript Library

Core/jQuery

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

[edit]

jQuery( expression, [context] )

This function accepts a string containing a CSS selector which is then used to match a set of elements.
The core functionality of jQuery centers around this function. Everything in jQuery is based upon this, or uses this in some way. The most basic use of this function is to pass in an expression (usually consisting of CSS), which then finds all matching elements.

By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document. If you do specify a context, such as a DOM element or jQuery object, the expression will be matched against the contents of that context.

See Selectors for the allowed CSS syntax for expressions.
Arguments:
expressionString
An expression to search with.
context (Optional)Element, jQuery
A DOM Element, Document or jQuery to use as context

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

$("div > p").css("border", "1px solid gray");


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("div > p").css("border", "1px solid gray");
  });
  </script>
  
</head>
<body>
  <p>one</p> <div><p>two</p></div> <p>three</p>
</body>
</html>

Finds all inputs of type radio within the first form in the document.

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

Finds all div elements within an XML document from an AJAX response.

$("div", xml.responseXML);

NameType


[edit]

jQuery( html )

Create DOM elements on-the-fly from the provided String of raw HTML.
You can pass in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $("<span/>") or $("<span></span>") instead of without the closing slash/tag.
Arguments:
htmlString
A string of HTML to create on the fly.

Examples:
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")

Do not create <input>-Elements without a type-attribute, due to Microsofts read/write-once-rule for the type-attribute of <input>-elements, see this official statement for details.

// Does NOT work in IE:
$("<input/>").attr("type", "checkbox");
// Does work in IE:
$("<input type='checkbox'/>");

NameType


[edit]

jQuery( elements )

Wrap jQuery functionality around a single or multiple DOM Element(s).
This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements).
Arguments:
elementsElement, Array<Element>
DOM element(s) to be encapsulated by a jQuery object.

Examples:
Sets the background color of the page to black.

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

Hides all the input elements within a form.

$(myForm.elements).hide()

NameType


[edit]

jQuery( callback )

A shorthand for $(document).ready().
Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it.

You can have as many $(document).ready events on your page as you like.

See ready(Function) for details about the ready event.
Arguments:
callbackFunction
The function to execute when the DOM is ready.

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

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

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...
});

NameType


Retrieved from "http://docs.jquery.com/Core/jQuery"