jQuery jquery API Reference

`Core`

5 methods

The jQuery function and utilities for selecting elements and chaining operations.

$(selector, context?) -> jQuery

Selects DOM elements matching a CSS selector and wraps them in a jQuery object.

Parameters

Name	Type	Description
selector	string	CSS selector.
context	Element \| jQuery	Optional root to search within.

Returns

jQuery

Example

jquery

$('li.item').each(function (i, el) {
  console.log(i, el.textContent);
});

$(element) / $(htmlString) -> jQuery

Wraps an existing DOM element or creates new elements from an HTML string.

Parameters

Name	Type	Description
element	Element \| string	DOM element or HTML string.

Returns

jQuery

Example

jquery

const $el = $('<div class="x">hi</div>');
$('body').append($el);

$.each(arrayOrObject, callback)

Generic iterator over arrays or objects. Return false from the callback to stop.

Parameters

Name	Type	Description
arrayOrObject	Array \| object	Collection to iterate.
callback	(index, value) => boolean \| void	Function called per item.

Returns

Array | object

Example

jquery

$.each([10, 20, 30], function (i, v) {
  console.log(i, v);
});

$.extend(deep?, target, ...objects)

Merges the contents of two or more objects into the first object.

Parameters

Name	Type	Description
deep	boolean	Optional; if true, merge recursively.
target	object	Object to merge into.
objects	object	Additional objects to merge.

Returns

object

Example

jquery

const merged = $.extend({}, { a: 1 }, { b: 2 });
// { a: 1, b: 2 }

$(callback)

Runs a function after the DOM is fully parsed and ready (shorthand for $(document).ready).

Parameters

Name	Type	Description
callback	() => void	Function to run on DOM ready.

Returns

jQuery

Example

jquery

$(function () {
  console.log('DOM is ready');
});

`AJAX`

4 methods

jQuery AJAX helpers for making HTTP requests and handling responses.

$.ajax(url, settings?) -> jqXHR

Performs an asynchronous HTTP request. Returns a Promise-like jqXHR object.

Parameters

Name	Type	Description
url	string	Request URL.
settings	object	Optional: method, data, headers, success/error.

Returns

jqXHR (Promise)

Example

jquery

$.ajax('/api/users', { method: 'GET' })
  .done(function (data) { console.log(data); })
  .fail(function (err) { console.error(err); });

$.get(url, data?, success?, dataType?) -> jqXHR

Shorthand for an HTTP GET request.

Parameters

Name	Type	Description
url	string	Request URL.
data	object \| string	Optional query params.
success	(data, textStatus, jqXHR) => void	Optional success callback.

Returns

jqXHR (Promise)

Example

jquery

$.get('/api/users/1', function (user) {
  console.log(user);
});

$.post(url, data?, success?, dataType?) -> jqXHR

Shorthand for an HTTP POST request.

Parameters

Name	Type	Description
url	string	Request URL.
data	object \| string	Optional request body.

Returns

jqXHR (Promise)

Example

jquery

$.post('/api/users', { name: 'Sam' })
  .done(function (u) { console.log(u); });

$.getJSON(url, data?, success?) -> jqXHR

Loads JSON-encoded data from the server using a GET HTTP request.

Returns

jqXHR (Promise)

Example

jquery

$.getJSON('/api/users', function (users) {
  console.log(users.length);
});

`DOM`

5 methods

jQuery DOM manipulation, traversal, and event methods.

.html(htmlString?) -> string | jQuery

Gets the HTML contents of the first element, or sets the HTML of every matched element.

Parameters

Name	Type	Description
htmlString	string	Optional HTML to set.

Returns

string | jQuery

Example

jquery

$('#box').html('<b>hi</b>');
const html = $('#box').html();

.text(text?) -> string | jQuery

Gets or sets the combined text contents of matched elements.

Returns

string | jQuery

Example

jquery

$('#box').text('Hello');
const t = $('#box').text();

.on(events, handler) -> jQuery

Attaches an event handler for one or more events to the selected elements.

Parameters

Name	Type	Description
events	string	Space-separated event names, e.g. 'click change'.
handler	(eventObject) => false \| void	Handler function.

Returns

jQuery

Example

jquery

$('button').on('click', function (e) {
  console.log('clicked', e.target);
});

.find(selector) -> jQuery

Gets the descendants of each element filtered by a selector.

Returns

jQuery

Example

jquery

$('ul').find('li.active').each(function () {
  console.log(this);
});

.css(propertyName, value?) -> string | jQuery

Gets or sets CSS properties for matched elements.

Parameters

Name	Type	Description
propertyName	string \| object	CSS property name or object of property/value pairs.
value	string \| number	Optional value to set.

Returns

string | jQuery

Example

jquery

$('#box').css('color', 'red');
$('#box').css({ background: '#eee', padding: '8px' });

All references