Селектори jQuery: як використовувати?

Селектори jQuery: як використовувати?

JQuery - бібліотека методів, написаних мовою JavaScript, які призначені для спрощеної роботи з елементами HTML-сторінки. Ця бібліотека також значно спрощує вибір цих елементів, адже підтримує набір селекторів, велика частина яких запозичена з CSS. У цій статті ми докладно розповімо про всіх селекторів jQuery і наведемо приклади їх використання.

CSS и jQuery

Як говорилося вище, селектори в jQuery запозичені з CSS, проте тут є кілька "НО".


  • По-перше, jQuery підтримує тільки селектори, що вибирають елементи DOM, тобто ви не зможете працювати з подієвими селекторами, наприклад, hover, і псевдо-елементами first-line.
  • По-друге, у jQuery є безліч інших селекторів, які ви не зустрічали в правилах CSS, саме тому, якщо ви вже знаєте всі елементи CSS, ця стаття все одно буде актуальна для вас.

Базові елементи

Дані селектори використовуються найчастіше, адже це найпростіший і надійний спосіб вибірки елементів. Ця група повністю відповідає селекторам CSS:

Селектор

Опис селектора

$(""*"")

У вибірку потрапляють всі елементи на сторінці

$(""b"")


У вибірку потрапляють елементи з обраним тегом з розмітки HTML, у цьому прикладі - елементи < b >... </b >

$("".classA"")

У вибірку потрапляють елементи з вказаним класом (< div class = "" classA ">)

$(""#IDone"")

У вибірку потрапляють елементи з вказаним id (< div id = "IDone" >)

Як і CSS, ви можете вибрати декілька селекторів jQuery одночасно. Їх можна прописати через кому. Наприклад, використовувати селектор jquery за назвою тега і за ID - $ ("# IDone, b" "). Допускається і вибірка через тег + клас, або тег + ID, наприклад, $ ("b.classA").

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

Використовуючи різні CMS, ви можете зіткнутися з ситуацією, коли елементу HTML-розмітки неможливо встановити Id або клас. Та ж проблема виникає при обробці контенту, що генерується користувачем. Звідси виникає проблема вибірки конкретних елементів, однак її легко вирішити, використовуючи селектор по атрибуту з jquery.


Селектор

Опис селектора

$(""div[attribute]"")

Обробляє всі елементи з вказаним атрибутом, при цьому його значення не враховується

$(""div[attribute='value']"")


Вибираючи елемент, враховує його атрибут і значення

$(""div[attribute!='value']"")

Вибирає елемент, у якого вказаний атрибут має відмінне значення. У вибірку також потрапляють елементи, які не мають цього атрибута

$(""div[attribute^='value']"")

Вибирає елемент, у якого вказаний атрибут починається з рядка, вказаного у value


$(""div[attribute$='value']"")

Вибирає елемент, у якого вказаний атрибут закінчується рядком, вказаним у value

$(""div[attribute*='value']"")

Вибирає елемент, у якого вказаний атрибут містить у будь-якій частині вказаний у value рядок

$(""div[attribute~='value']"")


Вибирає елемент, у якого вказаний атрибут має вказане у value слово (послідовність знаків без пробілів)

$(""div[attribute|='value']"")

Вибирає елемент, у якого вказаний атрибут відповідає вказаному у value значенню, або починається з нього з подальшим використанням дефісу

Ви можете комбінувати атрибути, щоб звузити пошук відповідних елементів, наприклад, $ ("" img [width = 500] [height = 260] ").

Вибір елементів вмісту

Покопатися в вміст елементів HTML-сторінки і вибрати за результатами потрібний з них - унікальна можливість jQuery. Використовуючи такий метод, ви можете, наприклад, зробити селектор jquery за текстом, що міститься в параграфі (< р > текст </р >).

Селектор

Приклад селектора

Опис селектора

:contains()

$(""p:contains ("value") ") - вибирає всі параграфи < p >, що містять рядок" value ".

Вибирає елемент, що містить вказаний рядок. Елемент буде задовольнено, навіть якщо вказаний рядок знаходитиметься всередині його дочірнього елемента. Запам 'ятайте, що цей селектор чутливий до регістру, тому рядок "text" "не задовольнятиме вказаного значення" "TEXT" "

:has()

$(""p:has (b) ") - вибирає всі елементи < p >, що містять < b >.

Вибирає елемент, що містить інший елемент, вказаний у дужках. Цей селектор також враховує дочірні елементи

:parent

   
     
   
   
   
   
   
   
 

Вибирає елемент з тегом < li >, який є останньою дитиною свого батька, наприклад, < ul >

$(""li:nth-child(3)"")

Вибирає елемент з тегом < li >, який є третьою дитиною свого батька. Замість трійки, звичайно ж, можна використовувати будь-яке інше число

$(""li:only-child"")

Вибирає ті елементи з тегом < li >, батько яких має тільки прямих нащадків (дітей)

       

Окремо варто поговорити про jquery селектор li:nth-child (n), адже він дозволяє задавати не тільки конкретні числа. Так він може вибирати всі парні елементи, якщо замість n задати константу even, або непарні, поставивши odd. Замість n можна використовувати вираз, наприклад, $ ("li:nth-child (2n + 3) "") буде вибирати кожен другий елемент, починаючи свій відлік з третього прямого нащадка.

Робота з полями форми

Тег input має багато варіацій, які залежать від атрибута type. Для вибору різних типів полів вставки у jQuery ви можете вибрати спеціальні селектори.

Селектор

Приклад селектора

Опис селектора

:button

$(""input:button"")

Вибирає всі кнопки

:checkbox

$(""input:checkbox"")

Чекбокси

:file

$(""input:file"")

Поля завантаження файлів

:image

$(""input:image"")

Поля вводу зображень

:password

$(""input:password"")

Поля для паролів

:radio

$(""input:radio"")

Радіо-кнопки

:reset

$(""input:reset"")

Кнопки скидання форми

:submit

$(""input:submit"")

Кнопки надсилання форми

:text

$(""input:text"")

Поля тексту

:input

$("":input"")

Всі поля форми

:checked

$(""input:checked"")

Позначені поля в чекбоксах або радіо-кнопках

:selected

$(""option:selected"")

Елементи меню option

:disabled

$(""input:disabled"")

Вимкнені поля форми

:enabled

$(""input:enabled"")

Увімкнені поля форми

Вибір за положенням

JQuery селектор положення дуже схожий на селектор ієрархії. Він вибирає елемент за його положенням зі списку відповідних під попередню умову елементів.

Селектор

Опис

:first

Працює з першим елементом з відповідного списку

:last

З останнім елементом зі списку

:eq(n)

Вибирає елемент зі списку за його індексом (n). Увага! Нумерація елементів, що підходять під умову jQuery select ведеться з 0!

:lt()

Вибираються всі елементи зі списку, що знаходяться до елемента з індексом n

:gt()

Вибираються всі елементи зі списку, що знаходяться після елемента з індексом n

:even

Вибираються елементи з парним номером індексу

:odd

Вибираються елементи з непарним номером індексу

Інші селектори

Дані селектори неможливо приєднати до будь-якої групи, проте вони не менш важливі. Наприклад, селектор: not (), який можна назвати логічним, дозволяє "" перевернути "" умову або його частину, зробивши вибірку з невідповідних умов.

Також не менш корисним виявиться селектор: hidden, який дозволить розгорнути елемент-картинку з розмірами 0х0 рх на весь екран, наприклад, за натисканням кнопки.

Селектор

Опис

:not()

Вибирає елементи, які не відповідають визначеній у дужках умові

:animated

Вибирає елементи, анімовані jQuery в даний момент

   
   
   
  1. Використовуючи вибір за положенням, намагайтеся максимально мінімізувати список, з якого буде відбуватися вибірка - це значно знизить швидкість пошуку потрібного елемента.

Приклад скрипту з jQuery і його селекторами:

Ув 'язнення

Тепер ви знаєте абсолютно всі селектори з jQuery, крім того, сподіваємося, що приклади допомогли вам зрозуміти, як будувати потрібну умову з декількох різних селекторів.