бібліотека 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'); // дозволяємо вибір елементів списку, що раніше були заблоковані