• Страница 1 из 1
  • 1
Форум » II. jQuery » Базовое знакомство с jQuery » Выборки jQuery: два принципа (Различия между принципом работы DOM и выборками jQuery)
Выборки jQuery: два принципа
1 Делая выборку элементов с помощью объекта jQuery, вы не получите в итоге традиционного списка узлов объектной модели документа, вы получаете выборку, применимую только в jQuery.

Элементы выборки "не понимают" традиционных методов объектной модели.

В отличие от DOM, jQuery использует два необычных принципа: автоматические циклы и связывание функций.

Изменить / Удалить

2 Автоматические циклы

Задача: выбрать изображения на странице, а затем скрыть их.

Как это происходит, если вы используете объектную модель документа?
Выбрать изображения -> создать цикл -> пройти циклом каждый из выбранных узлов -> произвести какие-то действия с этими узлами.

В библиотеке jQuery есть встроенная функция hide(), которая автоматически создаёт цикл. Например, чтобы скрыть все изображения в блоке с идентификатором slideshow:

Код
$('#slideshow img').hide();


и сколь бы большим не был список получившейся выборки, функция hide() автоматически пройдёт через весь список и скроет каждую картинку.

Изменить / Удалить

3 Связывание функций

Иногда над выбранным элементом нужно произвести не одну, а несколько операций. Например, для элемента div с идентификатором popUp нужно установить его ширину и высоту. Используя JavaScript, нам понадобилось бы две строки кода, jQuery же обходится одной:

Код
$('#popUp').width(300).height(300);


Функции добавляются одна за другой, разделяясь точкой. В этом и состоит принцип связывания.
Можно пойти ещё дальше и для выбранного нами блока добавить текст и его появление на странице:

Код
$('#popUp').width(300).height(300).text('Привет!').fadeIn(3000);


в результате к элементу #popUp применяются уже четыре jQuery-функции: width(), height(), text() и fadeIn().

Одну длинную строку можно разбить на несколько таким образом (главное не забудьте поставить в конце точку с запятой, чтобы интерпретатор JavaScript воспринял всё как единую инструкцию):

Код
$('#popUp').width(300)
.height(300)
.text('Привет!')
.fadeIn(3000);


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

Изменить / Удалить

Форум » II. jQuery » Базовое знакомство с jQuery » Выборки jQuery: два принципа (Различия между принципом работы DOM и выборками jQuery)
  • Страница 1 из 1
  • 1
Поиск: