Основы jQuery. Действия онлайн урок.


Как было отмечено в предыдущем уроке, jQuery позволяет удобно подбирать необходимые объекты при помощи селекторов. Когда доступ к объекту (или объектам) получен, то при помощи специальных методов можно выполнять разнообразные действия по отношению к нему (к ним). Это выглядит следующим образом:

$( selector ) . do-something( params )

Указанный метод естественно может зависеть от параметров. Часто бывает что вызванный метод также возвращает некоторый объект или коллекцию и к ним опять можно применить некоторое действие в виде метода:

$( selector ) . do-something( params ) . do-something-new( params )

Рассмотрим пример:

$('div').hide();


В результате этого действия с веб-страницы будут убраны все элементы <div>. Фактически к ним будет применено стилевое правило display:none. Сравним как это реализуется на JS:

var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}


Очевидно, что синтаксис jQuery является более удобным.

Действия часто принимают в качестве параметров анонимные функции. Например, рассмотрим метод, который определяет сформирована ли окончательно объектная модель документа.

$(document).ready();


Тут использован селектор, который соответствует объекту document объектной модели. Далее вызван методы, который проверяет сформирована ли DOM для дальнейшего использования. Для того, чтоб определить действия после формирования DOM, необходимо задать анонимную функцию как параметр метода ready(). Зададим анонимную функцию, которая при окончании формирования DOM выводит модальное окно с сообщением на экран.



Это важно т.к. распространенной ошибкой является попытка вызова скрипта, который зависит от объектов, которые еще не сформированы.