Bootstrap jquery API Reference

`Components`

5 methods

Bootstrap JavaScript 组件的编程式 API。每个组件是 bootstrap 命名空间上的类（如 bootstrap.Modal）。

$(selector, context?) -> jQuery

为 modal 元素创建 Modal 实例。使用 show/hide/toggle 控制。

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

静态方法，返回元素的现有组件实例，或创建新实例。

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)

显示、隐藏或切换组件实例。触发相应的前后事件。

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)

销毁组件实例，移除其 DOM 产物和事件监听器。

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)

更新组件的位置/内容（由 tooltip、popover、dropdown 使用）。

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