Селектори, підручник jquery

Отже, параметром функції $ () можуть бути вказані селектори, які, в свою чергу, є частиною стандарту CSS.

Давайте розглянемо різні можливі селектори докладно.

Перелічимо найбільш часто використовувані селектори.

5) Клас - колекція елементів, що мають зазначений клас 6) Тег. Клас - колекція елементів, що мають зазначений клас в певному тезі Робимо фон червоним для всіх P з class = "cls2"

Для прискорення вибірки не слід вказувати назву тега перед ідентифікатором.

Якщо пошук здійснюється по стильовому класу, то, навпаки,
Cледует вказати назву тега.

Якщо назва ідентифікатора (або класу) містить спеціальні символи
(Наприклад, точку або квадратні дужки), то їх необхідно екранувати двома Слеш. У цьому прикладі отримуємо посилання на наступний елемент з id = "divl.index [5]".

Відкрийте приклад в новому вікні і подивіться вихідний код


Якщо необхідно, наприклад, застосувати один стиль до різних елементів,
то можна вказати селектори через кому.

Відкрийте приклад в новому вікні і подивіться вихідний код

Виконати пошук елемента всередині іншого елемента HTML-документа за допомогою таких дій.

1) Елемент1 Елемент2 - знаходимо Елемент2, який розташовується усередині контейнера Елемента1 Колір тексту посилання стане червоним, якщо тег A знаходиться всередині тегаdiv. 2) Елемент1> Елемент2 - знаходимо Елемент2, який є дочірнім для елемента A. Колір тексту посилання стане червоним, якщо тег A знаходиться всередині тегаdiv
І не вкладено в інший тег.

Відкрийте приклад в новому вікні і подивіться вихідний код


3) Елемент1 + Елемент2 - знаходимо Елемент2, який є сусіднім для Елемент A і слід відразу після нього. Колір тексту посилання стане червоним, якщо тег A слід відразу після тегаdiv.

Відкрийте приклад в новому вікні і подивіться вихідний код

Елемент2 - знаходимо Елемент2, який слід після елемента 1, причому необов'язково відразу. Колір тексту посилання стане червоним, якщо тег A слід після тега div.

Відкрийте приклад в новому вікні і подивіться вихідний код

При необхідності можна складати вирази з декількох селекторів Колір тексту посилання стане червоним, якщо тег A розташований всередині тега span. а той в свою чергу вкладений в тег div

Відкрийте приклад в новому вікні і подивіться вихідний код

Для прив'язки до параметрів тегів застосовуються такі селектори.

1) [Параметр] - елементи із зазначеним параметром $ Колір тексту посилання стане червоним, якщо тег A має параметр id.

Відкрийте приклад в новому вікні і подивіться вихідний код


2) [Параметр = "Значення"] - колекція елементів, у яких параметр точно дорівнює значенню Колір тексту input стане червоним, якщо параметр name має значення myinput.

Відкрийте приклад в новому вікні і подивіться вихідний код


3) [Параметр! = "Значення"] - колекція елементів, у яких параметр не дорівнює значенню Колір тексту input стане червоним, якщо параметр name не має значення hello.

Відкрийте приклад в новому вікні і подивіться вихідний код


4) [Параметр ^ = "Значення"] - колекція елементів, у яких параметр починається з вказаного значення Колір тексту input стане червоним, якщо параметр name починається з myinput.

Відкрийте приклад в новому вікні і подивіться вихідний код


5) [Параметр $ = "Значення"] - колекція елементів, у яких параметр закінчується вказаним значенням Колір тексту input стане червоним, якщо параметр name закінчується на ello.

Відкрийте приклад в новому вікні і подивіться вихідний код


6) [Параметр * = "Значення"] - колекція елементів, у яких параметр містить зазначений фрагмент значення Колір тексту input стане червоним, якщо параметр name містить текст yinput.

Відкрийте приклад в новому вікні і подивіться вихідний код