Описание:
Принимает строку, содержащую селекторы CSS, которые затем используется для выбора соответствующих элементов набора.
Аргументы
jQuery( селектор, [ контекст ] )
Добавлена в версию: 1.0
селектор
Строка содержащая выражение селектора.
Элемент DOM, документ или jQuery для использования в качестве контекста.
jQuery( элемент )
Добавлена в версию: 1.0
элемент
Элемент DOM для оборачивания в объект jQuery.
jQuery( элементМассива )
Добавлена в версию: 1.0
элементМассива
Массив, содержащий множество элементов DOM, для оборачивания в объект jQuery.
jQuery( объект jQuery )
Добавлена в версию: 1.0
объект jQuery
Существующий объект jQuery для клонирования.
jQuery( )
Добавлена в версию: 1.4
В первой формулировке, перечисленной выше, jQuery() —
который также может быть записана как $() —
осуществляет поиск с помощью DOM для любых элементов, которые соответствуют условию
и создает новый объект jQuery, который ссылается на эти элементы:
$('div.foo');
Селектор контекста
По умолчанию, селекторы выполняют свои поиски в пределах DOM, начиная с корня документа. Однако альтернативный контекст может быть предоставлен для поиска с помощью необязательного второго параметра в функцию $().
Например, если в функции обратного вызова, мы хотим сделать поиск элемента, мы можем ограничить этот поиск:
Поскольку мы ограничили селектор span в контексте this,
только элементы span
в пределах нажатых элементов будут получать дополнительный класс.
Внутренне, выбор селектора осуществляется с помощью метода
.find(),
поэтому $('span', this) эквивалентен $(this).find('span').
Использование элементов DOM
Вторая и третья формулировки этой функции позволяют нам создать объект jQuery
используя элемент DOM или элементы, которые мы уже нашли другим способом.
Совместное использование этого объекта заключается в вызове метода jQuery
на элемент, который был принят в функцию обратного вызова через ключевое слово
this:
Этот пример показывает скрытие элементов путем анимации при их нажатии.
Поскольку обработчик получает нажатый элемент в ключевом слове this как обнаженный элемент DOM,
элемент должен быть завернут в объект jQuery перед тем как мы можем вызвать на него методы jQuery.
Когда данные XML возвращаются с вызова Ajax, мы можем использовать функцию
$(), чтобы упаковать его в объект jQuery, с которым мы можем легко работать. Как только это будет сделано, мы можем вернуть отдельные элементы структуры XML с помощью
.find()
и другими методами обхода DOM.
Клонирование объектов jQuery
Когда объект jQuery передается в качестве параметра функции
$(),
производится клонирование объекта.
Этот новый объект jQuery ссылается на теже элементы DOM
что и первоначальный элемент.
Возврат пустого набора
В jQuery 1.4,
если вы не передаете аргументы в метод jQuery(),
будет возвращен пустой набор jQuery.
В предыдущих версиях jQuery, будет возвращен набор содержащий узел документа.
Примеры
Пример 1
Находит все элементы 'p', которые являются детьми элемента div.<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(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>
Пример 2
Находит все кнопки типа радио внутри первой формы документа.
$("input:radio", document.forms[0]);
Пример 3
Находит все элементы div внутри документа XML из ответа полученного от Ajax.
$("div", xml.responseXML);
Пример 4
Устанавливает цвет фона страницы на черный.$(document.body).css( "background", "black" );
Пример 5
Скрывает все элементы ввода в форме$(myForm.elements).hide()
Описание:
Создает DOM элемента "на лету" из предоставленной строки сырого HTML.
Аргументы
jQuery( html, [ владелецДокумента ] )
Добавлена в версию: 1.0
html
Строка HTML для создания на "лету".
Обратите внимание, что структурный анализ HTML, а не XML.
владелецДокумента
Документ
Документ, в котором будут созданы новые элементы.
jQuery( html, свойства)
Добавлена в версию: 1.4
html
Строка определения одного, автономный элемента HTML (например: <div/> or <div>).
свойства
Атрибуты, События, Методы
Атрибуты, События, и методы для вызова на вновь созданный элемент.
Создание новых элементов
Если строка передается в качестве параметра $(),
jQuery рассматривает строку, чтобы увидеть, если она выглядит как
HTML (например, имеется <tag ... > где-то в строке).
Если нет, то строка интерпретируется как селектор выражения, как описано выше.
Но если в строке представлен фрагмент HTML,
jQuery пытается создать новые элементы DOM как описано в HTML.
Тогда объект jQuery создан и возвращен он относится к этим элементам.
Мы можем выполнять все обычные методы jQuery на этот объект:
$('<p id="test">My <em>new</em> text</p>').appendTo('body');
Когда HTML является более сложным, чем один тег без атрибутов, как в приведенном выше примере, фактическое создание элементов обрабатывается механизмом браузера
innerHTML.
В частности, jQuery создает новый элемент <div>
и устанавливает свойства элемента innerHTML для фрагмента HTML, который был им принят.
Если параметр имеет одиночный тег, например, $('<img />') или $(''),
jQuery
создает элемент используя родную функцию JavaScript createElement().Для обеспечения кросс-платформенной совместимости, фрагмент должен быть хорошо сформированным. Теги, которые могут содержать другие элементы должны быть сопряжены с закрывающим тегом:
$('<a href="http://xhtml.co.il/ru/"></a>');
Кроме того, jQuery позволяет синтакс тегов наподобие XML (с или без пробела до косой черты):
$('<a>');
Теги, которые не могут содержать элементы могут быть сразу закрыты или нет:
$('<img />');
$('<input>');
В jQuery 1.4,
мы можем передать карту свойств второго аргумента.
Этот аргумент принимает расширение свойств, которые могут быть переданы в метод
.attr().
Кроме того, любой
тип события
может быть передан, а также следующие методы jQuery
могут быть вызванны:
val, css,
html,
text,
data,
width,
height, or
offset.
Примеры
Пример 1
Создает элемент div (и все ее содержимое) динамически, и присоединяет его к телу элемента. Внутри, создается элемент и его набор свойств innerHTML для данной разметки. Поэтому оба довольно гибки и ограниченны.$("<div><p>Hello</p></div>").appendTo("body")
Пример 2
Создает некоторые элементы DOM.$("<div/>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }).appendTo("body"); $("<input>", { type: "text", val: "Test", focusin: function() { $(this).addClass("active"); }, focusout: function() { $(this).removeClass("active"); } }).appendTo("form");
Описание: Привязывает функцию, которая будет выполняться, когда DOM завершает загрузку.
Эта функция ведет себя так же, как
$(document).ready(),
поскольку она должна быть использована для обертывания других операций
$()
на вашей странице, которые зависят от готовности DOM.
Хотя эта функция, технически, цепная, там действительно не так много
возможности использования для построения цепочки.Примеры
Пример 1
Выполняет функции, когда DOM готов к использованию.
$(function(){
// Document is ready
});
Пример 2
Используется как ярлык для$(document).ready() и как аргумент,
чтобы написать безотказной код jQuery с помощью псевдонима $, не опираясь на глобальный псевдоним.
jQuery(function($) {
// Your code using failsafe $ alias here...
});
Была ли эта информация полезной?
