Ядро jQuery - метод jQuery()
Пример
Найти все элементы p, которые являются детьми элемента div, и установить его�性ство рамки:
$("div > p").css("border", "1px solid gray");
Определение и использование
Метод jQuery() принимает строку, содержащую CSS селектор для соответствия элементам набора.
Функция jQuery() имеет три грамматические формы:
Грамматика 1
Принимает строку, содержащую CSS селектор для соответствия элементам набора:
jQuery(selector, [context]
Грамматика 2
Создание DOM элементов с использованием строкового представления оригинального HTML:
jQuery(html,ownerDocument]
Грамматика 3
Привязка функции, которая будет выполнена после загрузки DOM документа:
jQuery( callback )
jQuery( selector, [ context ] )
Этот синтаксис имеет следующие用法:
Использование 1: настройка контекста селектора
Грамматика
jQuery(selector, [context]
По умолчанию, селектор搜索 DOM от корня документа. Однако, можно установить опциональный параметр контекста для $().
Например, если мы хотим найти элемент в callback, можно ограничить поисковую операцию следующим образом:
Пример
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
Поскольку мы уже ограничили селектор span этим контексту this, только span в нажатом элементе получит дополнительный класс.
Внутри среда селектора реализуется через метод .find(), поэтому $("span", this) эквивалентно $(this).find("span").
Все основные функции jQuery реализуются через эту функцию. В jQuery все основано на этой функции,或者说 все используется в той или иной форме этой функции. Основное использование этой функции заключается в передаче ей выражения (обычно составленного из CSS-селекторов), и затем по этому выражению ищутся все соответствующие элементы.
По умолчанию, если не указан параметр контекста, $() ищет DOM-элементы в текущем HTML-документе; если указан параметр контекста, такой как набор DOM-элементов или jQuery-объект, то поиск будет производиться в этом контексте. С jQuery 1.3.2 и более поздних версий, порядок возвращаемых элементов эквивалентен порядку их появления в контексте.
Метод использования 2: использование DOM-элемента
Грамматика
jQuery(element)
Эта функция позволяет нам создавать jQuery-объекты, используя DOM-элементы, найденные другими способами. Обычное использование этой функции заключается в вызове методов jQuery для элементов, переданных через ключевое слово this в callback-функцию:
Пример
$("div.foo".click(function() {
$(this).slideUp();
});
Этот пример использует анимацию скольжения для скрытия элемента при его нажатии. Поскольку обработчик принимает элемент, указанный в ключевом слове this, как чистый DOM-элемент, перед тем как к нему применить методы jQuery, его необходимо обернуть jQuery-объектом.
Эта функция также может принимать XML-документ и объект Window (хотя они не являются DOM-элементами) в качестве эффективных параметров.
Когда XML-данные возвращаются из запроса Ajax, мы можем использовать функцию $() для обертывания данных с помощью jQuery-объекта. После завершения мы можем использовать .find() и другие методы遍вения DOM для получения отдельных элементов структуры XML.
Метод использования 3: клонирование jQuery-объекта
Грамматика
jQuery(jQuery object)
Когда jQuery-объект передается в функцию $() в виде аргумента, создается копия этого объекта. Как и в случае с исходным объектом, новый jQuery-объект ссылается на те же DOM-элементы.
Использование 4: Возврат пустого набора
Грамматика
jQuery()
Для jQuery 1.4 вызов метода jQuery() без параметров возвращает пустой набор jQuery. В более ранних версиях jQuery это возвращает набор, содержащий узел document.
jQuery( html, [ ownerDocument ] )
Этот синтаксис имеет следующие用法:
Использование 1: Создание новых элементов
Грамматика
jQuery(html,ownerDocument]
Вы можете передавать ручную строку HTML, созданную某些 шаблонами или плагинами, или строку, загруженную через AJAX. Но при создании элемента input есть ограничения, см. второй пример.
Конечно, эта строка может содержать слеш (например, адрес изображения) и обратный слеш. При создании одного элемента используйте闭合 теги или формат XHTML. Например, создать span, можно использовать $("<span/>") или $("<span></span>"), но не рекомендуется использовать $("<span>")). В jQuery этот синтаксис эквивалентен $(document.createElement("span"))
Если передавать строку в качестве параметра в $(), jQuery проверяет, является ли строка HTML (например, в строке есть теги). Если нет, то строку интерпретируют как селектор выражение, см.上面的 объяснение. Но если строка является фрагментом HTML, то jQuery пытается создать DOM элементы, описанные этим фрагментом HTML. Затем создает и возвращает jQuery объект, который ссылается на эти DOM элементы:
Пример
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
Если фрагмент HTML сложнее, чем простые теги без атрибутов, как в приведенном выше примере, то фактический процесс создания элементов выполняется механизмом innerHTML браузера. Конкретно, jQuery создает новый элемент <div>, затем устанавливает атрибут innerHTML для传入енного фрагмента HTML. Когда параметр является простым тегом, например $("<img/>") или $("<a></a>"), jQuery создает элемент с помощью вbuilt функции createElement() на JavaScript.
Для обеспечения跨платформенной совместимости структура фрагмента должна быть хорошо структурирована. Теги, которые могут содержать другие элементы, должны出现成对（с закрывающим тегом）：
$("<a href="http://jquery.com"></a>");
Однако jQuery также позволяет использовать синтаксис тегов, аналогичный XML:
$("<a/>");
Теги, которые не могут содержать другие элементы, могут быть закрыты или не закрыты:
$("<img />");
$("<input>");
Использование 2: настройка свойств и событий
Грамматика
jQuery(html,props)
Для jQuery 1.4 можно передавать второму параметру атрибутную карту. Этот параметр принимает супerset свойств, которые можно передать методу .attr(). Кроме того, можно передавать любые типы событий и можно вызывать следующие методы jQuery: val, css, html, text, data, width, height, или offset.
Внимание, Internet Explorer не позволяет создавать элемент input и изменять его тип; вам необходимо использовать, например, "<input type="checkbox" />" для определения типа.
Пример
Создает элемент <input>, устанавливая свойства типа, значения и некоторые события.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
Позволяет связать функцию, которая будет выполнена после загрузки DOM документа.
Эта функция действует так же, как $(document).ready(), но при использовании этой функции все другие операции $() на странице, которые необходимо выполнить после загрузки DOM, должны быть заключены в нее. Хотя технически функция может быть链接а, на самом деле这种情况 не часто встречается.
Пример
Когда DOM загружен, выполняет функции:
$(function(){
// документ готов
});
