Типи селектора в JQuery

Вступ до селекторів JQuery та їх t

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

Використання селектора

Далі йде синтаксис селектора JQuery:

$ (Selector) .methodname ():

Якщо вам потрібно, ви можете зв’язати декілька селекторів, додавши "." Між методами.

$ (селектор) .method1 (). method2 (). method3 ();

Ось різні типи Selector в JQuery

1) Основні селектори JQuery

Ми можемо вибрати елементи сторінки, використовуючи їх ідентифікатор, клас або ім'я тегу. При необхідності також можна використовувати їх комбінацію. Нижче наведено кілька основних селекторів:

: Selector заголовка - це основний тип селектора, який дозволяє нам знаходити елементи з їх заголовками HTML. Для цього ми використовуємо багатослівний селектор $ ("секція h1, секція h2, розділ h3") або також можемо використовувати набагато коротший селектор $ ("section: header").
: target Selector - Цей селектор знаходить цілі сторінки або хешу URI документа. Наприклад, якщо URI на сторінці "https://example.com/#test". Тоді селектор $ ("h2: target") вибере елемент
.
: анімований селектор - Цей селектор використовується для пошуку всіх елементів, які мають анімацію. Майте на увазі, що для того, щоб вибрати анімацію, вона повинна запускатися під час запуску селектора.

2) Селектори на основі індексу

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

: eq (k) Selector - Цей селектор повертає елемент в індексі k. Він також підтримує негативні значення індексу.
: lt (k) Селектор - Цей селектор повертає всі елементи, що мають індекс менше k. Так само, як і вище, також приймаються негативні значення
: gt (n) Селектор - Цей селектор аналогічний: lt (k) Селектор, за винятком того, що він працює для значення індексу більше або дорівнює k.

3) Дитячі селектори

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

: перша дитина - Цей вибір поверне всі елементи, які є першою дитиною їх батьків.
: перший тип - Цей селектор JQuery використовується для вибору всіх елементів, які є першими побратимами
: last-child - Як випливає з назви, цей селектор вибере останню дитину батька.
: last-of-type - це вибере всіх дітей, які є останніми за своїм типом у батьків. Якщо батьків більше, ніж один, він вибере кілька елементів.
: only-of-type - Ми можемо використовувати селектор єдиного типу, щоб знайти на сторінці всі елементи, які мають братів і сестер одного типу.
: only-child - У ситуаціях, коли вам потрібно знайти та вибрати елементи, які є єдиною дитиною їхнього батька, ви можете використовувати цей селектор. Якщо батько на сторінці має більше однієї дитини, він буде ігнорований.

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

Елементи можна вибирати на основі їх атрибутів. Нижче наведено деякі загальні селектори атрибутів:

$ ("(Attribute | = 'valuehere')") - "Атрибут містить селектор префіксів" вибирає всі елементи з атрибутами, де значення дорівнює або починається з заданої рядка, що супроводжується дефісом.
$ ("(Attribute ~ = 'valuehere')") - Це повертає всі елементи з атрибутами, де значення містить задане слово, розділене пробілами.
$ ("(Attribute * = 'valuehere')") - Вибере елементи, де значення містить задану підрядку. Поки значення не відповідає, розташування не матиме значення

5) Вибір вмісту

Як випливає з назви, ці селектори JQuery використовуються для пошуку та вибору вмісту всередині елементів.

: містить (текст) - використовується для вибору елементів, які мають всередині вказаний текстовий вміст. Одне, що слід пам’ятати при використанні цього селектора, - це тест, що враховує регістри.
: має (селектор) - Він повернеться з елементами, які мають принаймні один елемент всередині, що відповідає вказаному селектору. Наприклад, $ ("section: has (h1)") повернеться з усіма розділами, у яких є елемент h1.
: empty - Цей селектор поверне елементи сторінки, у яких немає дітей, включаючи текстові вузли.
: parent - Цей селектор використовується для вибору всіх елементів веб-сторінки, що мають принаймні один дочірній вузол. Ви можете розглядати це як зворотне до: порожнього селектора JQuery.

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

$ ("Нащадок предка") - використовується для вибору всіх елементів нащадка батьків. Нащадком у нашому випадку може бути дитина, онук тощо.
$ ("Батько> дитина") - Це використовується у випадках, коли нам потрібно вибрати лише пряму дитину конкретного батька.
$ ("Попередній + наступний") - У випадку, якщо нам потрібно вибрати всі елементи, що відповідають селектору "Наступний" і мають батьківський "попередній". Вибрані елементи також будуть негайно переходити до "попереднього", який є побратимом.

7) Селектори видимості

У JQuery також доступні два селектори: видимий та: прихований. Вони можуть бути використані для пошуку видимих або прихованих елементів відповідно на веб-сторінці. Будь-який елемент веб-сторінки вважається прихованим, якщо:

Належним чином його відображення не встановлено.
Його ширина і Висота визначаються нульовими.
Він має тип = прихований згаданий в елементі форми.
Будь-які предки стихії вже приховані.

Майте на увазі, що навіть якщо для елемента встановлено непрозорість як Zero, він все одно вважатиметься видимим, оскільки він все ще займе місце.

8) Селектори форм

Для економії часу та клопоту JQuery має сортувальні версії селекторів для введення елементів веб-форм.

Наприклад, в той час як $ ("кнопка, введення (type = 'кнопка") ") буде працювати, щоб вибрати кнопку на сторінці, ми можемо скористатися $ (": кнопка "), щоб зробити це швидко.

Так само ми можемо використовувати $ (": радіо") для вибору перемикача.

Висновок - типи селектора в JQuery

Селектори - одна з важливих особливостей JQuery, вибір на JavaScript не настільки інтуїтивний та надійний біт із додаванням селекторів через JQuery, програмування в Інтернеті стало простішим.

Типи селектора в JQuery - Дізнайтеся про різні типи селекторів JQuery

Зміст:

Вступ до селекторів JQuery та їх t

Використання селектора