freeCodeCamp

7.8 KiB

Raw Blame History

title	localeTitle
jQuery Selectors	Селекторы jQuery

Селекторы jQuery

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

Чтобы использовать один из этих селекторов, введите знак доллара и круглые скобки после него: $() . Это сокращает функцию jQuery() . Внутри круглых скобок добавьте элемент, который вы хотите выбрать. Вы можете использовать одиночные или двойные кавычки. После этого добавьте точку после круглых скобок и метод, который вы хотите использовать.

В jQuery селектора классов и идентификаторов похожи на классы в CSS.

Ниже приведен пример метода jQuery, который выбирает все элементы абзаца и добавляет к ним класс «selected»:

<p>This is a paragraph selected by a jQuery method.</p> 
 <p>This is also a paragraph selected by a jQuery method.</p> 
 
 $("p").addClass("selected");

В jQuery селектора классов и идентификаторов те же, что и в CSS. Если вы хотите выбрать элементы с определенным классом, используйте точку ( . ) И имя класса. Если вы хотите выбрать элементы с определенным идентификатором, используйте символ хеша ( # ) и имя идентификатора. Обратите внимание, что HTML не чувствителен к регистру, поэтому лучше придерживаться разметки HTML и CSS-селекторов в нижнем регистре.

Выбор по классам:

<p class="p-with-class">Paragraph with a class.</p> 
 
 $(".p-with-class").css("color", "blue"); // colors the text blue

Выбор по ID:

<li id="li-with-id">List item with an ID.</li> 
 
 $("#li-with-id").replaceWith("<p>Socks</p>");

Вы также можете выбрать определенные элементы вместе со своими классами и идентификаторами:

Выбор по классам

Если вы хотите выбрать элементы с определенным классом, используйте точку (.) И имя класса.


<p class="pWithClass">Paragraph with a class.</p>

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

Вы также можете использовать селектор классов в сочетании с именем тега, чтобы быть более конкретным.


<ul class="wishList">My Wish List</ul>`<br>

$("ul.wishList").append("<li>New blender</li>");

Выбор по идентификатору

Если вы хотите выбрать элементы с определенным значением идентификатора, используйте символ хеша (#) и имя идентификатора.


<li id="liWithID">List item with an ID.</li>

$("#liWithID").replaceWith("<p>Socks</p>");

Как и в случае с селектором классов, это также можно использовать в сочетании с именем тега.


<h1 id="headline">News Headline</h1>

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

Селекторы, которые действуют как фильтры

Существуют также селекторы, которые действуют как фильтры - они обычно начинаются с двоеточий. Например, :first селектор выбирает элемент, который является первым дочерним элементом его родителя. Ниже приведен пример неупорядоченного списка с некоторыми элементами списка. Селектор jQuery под списком выбирает первый элемент <li> в списке - элемент списка «Один», а затем использует метод .css чтобы превратить текст в зеленый.


   <ul> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
   </ul>

$("li:first").css("color", "green");

Примечание. Не забывайте, что применение CSS в JavaScript не является хорошей практикой. Вы всегда должны указывать свои стили в файлах css.

Другой селектор фильтрации :contains(text) , выбирает элементы с определенным текстом. Поместите текст, который вы хотите совместить в круглых скобках. Вот пример с двумя параграфами. Селектор jQuery берет слово «Moto» и меняет цвет на желтый.


    <p>Hello</p> 
    <p>World</p>

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

Аналогично, :last селектор выбирает элемент, который является последним дочерним элементом его родителя. В селекторе JQuery ниже выбирается последний элемент <li> в списке - элемент списка «Три», а затем используется метод .css чтобы повернуть текст в желтый цвет.

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

Примечание. В селекторе jQuery World находится в одинарных кавычках, потому что он уже находится внутри пары двойных кавычек. Всегда используйте одиночные кавычки внутри двойных кавычек, чтобы избежать непреднамеренного окончания строки.

Несколько селекторов В jQuery вы можете использовать несколько селекторов для применения одних и тех же изменений более чем к одному элементу, используя одну строку кода. Вы делаете это, разделяя различные идентификаторы запятой. Например, если вы хотите установить цвет фона трех элементов с идентификаторами cat, dog и rat соответственно красным, просто выполните:

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

Это лишь некоторые из селекторов, доступных для использования в jQuery. Дополнительную информацию см. В разделе «Дополнительная информация» на веб-сайте jQuery.

Дополнительная информация:

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

7.8 KiB Raw Blame History Unescape Escape