$ - Двигатель jQuery

Как уже упоминалось ранее, все что мы можем сделать с помоьщью jQuery крутится вокруг объекта/функции $, наиболее часто используемым в качестве селектора CSS:



В этом примере переменная "elements" представляет объект jQuery , который содержит ссылку на элемент с идентификатором moi_id.
Как уже упоминалось ранее строка, которая передается функции должна быть представлять CSS селектор элементов для поиска, будь то один id или элементы связаные между собой одним классом:


Можно указать более одного селектора:



Позже расскажу о возможных комбинациях селекторов CSS искомых с помощью jQuery , но для полноты важно сказать, что в случае исследований с использованием селекторов CSS, вы можете передать функции второй аргумент чтобы указыть на условия, для работы:



Само собой разумеется, $ принимает как первый аргумент и прямые ссылки на DOM элементы:


Создание новых элементов

Именно для соблюдения краткости проекта та же функция $ может быть использована для других целей, которые будут исполнены по-разному функциией в зависимости от передаваемых ей аргументов. Таким образом, вы можете создать новый элемент в DOM, передавая тег:


или даже:


Таким образом мы можем создавать сложные элементы в одной строке кода:


Также у нас будет возможность применять все методы jQuery к новым элементам:


Наконец, чтобы вставить эти элементы внутри страницы, будем использовать, например метод appendTo:


Пример


Запуск функций при загрузке DOM


Очень интересня особенность функции $ это то, что она позволяет передавать в качестве аргумента функции. В данном случае интсрукции будут выполнены при "on DOM ready", то есть когда дерево HTML элементов (страница) полностью загружено:


Этот скрипт отличается от:



так как во втором примере функция запускается, когда весь документ загружен, в том числе файл css стилей и картинки на странице. Событие DOM ready, же, позволяет связать функции с элементами документа с уверенностью, что они будут работать, даже если пользователь запросит их, прежде чем страница будет загружена.

Налдядный пример

← К мануалу jQuery | ← К предыдущей главе | К следующей главе →