Як використовувати jQuery Selectors і CSS Selectors, а також основи їх роботи

Днями я брав інтерв’ю у когось, хто закінчив інтерфейсну сертифікацію freeCodeCamp. Він також закінчив досить престижний буткемп, де учасники кодували код з 8:00 до 20:00 протягом шести тижнів поспіль. Так!

Його здатність програмувати була чудова, але я був здивований, побачивши, що його знань у CSS бракує. А бракуючи, я маю на увазі, що він не знав, як вибрати клас для застосування стилю. Це не обов'язково відображається на ньому негативно. Якщо що, це підкреслює, як багато програмістів переглядають CSS.

Багато людей вважають, що вивчення CSS є неважливим, оскільки дизайнери, як правило, можуть впровадити CSS для вас. Хоча це правда, багато разів вам (як програмісту) потрібно буде знати деякі базові CSS, щоб вибрати елемент і сказати йому робити щось, коли трапляється щось інше.

Наприклад, Green Sock Animation Platform (GSAP), мабуть, занадто програмована, щоб бути орієнтованою на дизайнера. Це вимагає розробника, який знає CSS, а також програмування.

Я не кажу, що кожен розробник повинен бути майстром CSS. Але я думаю, якщо ви збираєтеся називати себе розробником повного стеку, ви повинні знати основи CSS. А основи починаються з селектора .

Застереження: селектори jQuery насправді не є унікальними для jQuery - насправді це селектори CSS. Однак якщо ви щось подібне до мене, ви вивчили jQuery ще до того, як правильно вивчили CSS, а отже, автоматично асоціювали селектори з jQuery. Хоча ця стаття стосується селекторів CSS, вона допоможе вам, якщо вам потрібні деякі роз’яснення щодо селекторів jQuery.

Селектор CSS

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

У HTML існує три способи позначення або категоризації елементів. Перший спосіб - найширший: за назвою тегу. Наприклад, ви можете вибрати всіdiv s на своїй сторінці за допомогою простого селектора div. Гей, це було легко!

Другий спосіб - це, мабуть, той, який ви будете використовувати найбільше: classатрибут. Ви можете вибрати за класом, використовуючи крапку ( .), тому у прикладі вище, щоб вибрати всеелементи з класом, який sectionя використовую .sectionяк селектор.

Третім способом часто зловживають, але все-таки корисно, і це idатрибут. Ідентифікатори повинні ідентифікувати ваші елементи, як і ваш SSN (у США) може ідентифікувати вас як особу. Це означає, що ідентифікатори повинні бути унікальними на всій сторінці. Щоб вибрати елемент із певним ідентифікатором, ви використовуєте хештег ( #) або octothorpe, як я люблю його називати. Для вибору елемента з ідентифікатором otherI use #other.

Це найпростіші селектори. Підсумок:

  • вибір за назвою тегу (без префікса)
  • вибрати за назвою класу (префікс .)
  • вибрати за ідентифікатором (префікс #)

Ці три селектори дозволять вам вибрати майже будь-що на вашій веб-сторінці.

Вікторина 1

  1. Як би ви вибрали всі теги абзаців на сторінці? (підказка: теги абзаців є p)
  2. Як би ви вибрали всі предмети з класом button-text?
  3. Як би ви вибрали елемент з ідентифікатором form-userinput?

Не соромтеся ділитися своїми відповідями в коментарях!

Чи всі посвідчення особи повинні бути унікальними?

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

З таким іменем, як ID, ви могли б припустити, що кожен HTML ID повинен бути унікальним, інакше ваш документ HTML не буде працювати. Зрештою, спроба мати дві constзмінні змусить багатьох редакторів кричати на вас, тож хіба HTML теж не кричить?

Проблема в тому, що HTML не буде на вас кричати. Насправді ніхто навіть не скаже вам, що щось не так. Ви можете виявити помилку, яка походить від не унікального ідентифікатора. Але ви зведете себе з розуму, намагаючись з’ясувати першопричину помилки, оскільки це дуже тонка помилка.

Наведений вище приклад демонструє, чому наявність дублікатів ідентифікаторів може спричинити проблему на вашій веб-сторінці. По-перше, насправді є два divідентифікатори other. Якщо ви прокоментуєте стилі #other, ви побачите, що обидва елементи насправді стилізовані. Це може змусити вас подумати: "ну, привіт, я можу використовувати ідентифікатори та імена класів як взаємозамінні!"

Не так швидко. Якщо ви заглянете на панель JavaScript, то побачите, що я вибрав певні елементи на основі їх мітки елемента: ім’я тегу, ім’я класу або ідентифікатор. Ви це помітите document.getElementsByTagNameі document.getElementsByClassNameповернете колекцію всіх відповідних елементів HTML. document.getElementByIdповертає лише перший елемент HTML, який він може знайти з відповідним ідентифікатором. Ви можете перевірити це, прокоментувавши getVanillaSelectorsфункцію та перевіривши консоль.

Щоб ще більше ускладнити ситуацію, якщо ви використовуєте querySelectorAllметод JavaScript (який бере в якості селектора CSS), ви отримуєте абсолютно інший результат.

А щоб просто поспішати з вами, jQuery робить щось інше, незважаючи на те, що синтаксис подібний querySelectorAll.

Я не маю пояснення різної поведінки. Однак я можу сказати вам, як цього уникнути. Ось мої правила:

  1. Ніколи не використовуйте посвідчення особи. classЗамість цього використовуйте атрибути.
  2. Якщо мені потрібно використовувати ідентифікатор, розмістіть його так, щоб він був унікальним, навіть якщо подібний елемент існує на сторінці; наприкладmenu-item-01

Іноді форми та їх поля введення можуть мати ідентифікатори. У цьому випадку ви можете слідувати правилу номер 2. Ось як я б простір імен форму для реєстрації користувача:

Таким чином, якщо у мене є дві форми на одній сторінці (скажімо, user-signupі user-signin), вони гарантовано матимуть унікальні ідентифікатори. Навіть якщо поля userID подібні між формами.

Поєднання селекторів

Іноді один селектор просто не вирізає його. Іноді вам потрібно отримати все, divщо має назву класу section. В інших випадках вам потрібен кожен елемент із іменем класу, sectionякий є дочірнім елементом для divідентифікатора з ідентифікатором user-signup. Існує багато можливих інших комбінацій селекторів.

У цьому розділі ви дізнаєтесь про три способи поєднання селекторів, і я впевнений, що вони задовольнять 90% ваших потреб. Якщо ви виявите, що понад 11% ваших потреб не виконані, приходьте скаржитися мені, і я відредагую це, кажучи 89% ваших потреб :).

Як і раніше, почнемо з CodePen:

Поєднання селекторів для одного елемента

Добре, спочатку розглянемо поєднання селекторів для одного елемента. Це означає вибір елемента, який має ім'я тегу x, І ім'я класу y, І ІД z. Звичайно, вам не потрібні всі три, але ви можете поєднати всі три.

Скажімо, ми хочемо вибрати всі divs з класом item. Щоб зробити це, ми об'єднуємо два: div.item. Він рухається від найбільш загального до найбільш конкретного зліва направо. Це вибирає всі divтеги, ТАКЖЕ мають назву класу item. Важливо зауважити, що між і не існує простору . Додавання простору змінює селектор повністю , як я буду переходити в наступному розділі.div.item

Якщо ви прокоментуєте відповідний CSS, ви побачите, що sectionім'я класу itemне стало червоним. Це тому, що це не divмітка.

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

Але, як раз для паритету, ось приклад того , вибираючи divз класом itemі ідентифікатором other: div.item#other. Знову ж таки, рухаючись зліва направо, воно переходить до найбільш загального до більш конкретного.

Швидше за все, ви будете використовувати цей синтаксис, щоб вибрати елемент, який має кілька класів. Для цього просто розділіть усі класи крапками. Щоб вибрати всі елементи, які мають ОБ'ЄДНІ класи itemі section, ви б використали .item.section. Порядок не має значення, коли ви робите це таким чином, тому .section.itemбуде працювати і ви.

Цей один фокус дозволить вам бути більш конкретними у селекторах.

Селектор "дитина"

Другий спосіб поєднання селекторів - це використання селектора “дочірній”, як я люблю його називати. Є два способи зробити це, тому я почну з найбільш загального.

По-перше, ви можете вибрати будь-яку дочірню частину певного елемента, додавши пробіл. Наприклад, щоб вибрати всі дочірні itemх років #otherелемента, було б #other .item. Зверніть увагу на простір між селекторами.

По-друге, ви можете вибрати безпосередніх нащадків певного елемента, використовуючи &gt ;. "Безпосередня дитина" елемента - це та, яка глибиною лише один рівень. У прикладі, є т wo .iелементи ПЕМ , що міститься в тоннах he #otїї елемент, але один з т he .iелементів TEM загорнутий в a .wrapкожному елемент, так що один є не безпосередній дитиною.

Якщо ви згорнете все, що знаходиться під #otherелементом, ви побачите таке:

Ті два є єдиними прямими нащадками цього #otherелемента. Для того, щоб вибрати тільки прямий дитини .itemз #other, ви будете використовувати #other > .iTEM, який буде вибирати прямий дитина, б ут не одну undernea th .wrapпров. Чудово, так?

Вікторина 2

  1. Як би ви вибрали всі теги абзаців, які належать sectionелементам? (підказка: теги абзаців є p)
  2. Як би ви вибрали всі предмети класу button-text, які є нащадками предметів класу button?
  3. Як вибрати елемент з класом з form-inputякий є прямим нащадком з formелементів?
  4. Бонусне запитання : поясніть, що обирає цей селектор: header.title > form.user-signup button.button-danger

Як і раніше, сміливо діліться своїми відповідями в коментарях!

Поєднавши все це - буквально

Ви можете поєднувати комбіновані селектори. Дійсно. Бонусне запитання, наведене вище, показує приклад цього, але я додав кілька комбінацій в кінці прикладу codepen.

Наприклад, ви можете вибрати всі .items, які є дітьми divs з класом, parent-itemза допомогою div.parent-item .item. Вау!

Ви можете вибрати і прямих нащадків. Наприклад, вибрати всі divs з класом, itemякі є прямими нащадками divs s з класом parent-item: div.parent-item > div.item.

І , нарешті, просто возитися з вами, ви можете ходити по всьому DOM дерева: div.parent-item .coolest-item .item. itemклас, який є дитиною для coolest-itemкласу, який є дитиною для divкласу parent-item.

Зауважте, що, як правило, не є гарною ідеєю перевищувати два-три рівні глибини під час вкладання селекторів. Тоді ви потрапляєте в дивні сфери конкретності, які ви можете вирішити ефективніше, назвавши свої класи CSS краще. Але це виходить за рамки цієї статті. Якщо ви хочете знати більше, повідомте мене, і я напишу про це.

Бонус: Використання Chrome DevTools для отримання селектора

Ви можете використовувати Chrome DevTools, щоб отримати селектор будь-якого елемента, який ви можете вибрати в DOM. Ось як:

  1. Відкрийте Chrome DevTools. Оскільки ви вибираєте елемент, натисніть і клацніть правою кнопкою миші елемент, який ви хочете вибрати, і натисніть "Перевірити":

2. Клацніть правою кнопкою миші елемент DOM, який ви хочете вибрати, і наведіть курсор на “Копіювати”, а потім натисніть “Селектор копіювання:

3. Ось і все! Селектор, який я скопіював, до речі, #editor_93 > section > div.section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailingвибрано .is. Ви можете скопіювати se lector into document.querySelector або jQuery і отримати елемент.

Сподіваємось, цей запис був корисним! Якщо вам сподобалось, будь ласка, дайте мені кілька хлопань, щоб більше людей побачили це. Дякую!