Пояснено селектори jQuery: селектори класів, селектори ідентифікаторів та багато іншого

jQuery Selectors

jQuery використовує селектори стилю CSS для вибору частин або елементів HTML-сторінки. Потім це дозволяє вам щось робити з елементами за допомогою методів або функцій jQuery.

Щоб використовувати один з цих селекторів, введіть знак долара і круглі дужки після неї: $(). Це скорочення jQuery()функції. Всередині дужок додайте елемент, який потрібно вибрати. Ви можете використовувати одинарні або подвійні лапки. Після цього додайте крапку після дужок і методу, який ви хочете використовувати.

У jQuery селектори класу та ідентифікатора подібні до тих, що знаходяться в CSS. Давайте швидко розглянемо це, перш ніж продовжувати.

Селектор ідентифікаторів у CSS

Селектор CSS ID застосовує стилі до певного елементу html. Селектор CSS ID повинен відповідати атрибуту ID елемента HTML. На відміну від класів, які можна застосувати до кількох елементів на веб-сайті, певний ідентифікатор може застосовуватися лише до одного елемента на сайті. Ідентифікатор CSS замінить властивості класу CSS. Щоб вибрати елемент із певним ідентифікатором, напишіть символ хешу (#), за яким слід ідентифікатор елемента.

Синтаксис

#specified_id { /* styles */ }

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

section#about:hover { color: blue; } div.classname#specified_id { color: green; }

Примітка про посвідчення особи

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

Пам'ятайте, що селектор ID повинен відповідати атрибуту ID елемента HTML.

Специфічність

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

Ось приклад методу jQuery, який виділяє всі елементи абзацу та додає до них клас «вибраний»:

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

$("p").addClass("selected");

Гаразд, повернімось до jQuery

У jQuery селектори класу та ідентифікатора такі ж, як у CSS. Якщо ви хочете виділити елементи з певним класом, використовуйте крапку ( .) та назву класу. Якщо ви хочете виділити елементи з певним ідентифікатором, використовуйте хеш-символ ( #) та ім'я ідентифікатора. Зауважте, що HTML не чутливий до регістру, тому найкращою практикою є розмітка HTML та селекторів CSS малими літерами.

Вибір за класом:

Paragraph with a class.

$(".p-with-class").css("color", "blue"); // colors the text blue

Вибір за ідентифікатором:

  • List item with an ID.
  • $("#li-with-id").replaceWith("

    Socks

    ");

    Ви також можете вибрати певні елементи разом із їх класами та ідентифікаторами:

    Підбір за класом

    Якщо ви хочете виділити елементи з певним класом, використовуйте крапку (.) Та назву класу.

    Paragraph with a class.

    $(".pWithClass").css("color", "blue"); // colors the text blue

    Ви також можете використовувати селектор класу в поєднанні з назвою тегу, щоб бути більш конкретними.

      My Wish List
    `

    $("ul.wishList").append("
  • New blender
  • ");

    Вибір за ідентифікатором

    Якщо ви хочете виділити елементи з певним значенням ідентифікатора, використовуйте хеш-символ (#) та ім'я ідентифікатора.

  • List item with an ID.
  • $("#liWithID").replaceWith("

    Socks

    ");

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

    News Headline

    $("h1#headline").css("font-size", "2em");

    Селектори, які виконують роль фільтрів

    Є також селектори, які виконують роль фільтрів - зазвичай вони починаються з двокрапки. Наприклад, :firstселектор вибирає елемент, який є першим дочірнім елементом його батьків. Ось приклад невпорядкованого списку з деякими елементами списку. Селектор jQuery під списком вибирає перший

  • елемент у списку - елемент списку “Один”, а потім використовує .cssметод, щоб зробити текст зеленим.

    • One
    • Two
    • Three
    $("li:first").css("color", "green");

    Примітка: Не забувайте, що застосування css у JavaScript - це не найкраща практика. Ви завжди повинні надавати свої стилі у файлах CSS.

    Інший селектор фільтрації :contains(text), вибирає елементи, які мають певний текст. Помістіть текст, якому потрібно збігтися, у дужки. Ось приклад із двома абзацами. Селектор jQuery бере слово «Moto» і змінює свій колір на жовтий.

    Hello

    World

    $("p:contains('World')").css("color", "yellow");

    Подібним чином :lastселектор вибирає елемент, який є останньою дочірньою структурою його батьків. Селектор JQuery нижче вибирає останній

  • Original text


  • елемент у списку - елемент списку "Три" - а потім використовує .cssметод, щоб пофарбувати текст у жовтий колір.

    $("li:last").css("color", "yellow");

    Примітка: У селекторі jQueryWorld- в одинарних лапках, оскільки він уже знаходиться в парі подвійних лапок. Завжди використовуйте одинарні лапки всередині подвійних лапок, щоб уникнути ненавмисного закінчення рядка.

    Кілька селекторів У jQuery ви можете використовувати кілька селекторів, щоб застосувати однакові зміни до більш ніж одного елемента, використовуючи один рядок коду. Ви робите це, відокремлюючи різні ідентифікатори комою. Наприклад, якщо ви хочете встановити колір тла трьох елементів з ідентифікаторами cat, dog та rat відповідно червоним, просто виконайте:

    $("#cat,#dog,#rat").css("background-color","red");

    Це лише кілька селекторів, доступних для використання в jQuery. Посилання на повний список на веб-сайті jQuery див. У розділі Додаткова інформація.

    Більше інформації:

    • Повний список селекторів jQuery