Типы селектора в JQuery

Введение в JQuery селекторы и их т

Когда вы работаете с JavaScript, вы часто оказываетесь в ситуации, когда вам нужно найти и изменить какой-то контент на странице. В этих случаях вам нужно будет использовать поддержку селектора в JQuery. JQuery позволяет довольно легко находить элементы страницы на основе их типов, значений, атрибутов и т. Д. Эти элементы основаны на селекторах CSS, и как только вы поработаете, вы увидите, что поиск элементов на страницах - это легкая прогулка. В зависимости от их использования мы можем классифицировать разные типы селекторов JQuery по разным типам. Давайте посмотрим на некоторые из наиболее часто используемых селекторов.

Использование селектора

Ниже приведен синтаксис селектора JQuery:

$ (Селектор) .methodname ():

Если вам нужно, вы можете связать несколько селекторов, добавив «.» Между методами.

$ (селектор) .method1 () метод2 () method3 ()..;

Вот различные типы селектора в JQuery

1) Основные селекторы JQuery

Мы можем выбрать элементы страницы, используя их идентификатор, класс или имя тега. При необходимости также можно использовать их комбинацию. Ниже приведены некоторые основные селекторы:

: header Selector - это основной тип селектора, который позволяет нам находить элементы с их HTML-заголовками. Для этого мы используем многословный селектор $ («секция h1, секция h2, секция h3») или мы также можем использовать намного более короткий селектор $ («section: header»).
: target Selector - этот селектор находит цели страницы или хэш URI документа. Например, если URI на странице «https://example.com/#test». Затем селектор $ («h2: target») выберет элемент
,
: animated Selector - этот селектор используется для поиска всех элементов, имеющих анимацию. Имейте в виду, что для выбора анимации она должна быть запущена во время работы селектора.

2) Селекторы на основе индекса

JQuery имеет свой собственный набор селекторов на основе индекса, которые используют индексацию на основе нуля. Ниже приведены некоторые примеры:

: eq (k) Selector - этот селектор возвращает элемент с индексом k. Он также поддерживает отрицательные значения индекса.
: lt (k) Selector - этот селектор возвращает все элементы, индекс которых меньше k. Как и выше, отрицательные значения также принимаются
: gt (n) Селектор - этот селектор похож на: lt (k) Селектор, за исключением того, что он работает для значения индекса, большего или равного k.

3) Выбор ребенка

Вы можете использовать JQuery для выбора дочерних элементов любого элемента на основе их типа или индекса.

: first-child - Этот селектор вернет все элементы, которые являются первыми дочерними элементами их родителей.
: first-of-type - этот селектор JQuery используется для выбора всех элементов, которые являются первыми братьями и сестрами
: last-child - Как следует из названия, этот селектор выберет последнего потомка родителя.
: last-of-type - Это выберет всех потомков, которые являются последними из их типа в родителе. Если есть более одного родителя, он выберет несколько элементов.
: only-of-type - Мы можем использовать селектор only-of-type, чтобы найти все элементы, которые имеют одноуровневых элементов одного типа на странице.
: only-child - в ситуациях, когда вам нужно найти и выбрать элементы, которые являются единственным потомком их родителя, вы можете использовать этот селектор. Если у родителя на странице более одного ребенка, он будет проигнорирован.

4) Селекторы атрибутов

Элементы могут быть выбраны на основе их атрибутов, ниже приведены некоторые общие селекторы атрибутов:

$ («(Attribute | = 'valuehere')») - «Атрибут содержит префиксный селектор» выбирает все элементы с атрибутами, где значение равно или начинается с данной строки, за которой следует дефис.
$ («(Attribute ~ = 'valuehere')») - возвращает все элементы с атрибутами, где значение содержит данное слово, разделенное пробелами.
$ («(Attribute * = 'valuehere')») - будет выбирать элементы, в которых значение содержит данную подстроку. Пока значение совпадает, местоположение не будет иметь значения

5) Селекторы контента

Как следует из названия, эти селекторы JQuery используются для поиска и выбора контента внутри элементов.

: содержит (текст) - это используется для выбора элементов, которые имеют указанное текстовое содержимое внутри. При использовании этого селектора следует помнить, что тест здесь чувствителен к регистру.
: has (селектор) - он вернется с элементами, внутри которых есть хотя бы один элемент, соответствующий указанному селектору. Например, $ («section: has (h1)») вернет все разделы, имеющие элемент h1.
: empty - этот селектор вернет элементы страницы, которые не имеют дочерних элементов, включая текстовые узлы.
: parent - этот селектор используется для выбора всех элементов веб-страницы, которые имеют хотя бы один дочерний узел. Вы можете рассматривать это как обратное к: empty JQuery Selector.

6) Иерархия селекторов

$ («Потомок предка») - используется для выбора всех дочерних элементов родителя. Потомком в нашем случае может быть ребенок, внук и тд.
$ («Parent> child») - используется в тех случаях, когда нам нужно только выбрать прямого потомка определенного родителя.
$ («Предыдущий + следующий») - в случае, если нам нужно выбрать все элементы, которые соответствуют селектору «следующий» и имеют родительский «предыдущий». Выбранные элементы также будут немедленно продолжены «предыдущим», который является родным братом.

7) Селекторы видимости

Два селектора: видимый и: скрытый также доступны в JQuery. Их можно использовать для поиска видимых или скрытых элементов на веб-странице соответственно. Любой элемент на веб-странице считается скрытым, если:

Его отображение правильно установлено на none.
Его ширина и высота определены равными нулю.
Он имеет тип = скрытый, упомянутый в элементе формы.
Любые предки элемента уже скрыты.

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

8) Выбор форм

Для экономии времени и хлопот JQuery имеет более короткие версии селекторов для элементов ввода веб-форм.

Например, хотя $ («button, input (type = 'button')») будет работать для выбора кнопки на странице, мы можем использовать $ («: button»), чтобы сделать это быстро.

Точно так же мы можем использовать $ («: radio»), чтобы выбрать переключатель.

Вывод - типы селектора в JQuery

Селекторы являются одной из важных особенностей JQuery, выбор в JavaScript не такой интуитивно понятный и надежный, с добавлением селекторов через JQuery программирование для Интернета стало проще.

Типы селектора в JQuery - Изучите различные типы селекторов JQuery

Содержание:

Введение в JQuery селекторы и их т

Использование селектора