Бібліотека JQuery. Продовження (вибір елементів).

Команди jQuery

Код jQuery як і код JavaScript складається з команд, що послідовно йдуть. Команди є основною структурною одиницею jQuery.

Знак $ повідомляє, що символи, що йдуть після нього, є jQuery кодом;

Селектор дозволяє вибрати елемент на сторінці;

Методи маніпулювання DOM;
Методи для оформлення елементів;
Методи для створення AJAX запитів;
Методи для створення ефектів;
Методи для прив'язування обробників подій.

jQuery можна комбінувати зі звичайним JavaScript. Якщо рядок починається з $ - це jQuery, якщо $ спочатку рядка відсутня - це рядок JavaScript коду.

Базові селектори jQuery

Розглянемо основні селектори jQuery, які використовуються для вибірки елементів.

Базові селектори jQuery

Шаблон селектора Опис Приклад

$("*") Вибірка всіх елементів сторінки Наприклад, вираз $("*").css('background-color', 'red ') пофарбує всі елементи сторінки та саму сторінку у червоний колір

$("Element") Вибірка всіх елементів з даним ім'ям тега $("img") вибирає всі елементи img
$("input") вибирає всі елементи input

$("#id") Вибірка елемента з даним значенням атрибуту id $("#btn1") вибирає елемент, у якого значення id дорівнює btn1 (наприклад, <div id="btn1"></div>)

$(".class") Вибірка всіх елементів із даним значенням атрибуту class $(".redStyle") вибирає елементи, у якого значення class дорівнює redStyle (наприклад, <div class="redStyle"></div>)

$("selector1,selector2,selectorN") Вибірка всіх елементів, які відповідають зазначеним селекторам
Наприклад, у нас є такий код:
<div class="apple"></div> <div class="apple"></div> <div class="orange"></div> <div class="banana"></div>
то селектор $(".apple, .orange") вибере елементи, виділені жирним

Приклад 1

Селектори jQuery

Приклад Результат

$("p") Буде вибрано всі елементи p, які знаходяться на сторінці.

$(".par") Буде вибрано всі елементи на сторінці з class="par".

$("#par") Буде вибрано перший елемент на сторінці з id="par".

$(this) Дозволяє вибрати поточний HTML елемент. Клацніть на $(this) ліворуч, щоб переглянути приклад використання цього селектора в онлайн редакторі.

$("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' елементи тощо.

Ієрархічні селектори jQuery

< /tr>

Шаблон селектора Опис Приклад

батьківський селектор > дочірній_селектор Вибірка всіх елементів, які відповідають другому селектору та є дочірніми для елементів першого селектора Наприклад, щоб отримати елемент посилання в попередньому прикладі, ми можемо використовувати селектор $("#menu > a")

селектор1 + селектор2 Вибірка елементів із селектором 'селектор2', які розміщуються безпосередньо за елементами 'селектор1'. Причому обидва елементи повинні бути на одному рівні Наприклад, у нас є наступний блок посилань:
<div id="menu"> <a href="1.html" class="open">1.html</a> <a href="2.html" class="closed">2.html</a> <a href="3.html">3.html</a> <a href="4.html" class="open">4.html</a> <a href="5.html" class="closed">5.html</a> <a href="6.html" class="open">6.html</a> </div>
Тоді селектор $(".closed + .open") вибере ті посилання, які виділені жирним, оскільки ці елементи з атрибутом class="open" йдуть безпосередньо за елементами з атрибутом class="closed".

селектор1 ~ селектор2 Вибірка елементів із селектором 'селектор2', які розміщуються на одному рівні з елементами з селектором 'селектор1'. Наприклад, у нас є наступний блок посилань:
<div id="menu"> <a href="1.html" class="open">1.html</a> <a href="2.html" class="closed">2.html</a> <a href="3.html">3.html</a> <a href="4.html" class="open">4.html</a> <a href="5.html" class="closed">5.html</a> <a href="6.html" class="open">6.html</a> </div>
Тоді селектор $(".closed ~ .open") вибере ті посилання, які виділені жирним, оскільки ці елементи з атрибутом class="open" знаходяться на одному рівні з елементами з атрибутом class="closed".

Селектори атрибутів

Щоб звузити пошук, крім базових та ієрархічних селекторів, розглянутих вище, ми можемо застосовувати селектори атрибутів. В даному випадку jQuery буде повертати елементи в залежності від значень та визначення вказаних атрибутів

Шаблон селектора Опис Приклад

[attr] Вибірка всіх елементів з атрибутом attr Наприклад, вираз $("a[class]") вибере всі елементи посилань, які мають атрибут class

[attr='value'] Вибірка всіх елементів, у яких значення атрибуту attr дорівнює value Наприклад, вираз $("a[class='redStyle ']") вибере всі елементи посилань, які мають атрибут class="redStyle"

[attr^='value'] Вибірка всіх елементів, у яких значення атрибуту attr починається з рядка value Наприклад, вираз $("a[class ^='red']") вибрати елементи посилань, які мають атрибут class="redStyle",оскільки слово 'redStyle' починається на 'red'.

[attr$='value'] Вибірка всіх елементів, у яких значення атрибута attr закінчується на рядок value Наприклад, вираз $("a[class$='Style']") вибрати елементи посилань, які мають атрибут class="redStyle", оскільки слово 'redStyle' закінчується на 'Style'.

[attr~='value'] Вибірка всіх елементів, у яких атрибут attr має список значень, розділених пробілом, і одне з цих значень дорівнює value Наприклад, вираз $("a[class~='redStyle']") вибрати елементи посилань, які можуть мати таке значення атрибуту class="redStyle closed"

[attr*='value']
Вибірка всіх елементів, у яких значення атрибуту attr має підстроку value Наприклад, вираз $( "a[class*='Style']") вибрати елементи посилань, які можуть мати наступне значення атрибуту class="redStyle1"

[attr|='value'] Вибірка всіх елементів, у яких значення атрибуту attr представляє або значення value, або список значень, розділених дефісами, і перше значення в цьому списку дорівнює value Наприклад, вираз $("a[class|='red'" ]") вибрати елементи посилань, які можуть мати наступне значення атрибуту class="red-freeStyle-closed".

Контекст селекторів

Вище ми використовували запис для вибірки елемента: $(селектор). Цей вираз переглядало все дерево DOM на відповідність елемента селектору. Однак ми можемо обмежити пошук, використовуючи контекст пошуку. Контекст є селектором, у якого наждо проводити вибірку елементів.

Приклад 2

Приклад 3

Зміна вмісту:
- html( ) ??Повертає: Рядок Отримує вміст HTML (innerHTML) кожного елемента, що збігся. Це не застосовується до XML документів (але з документами XHTML використовувати можна).
- html( значення ) Повертає: jQuery Додає код HTML для кожного збігу елемента. Це не стосується XML документів (але з документами XHTML використовувати можна).
- text( ) Повертає: Рядок Отримує вміст всіх елементів, що збіглися.
- text( значення ) Повертає: jQuery Вставляє текст у всі елементи, що збіглися.
Вставка всередину:
- append( контент) Повертає: jQuery Додає вміст кожного елемента набору. Контент, що додається, слід за вже існуючим.
- appendTo( селектор ) Повертає: jQuery Додає всі елементи набору до іншого вказаного набору елементів. Додані елементи слідують після вже існуючих. У jQuery версії 1.3.2 ця функція повертає всі вставлені елементи.
- prepend( контент ) Повертає: jQuery Додає вміст кожного елемента набору. Контент, що додається, слід перед уже існуючим.
- prependTo( селектор ) Повертає: jQuery Додає всі елементи набору до іншого вказаного набору елементів. Додані елементи йдуть перед існуючими. У jQueryверсії 1.3.2 ця функція повертає всі вставлені елементи.
Вставка зовні:
- after( контент ) Повертає: jQuery Вставляє вміст після кожного елемента набору.
- before( контент ) Повертає: jQuery Вставляє вміст перед кожним елементом набору.
- insertAfter( селектор ) Повертає: jQuery Вставляє всі елементи набору в інший вказаний набір елементів. Додані елементи слідують після вже існуючих. У jQuery версії 1.3.2 ця функція повертає всі вставлені елементи.
- nsertBefore( селектор ) Повертає: jQuery Вставляє всі елементи набору в інший вказаний набір елементів. Додані елементи йдуть перед існуючими. У jQueryверсії 1.3.2 ця функція повертає всі вставлені елементи.
«Обгортання»:
- wrap( html ) Повертає: jQuery Вставляє кожен збіглий елемент набору у вказану конструкцію HTML коду.
- wrap( елемент ) Повертає: jQuery Вставляє кожен збіглий елемент набору в зазначений елемент.
- wrapAll( html ) Повертає: jQuery Укладає всі елементи в наборі в єдину конструкцію HTML.
- wrapAll( елемент ) Повертає: jQuery Укладає всі елементи набору в єдиний елемент.
- wrapInner( html ) Повертає: jQuery Включає вміст дочірніх об'єктів кожного елемента з набору елементів, що збіглися (включаючи текстові блоки) в конструкцію HTML.
- wrapInner( елемент ) Повертає: jQuery Включає вміст дочірніх об'єктів кожного елемента з набору елементів, що збіглися (включаючи текстові блоки) в елемент DOM.
Заміна:
- replaceWith( контент ) Повертає: jQuery Здійснює заміну всіх елементів набору елементами HTML або DOM. Повертає замінений елемент JQuery, який було видалено з DOM.
- replaceAll( селектор ) Повертає: jQuery Заміщає всі елементи, які відповідають заданому селектору, вказаним елементами. У jQuery версії 1.3.2 цією функцією повертаються всі вставлені елементи.
Видалення:
- empty( ) Повертає: jQuery Видаляє всі дочірні блоки з кожного елемента в наборі елементів, що збіглися. Зверніть увагу, починаючи з версії 1.2.2, ця функція також видаляє всі обробники подій і внутрішні закешовані дані.
- remove( вираз ) Повертає: jQuery Видаляє всі елементи, що збіглися з DOM. Ця функція НЕ видаляє елементи з об'єкта jQuery, дозволяючи Вам скористатися ними пізніше. Зверніть увагу, починаючи з версії 1.2.2, ця функція також видаляє всі обробники подій і внутрішні закешовані дані.
Копіювання:
- clone( ) Повертає: jQuery Клонує відповідні елементи DOM та вибирає клонів.
- clone( bool ) Повертає: jQuery Клонує відповідні елементи DOM, а також всі їх обробники подій, і вибирає клонів.
- ready(fn) повертає: jQuery Призначає функції, які будуть виконуватися щоразу, коли об'єктна модель документа (DOM) готова до використання. Це, напевно, найважливіша функція, включена в розділ «Події», оскільки вона може покращити час реакції веб-додатків, і хороша альтернатива використанню події window.onload, оскільки при використанні цього методу Ваші функції будуть викликані вже в той момент, коли об'єктна модель документа (DOM) готовий до роботи. Тут не слід очікувати, коли сторінку буде повністю завантажено. Аргумент, який передається обробнику події, є посиланням на функцію jQuery. Можна використовувати jQuery або $ без ризику виникнення колізій у просторі імен. Однак необхідно переконатися в тому, що не має обробника події onload, інакше $(document).ready() може не виконатися.

На сторінці можна мати скільки завгодно багато $(document).ready подій. У цьому випадку функції, пов'язані з ними, виконуватимуться в порядку їхнього прямування.

Назад Вперед Зміст

Шаблон селектора	Опис	Приклад
$("*")	Вибірка всіх елементів сторінки	Наприклад, вираз $("*").css('background-color', 'red ') пофарбує всі елементи сторінки та саму сторінку у червоний колір
$("Element")	Вибірка всіх елементів з даним ім'ям тега	$("img") вибирає всі елементи img $("input") вибирає всі елементи input
$("#id")	Вибірка елемента з даним значенням атрибуту id	$("#btn1") вибирає елемент, у якого значення id дорівнює btn1 (наприклад, <div id="btn1"></div>)
$(".class")	Вибірка всіх елементів із даним значенням атрибуту class	$(".redStyle") вибирає елементи, у якого значення class дорівнює redStyle (наприклад, <div class="redStyle"></div>)
$("selector1,selector2,selectorN")	Вибірка всіх елементів, які відповідають зазначеним селекторам	Наприклад, у нас є такий код: <div class="apple"></div> <div class="apple"></div> <div class="orange"></div> <div class="banana"></div> то селектор $(".apple, .orange") вибере елементи, виділені жирним

Приклад	Результат
$("p")	Буде вибрано всі елементи p, які знаходяться на сторінці.
$(".par")	Буде вибрано всі елементи на сторінці з class="par".
$("#par")	Буде вибрано перший елемент на сторінці з id="par".
$(this)	Дозволяє вибрати поточний HTML елемент. Клацніть на $(this) ліворуч, щоб переглянути приклад використання цього селектора в онлайн редакторі.
$("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' елементи тощо.