vvz.nw.ru Примеры к занятиям по JavaScript

<< Применяем методы JQuery

Пример по умолчанию уже введен, так что сначала полюбуйтесь на результат его выполнения. А потом вводите в поле ввода очередную инструкцию, использующую jquery в формате селектор.метод(ы) и нажимайте кнопку "Применить...". Если после очередного шага становится очевидным, что эффекта нет, возможно, что ранее была ошибка JavaScript (из-за погрешностей во введенной инструкции). Придется перезагрузить страницу и начать сначала (ведь для реализации введенного кода применяется известная вам инструкция eval).

В этом документе заданы классы "foo", "orange" и "pink" (их смысл в задании фонового цвета) . Можно попробовать поработать с ними.

Посмотрите исходный код и определите, что ещё задано в CSS и почему тестируемый объект выглядит именно так. Кстати, обязательно попробуйте изменить с помощью jquery описания CSS (цвета, шрифт, размеры, алгоритм позиционирования и т.д. для отдельных элементов или групп элементов). В общем, вспомните CSS! И одновременно отметьте, насколько селекторы CSS синтаксически зеркальны селекторам jquery.

Итак. Введите инструкцию, использующую JQuery:

Объект для экспериментов - элемент div класса "qq"

У этого элемента есть богатое содержимое, дети, потомки...  И, очевидно, для ряда элементов работают соответствующие классы CSS.

Абзацы

1-ый абзац класса "foo"

2-ой абзац класса "foo"

3-ий абзац класса "foo"

А это просто абзац без класса. В нем гиперссылка на Яндекс (но разработчик забыл указать атрибут target="_blank")

Картинка (её ID = "cat")

Assy

Таблица (её ID - myTable):

header1 header2 header3
1 2 3
4 5 6
7 8 9
10 11 12
13 14 15

К каким заданным в документе классам CSS можно обратиться?

Определено лишь три класса, различающиеся фотовым цветом. Попробуйте их применить к избранным элементам.

  • foo
  • orange
  • pink

 



vvz.nw.ru  > JavaScript