Обяснени jQuery селектори: селектори на класове, селектори на ID и др

jQuery селектори

jQuery използва селектори в стил CSS, за да избере части или елементи от HTML страница. След това ви позволява да направите нещо с елементите, използвайки jQuery методи или функции.

За да използвате един от тези селектори, въведете знака за долар и скоби след него: $(). Това е стенография за jQuery()функцията. Вътре в скобите добавете елемента, който искате да изберете. Можете да използвате единични или двойни кавички. След това добавете точка след скобите и метода, който искате да използвате.

В jQuery селекторите на клас и ID са като тези в CSS. Нека направим бърз преглед на това, преди да продължим.

Избор на ID в CSS

CSS ID селекторът прилага стилове към определен html елемент. CSS ID селекторът трябва да съвпада с атрибута ID на HTML елемент. За разлика от класовете, които могат да бъдат приложени към множество елементи в даден сайт, конкретен идентификатор може да се прилага само към един единствен елемент на сайта. CSS ID ще замени свойствата на CSS Class. За да изберете елемент с определен идентификатор, напишете хеш (#) знак, последван от идентификатора на елемента.

Синтаксис

#specified_id { /* styles */ }

Можете да комбинирате ID селектора с други видове селектори, за да оформите много специфичен елемент.

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

Забележка относно идентификационните номера

ID трябва да се избягва при стилизиране, ако е възможно. Тъй като има висока специфичност и може да бъде заменен само ако вградите стилове или добавите стилове в . Теглото на ID отменя селектори на класове и селектори на типове.

Не забравяйте, че ID селекторът трябва да съвпада с атрибута ID на HTML елемент.

Специфичност

Селекторите за идентификация имат висока специфичност, което ги прави трудни за отмяна. Класовете имат много по-ниска специфичност и обикновено са предпочитаният начин за стилизиране на елементи, за да се избегнат проблеми със специфичността.

Ето пример за метод 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 селекторите на клас и ID са същите като в CSS. Ако искате да изберете елементи с определен клас, използвайте точка ( .) и името на класа. Ако искате да изберете елементи с определен ID, използвайте хеш символа ( #) и името на ID. Имайте предвид, че HTML не чувствителен към малки и големи букви, затова е най-добрата практика да се запазват HTML маркировката и CSS селекторите с малки букви.

Избор по клас:

Paragraph with a class.

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

Избиране по ID:

  • 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
  • ");

    Избиране по ID

    Ако искате да изберете елементи с определена стойност на ID, използвайте хеш символа (#) и името на ID.

  • 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 приема думата „Мото“ и променя цвета си на жълт.

    Hello

    World

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

    По същия начин :lastселекторът избира елемента, който е последното дъщерно устройство на своя родител. Селекторът JQuery по-долу избира последния

  • Original text


  • елемент в списъка - елементът от списъка „Три“ - и след това използва .cssметода, за да превърне текста в жълто.

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

    Забележка: В jQuery селектораWorldе в единични кавички, защото вече е в двойка двойни кавички. Винаги използвайте единични кавички в двойни кавички, за да избегнете неволно завършване на низ.

    Множество селектори В jQuery можете да използвате множество селектори, за да приложите едни и същи промени към повече от един елемент, като използвате един ред код. Правите това, като разделяте различните идентификатори със запетая. Например, ако искате да зададете цвета на фона на три елемента с идентификатори съответно котка, куче и плъх на червено, просто направете:

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

    Това са само няколко от селекторите, налични за използване в jQuery. Вижте раздела Повече информация за връзка към пълния списък на уеб сайта на jQuery.

    Повече информация:

    • Пълен списък на jQuery селектори