Вибрати той чи інший елемент через JQuery дуже просто. Розглянемо кілька найбільш затребуваних випадків:
Це досить просто - використовується знак $.
Тобто $ ( 'Вибрані елементи'). Для того, щоб вибрати всі div'и на цій сторінці, доведеться прописати $ ( 'div').
$ ( "# Header") - отримання елемента з id = "header"
$ ( "H3") - отримати все
елементи
$ ( "Div # content .photo") - отримати всі елементи з класом = "photo" які знаходяться в елементі div з id = "content"
$ ( "Ul li") - отримати все
- з списку
$ ( 'Div p # something a') // вибирає все посилання з параграфа з id 'something' і з батьком div.Вибір елементів по ID
$ ( '# MyId'); // ID повинні бути унікальними на сторінці
Вибір елементів на ім'я класу
$ ( 'Div.myClass'); // продуктивність буде вище, якщо вказати ще тип елемента
Вибір елементів по атрибутам
$ ( 'Input [name = first_name]'); // майте на увазі, що ця вибірка може бути довгою
$ ( '# Contents ul.people li'); // Вибір елементів за допомогою складеного селектораПсевдо-селектори
$ ( 'A.external: first');
$ ( 'Tr: odd');
$ ( '# MyForm: input'); // вибрати все input-и в формі
$ ( 'Div: visible');
$ ( 'Div: gt (2)'); // всі, крім перших трьох div-ів
$ ( 'Div: animated'); // всі анімовані div-иВибір селектор по атрибутам
Вибірки по атрибутам варто використовувати тільки в крайньому випадку, оскільки вони можуть виконуватися дуже довго. По можливості робіть вибірки по ID, імені класу чи імені тега.
// знаходить все елементи типу , у яких атрибут rel закінчується на "thinger"
$ ( "A [rel $ = 'thinger']");Як дізнатися не порожня чи вибірка?
Треба перевірити властивість length, яке показує скільки елементів було обрано.
if ($ ( 'div.foo'). length) // приклад умови на непорожню вибіркузбереження вибірки
Вибірку можна зберегти в змінну.
var $ divs = $ ( 'div');Іноді вибірка містить більше елементів, ніж вам реально потрібно. В такому jQuery надає вам кілька методів для уточнення вашої вибірки.
// приклади уточнення вибірки
$ ( 'Div.foo'). Has ( 'p'); // елементи div.foo, в яких містяться елементи
$ ( 'H1'). Not ( '. Bar'); // елементи h1, у яких немає класу bar
$ ( 'Ul li'). Filter ( '. Current'); // невпорядкований список з класом current
$ ( 'Ul li'). First (); // перший елемент з невпорядкованого списку
$ ( 'Ul li'). Eq (5); // шостийВибірки елементів форми
jQuery надає кілька псевдо-селектор, які дозволяють знайти елементи в формі. Ці селектори особливо корисні, оскільки буває важко визначити елементи форми по їх станом або властивості використовуючи стандартні CSS селектори.
button вибирає елементи
$ ( "Ul li: first") - отримати тільки перший елемент