Тема 2. ТЕХНОЛОГІЯ JQUERY.

Селектори jQuery
Селектори в jQuery служать для вибору елементів на веб-сторінці, після
чого методи виконують різні операції з цими вибраними елементами. Код
jQuery, подібно до коду JavaScript, складається з послідовних команд, які є
основною структурною одиницею в jQuery. Синтаксис команд в jQuery
відповідає стандартному структурованому синтаксису:
$(селектор).метод();
1. Знак $ повідомляє, що символи йдуть після нього є jQuery кодом;
2. Селектор дозволяє вибрати елемент на сторінці;
3. Метод задає дію, яку треба зробити над обраним елементом.
Методи в jQuery поділяються на такі групи:
 Методи для маніпулювання DOM;
 Методи для оформлення елементів;
 Методи для створення AJAX запитів;
 Методи для створення ефектів;
 Методи для прив'язки обробників подій.
jQuery можна комбінувати з звичайним JavaScript. Якщо рядок
починається з $ - це jQuery, якщо $ спочатку рядки відсутня - це рядок
JavaScript коду(рис 2.1).

рис 2.1. Комбінування jQuery з звичайним JavaScript

 Деякі бібліотеки JavaScript також використовують символ '$'
для позначення свого коду. Щоб уникнути можливих конфліктів
імен між ними та jQuery, існує функція noConflict(). За допомогою
noConflict() ви маєте можливість змінити символ '$' на будь-який
інший у контексті jQuery (рис.2.2).

рис.2.2. Використання команди noConflict()

Використовуючи селектори, ви можете визначати елементи на сторінці,
до яких хочете застосувати певні операції.
Для вибору елементів вам потрібно передати селектор у функцію $(),
наприклад, $("img:odd"). Цей селектор буде застосований до всього дерева
DOM. Щоб обмежити вибірку елементів, ви можете вказати конкретний
фрагмент DOM за допомогою такого синтаксису: $("img:odd", "div
#slideshow"). Таким чином ви виберете всі парні зображення у блоку з
ідентифікатором slideshow.
Для більш точного вибору елементів, селектори можна комбінувати.
Наприклад, такий селектор допоможе вибрати всі прапорці полів форми, які
були позначені користувачем: $("input[type=checkbox][checked]"). А з
використанням комбінації селекторів $("input:checkbox:checked:enabled")
можна обрати лише активні та позначені прапорці полів форми.
До того ж, можна об'єднувати кілька селекторів в одному виразі,
вказуючи їх через кому, наприклад, $("p, span"). Це дозволить вибрати всі
елементи <p> і <span>
 Нижче розташовується таблиця(таб.2.1) з різними прикладами
використання селекторів для вибору бажаних елементів:
Таблиця 2.1. Використання селекторів
Приклад Результат
$("p") Будуть обрані всі елементи p, які знаходяться на сторінці..
$(".par") Будуть обрані всі елементи на сторінці з class="par".
$("#par") Будуть обрані всі елементи на сторінці з id="par".
$(this) Дозволяє вибрати поточний HTML елемент(рис.2.3).
$("p.par") Будуть обрані всі елементи p на сторінці з class="par".
$("p#par") Будуть обрані всі елементи p на сторінці з id="par".
$(".par,.header,#heat")Будуть обрані всі елементи на сторінці зі значеннями атрибутів
class="par", class="header" и id='heat'.
$("[src]") Будуть обрані всі елементи на сторінці, що мають атрибут src.
$("[src='значення']") Будуть обрані всі елементи зі значенням атрибута src = "значення".
$("[src$='.gif']") Будуть обрані всі елементи зі значеннями атрибута src закінчуються на
.gif.
$("div#wrap .par1") Будуть обрані всі елементи з class = par1, які знаходяться всередині
елементів div з id = wrap.
$(":input") Будуть обрані всі input елементи на сторінці.
$(":тип") Будуть обрані всі input елементи з <input type = 'тип' />. Наприклад:
button вибере все <input type = 'button' /> елементи,: text вибере все
<input type = 'text' /> елементи і т.д.
Більш повна таблиця з різними прикладами використання селекторів для вибору
бажаних елементів наведена в ДОДАТКУ А

Рис. 2.3. Приклад використання селектора this

 Запобігання передчасного виконання коду
У JavaScript, ви, можливо, пам'ятаєте, що виконання коду до
завантаження документа може часто призводити до помилок. Це стається
тому, що скрипт може намагатися отримати доступ до вмісту, який ще не був
завантажений, що завжди спричиняє помилки або непередбачувані
результати. Щоб уникнути цього, ми зазвичай вкладаємо код у функцію, яка
виконується лише після того, як документ повністю завантажено (рис.2.4.).

Рис. 2.4. Запобігання передчасного виконання коду в JavaScript

В jQuery можна позбутися від передчасного виконання коду
наступними способами(рис.2.5.):

Рис. 2.5. Запобігання передчасного виконання коду в jQuery

Існує ще один альтернативний метод, який допомагає уникнути
передчасного виконання JavaScript та jQuery коду і може покращити час
завантаження сторінки.
Цей метод включає розміщення коду в кінці тіла документа (див. рис.
2.6), тобто перед закриттям тега </body>. У такому випадку, інтерпретатор
JavaScript, вбудований у браузер, почне обробляти цей код лише після
завантаження всього документа. Цей підхід відрізняється від попереднього,
коли скрипти завантажуються одночасно з документом і виконуються після
завантаження документа.
 Рис. 2.6. Запобігання передчасного виконання коду в jQuery
Для того, щоб скоротити розмір коду Ви можете поєднувати команди
jQuery в ланцюжки. Команди в ланцюжку будуть виконуватися по черзі зліва
направо(рис.2.7) .

рис.2.7. Модернізація jQuery коду

Завдання 1. Змініть колір і розмір шрифту, перерахованих нижче
елементів, для того, щоб виділити літери кодового слова(рис.2.8).
Змініть колір і розмір шрифту:
 Елемента з id = meadow;
 Елемента з class = rainbow;
 Елемента з id = future знаходиться всередині елемента з id = fut;
(Даний елемент необхідно виділити кольором відмінним від
червоного);
 Елемента має атрибут set;
 Елемента з атрибутом last = code.
Зверніть увагу: для зміни кольору тексту елемента
використовуйте метод: css('color', 'новий_колір_тексту'), для
зміни розміру шрифту використовуйте метод: css('font-
size','размер_шріфта_px').
 Рис. 2.8. Лістинг для завдання №1
Завдання 2. Змініть оформлення елементів відповідно до їх вмісту
<html>
<head>
<script type = "text/javascript" src =
"http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
// Пишіть код тут
});
</script>
</head>
<body>
<p><b> Кожне завдання зазначене цифрою повинно бути виконано за
допомогою однієї jQuery команди.</b></p>
<hr/>
<p><b>1.</b></p>
<p id = "pmtog"> Пофарбуйте мене в зелений колір. </p>
<p><b>2.</b></p>
<H3 class = "pr1"> Мій колір не повинен бути змінений. </H3>
<p class = "pr1"> Пофарбуйте мене в червоний колір.</p>
<p><b>3.</b></p>
<input type = "button" value = "Пофарбуйте мене в помаранчевий"/>
 <br/><br/>
<input type = "text" value = "Мій колір не повинен бути змінений" />
<br/> <br/>
<input type = "submit" value = "Мій колір змінювати не потрібно" />
<br/> <br/>
<p><b>4.</b></p>
<p class = "pmb1"> Пофарбуйте мене в синій. </p>
<p> Мій колір не повинен бути змінений. </p>
<p> Мій колір не повинен бути змінений. </p>
<p class = "pmb2"> Пофарбуйте мене в синій. </p>
<p> Мій колір не повинен бути змінений. </p>
<p class = "pmb3"> Пофарбуйте мене в синій. </p>
<p> <b> 5. </b> </p>
<div id = "wrap1">
<p> Мій колір не повинен бути змінений. </p>
<p class = "pmtobr"> Пофарбуйте мене в коричневий. </p>
</div>
<p class = "pmtobr"> Мій колір не повинен бути змінений. </p>
<p> <b> 6. Відкрийте рамку навколо третього (зліва) зображення.
(Використовуйте команду css ( "borderStyle", "solid") </b> </p>
<img src = "mountimg3.jpg" style = "width: 200px;">
<img src = "mountimg1.jpg" style = "width: 200px;">
<img src = "mountimg2.jpg" style = "width: 200px;">
<p> <b> 7. </b> </p>
<div id = "iwrap">
<input type = "button" value = "Пофарбуйте мене в червоний" />
<br/> <br/>
<input type = "text" value = "Мій колір не повинен бути змінений" />
<br/> <br/>
<input type = "submit" value = "Пофарбуйте мене в червоний" />
</div>
</body>
</html>