бібліотека Jquery прекрасна, вона дає практично повний контроль над вмістом сторінки. Проте, щоб докластись до будь-якого елемента, потрібно вміти вибрати його с-поміж інших.
Ми вже розглядали CSS-селектори, тепер черга Jquery. Вашій увазі передрук корисних прйомів з маніпуляції DOM.
$('div span'); // вибираємо усі span , кожного блоку div
Аналогічний результат отримуємо при наступній конструкції.
$('div').find('span'); // вибираємо усі span , кожного блоку div
Така постановка питання з використанням > допомагає вибрати лише безпосередніх нащадків.
$('div > span'); // вибирає всі спани, де вони є прямими нащадками дівів
Що працює швидше і менше грузить пам’ять поки не тестував 🙂
$('div, span'); // вибір всіх div та span об'єктів
Працюємо з сусідніми елементами 🙂
$('span + img'); // вибір усіх img, перед якими йдуть span елементи
$('span ~ img'); //вибір усіх img опісля першого елементу span
$('#banner').prev(); // вибір попереднього елемента
$('#banner').next(); // вибір наступного елемента
Вибір усіх елементів, предків, або нащадків
$('*'); // вибираємо геть усе
$('p > *'); // вибір усіх нащадків "p"
$('p').children(); // тут також вибір усіх нащадків "p"
$('p').parent(); // вибір прямих батьків усіх "p"
$('p').parents(); // вибір усіх предків "p"
$('p').parents('div'); // вибір усіх предків "p", які мають тип "div"
Фільтри. Це чи не найпрекрасніше, що є в Jquery
$('div:first'); // вибираємо перший div-елемент на сторінці
$('div:last'); // вибираємо останній div на сторінці
$('div:not(.red)'); // вибираємо div-елементи, які не мають класу red
$('div:even'); // вибираємо парні div-и
$('div:odd'); // вибираємо непарні div-и
$('div:eq(N)'); // вибираємо парні div з порядковим номером N в DOMe
$('div:gt(N)'); // вибираємо div-и з номером більшим за N
$('div:lt(N)'); // вибираємо div-и з номером меншим за N
$(':header'); // вибір заголовків h1, h2, h3 тощо
$('div:animated'); // вибір елементів з активною анімацією
Виділяють окремо фільтри по контенту та видимості
$('div:contains(text)'); // вибираємо div-и, що містять текст
$('div:empty'); // вибираємо пусті div-и
$('div:has(p)'); // вибираємо div-и, що містять елементи p
$('div.red').filter('.bold') // серед div-ів з класом red вибирає діви з класом bold
$('div:hidden'); // вибираємо приховані div-и
$('div:visible'); // вибираємо видимі div-и
Фільтри по атрибутах
$("div[id]"); // вибираємо усі div-и з атрибутом id
$("div[title='my']"); // вибираємо усі div-и з атрибутом title=my
$("div[title!='my']"); // тут навпаки — вибираємо усі div-и окрім як з атрибутом title=my
$("div[title^='my']"); // вибираємо усі div-и з атрибутом title, що починається на my
// наприклад: <div title="myCat">,<div title="myCoffee">, <div title="my...">
$("div[title$='my']"); // вибираємо усі div-и з атрибутом title, що закінчується на my
// наприклад: <div title="itsmy">,<div title="somy">, <div title="...my">
$("div[title*='my']"); // вибираємо усі div-и з атрибутом title, що містить на my
// наприклад: <div title="itsmy">,<div title="myCat">, <div title="its my cat">,<div title="...my...">
Цей фільтр варто виділити окремо
$("a[rel~='external']"); // вибір усіх A з атрибутом rel, що містить external в переліку, що розділений пробілами
Приклад: <a href="" rel="external">link</a> — виділить <a href="" rel="nofollow external">link</a> — виділить <a href="" rel="external nofollow">link</a> — виділить <a href="" rel="friend external follow">link</a> — виділить <a href="" rel="external-link">link</a> — не виділить
Фільтри для форм
для роботи з формами є кілька конструкцій, які дозволяють вибирати по типу та стану: enabled/disabled/selected/checked
$(":text"); // вибір усіх input з типом =text
$(":radio"); // вибір усіх input з типом =radio
$("input:enabled"); // вибір усіх включених элементів input
$("input:checked"); // вибір усіх відмічених чекбоксів
$("form select[name=city] option:selected").val(); // отримання обраних елементів в селекті city
$("form :radio[name=some]:checked").val(); // отримання обраного значення radio-кнопки some
$("form :checkbox:checked"); // вибір усіх обраних чекбоксів
Фільтри також можна групувати
$("div[name=city]:visible:has(p)"); // вибір видимого div-у з іменем city, який при цьому містить p
Кілька додаткових прийомів для роботи з фільтрами Jquery
$('select[@name=mySelect] option').remove(); // видаляємо усі елементи зі списку mySelect
$('select[@name=mySelect]').append('<option>Щось нове :)</option>'); // додаємо в список новий елементлемент
$('select[@name=loadFileName] option:first').attr('selected', 'yes'); // робимо виділеним перший елемент списку
$('select[@name=loadFileName] option:first').removeAttr('selected'); // примусово знімаємо виділення з елементу списку
var file = $('select[@name=loadFileName] option:selected').val(); // отримуємо значення виділеного елементу списку <option value="some value">
var file = $('select[@name=loadFileName] option:selected').text(); // дістаємо те, що знаходиться між <option>...</option>
if( typeof $('select[@name=loadFileName] option:selected').text() === 'undefined' ){
alert('Ніц не вибрано...');
} // перевіряємо, чи вибраний бодай якийсь елемент в списку
$('select[@name=loadFileName]').attr('size', $('select[@name=loadFileName] option').size()); // перетворюємо список в автомасштабний
$('select[@name=loadFileName] option:contains('текст нужного элемента')').attr('disabled', 'disabled'); // робимо недоступним для виділення наступний елемент
$('select[@name=loadFileName] option:disabled').removeAttr('disabled'); // дозволяємо вибір елементів списку, що раніше були заблоковані