Главная / Верстка сайта / Верстка сайта Руководство по JQuery-селекторам

Верстка сайта Руководство по JQuery-селекторам

В этом руководстве мы рассмотрим различные аспекты использования JQuery селекторов. Чтобы вам было понятно содержание этой статьи, у вас должны быть базовые знания об объектах JavaScript и DOM.

Некоторые считают, что селекторы используются, чтобы применять свойства CSS к элементам, использующим JQuery. Но с их помощью можно сделать гораздо больше, чем просто применить свойства CSS. Так как JQuery-селекторы создают объекты DOM, с их помощью можно сделать то, что нельзя сделать с помощью объекта DOM. Например: изменить текст элемента, добавить HTML-элемент внутри другого и т.д.

Признаки JQuery-селекторов

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

  • Способ создания объектов DOM: JQuery-селекторы — это способ создания объектов JavaScript в HTML-элементах. Если в JavaScript используется document.getElementById, чтобы создать объект HTML-элемента, то это признак JQuery-селектора;
  • Похожи на CSS-селекторы: селекторы JQuery похожи на CSS-селекторы;
  • Не что иное, как функции JQuery: В JQuery селекторы являются функциями, в которые передаются аргументы, как в CSS-селекторах;
  • Встроенный способ прохождения DOM до определенного уровня: После передачи селектором значения аргумента методу JQuery он проходит DOM и выбирает элементы, которые попадают под действие этого селектора.

Как использовать JQuery-селекторы

$() или Jquery() — это функция, в которой можно передать параметр селектора, как в CSS-селекторе. Ниже приведено несколько примеров:

Чтобы выбрать или создать объект DOM «testdiv» (JQuery селектор по атрибуту):

var objTestDiv = $(‘#testdiv’);

Этот код вызывает document.getElementById(‘testdiv’).

Чтобы выбрать все теги span страницы:

var objAllSpan = $(‘span’);

Мы снова вызываем родную функцию JavaScript document.getElementsByName(‘span’);

Чтобы выбрать все элементы с классом “red-div”:

var redDiv = $(‘.red-div’);

Снова используем document.getElementsByClassName(‘red-div’).

Чтобы выбрать все элементы страницы:

var allElement = $(‘*’);

Так в чем же преимущество использования JQuery-селекторов? Вот несколько примеров, которые ответят на этот вопрос:

Чтобы выбрать все элементы div с классом “red-div” (JQuery селектор по классу):

var objRedDiv = $(‘div.red-div’);

Выбираем все элементы div с классом red-div.

Другой сложный пример: Выбрать все дочерние элементы span из div с идентификатором “form”, которые имеют класс “button”:

var spanButton = $(‘form span.button’);

JQuery несколько селекторов через запятую:

var multiple = $(‘#div1, #div2 ‘);

Мы выбираем элементы div с идентификатором div1 и div2.

Во всех приведенных выше выражениях, если вы внимательно посмотрите на аргумент, передаваемый функцией $(), то поймете, что он похож на CSS-селекторы. Например, “#form span.button” , “red-div” , “span” , “#testdiv”.

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

В этом разделе мы кратко рассмотрим различные типы JQuery-селекторов, которые можно использовать.

JQuery-селекторы можно разделить на следующие категории:

  • Основные селекторы CSS;
  • JQuery селектор по атрибуту;
  • Селекторы формы;
  • Селекторы контента;
  • Селекторы иерархии.
  • Основные селекторы CSS

    JQuery-селектор, который работает как селекторы CSS1, относится к этой категории. Например, выборка по id элемента, класса элемента, * (для всех элементов) и разделенных запятой нескольких элементов, относится к этой категории. Селекторы, которые рассматривались в предыдущих разделах, являются основными селекторами CSS.

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

    В JQuery можно выбрать элемент на основе HTML-атрибутов. Например, выбрать все теги анкоров, которые содержат атрибут target со значением «_blank«. Или все div, которые содержат элемент data-id. JQuery селектор по атрибуту можно создать и в CSS. Но некоторые из них могут не работать в отдельных браузерах.

    Ниже приведены примеры селекторов атрибутов разных типов, доступных в JQuery.

    Выбор элементов по указанному атрибуту.

    Чтобы выбрать все элементы span, которые имеют атрибут id, нужно написать такой селектор:

    var spanwithid = $(‘span[id]’)

    Выбор элементов с определенным значением атрибута.

    Чтобы выбрать все теги анкоров, которые содержат атрибут target со значением «_blank«:

    var target_blank = $(‘a[target="_blank"]’);

    Выбор элементов с атрибутом, содержащим определенное значение.

    Чтобы выбрать все элементы div, id которых содержит строку “test”:

    var id_has_test = $(‘div[id*="test"]’);

    Приведенный выше код будет выбирать все элементы div, id которых содержит “test”: “1-test-1” , “test-1” , “1-test”.

    Селекторы формы

    С помощью селекторов JQuery можно выбрать элемент form с различным набором правил. Например, все элементы формы disabled, все элементы формы enabled. Ниже приведено несколько JQuery-селекторов, которые могут быть использованы в форме.

    Чтобы выбрать все элементы формы, с установленными флажками:

    var checked = $(‘input:checked’);

    Выбрать все отключенные элементы:

    var allDisable = $(‘input:disabled’);

    JQuery селектор input:

    var text_input = $(‘input:text’);

    Выбрать все радио-кнопки:

    var radio = $(‘input:radio’)

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

    В JQuery элемент также может быть выбран на основе его содержимого. Например, можно выбрать все элементы, содержащие слово «test«. Или выбрать все элементы, которые не содержат какой-либо фрагмент, которые содержат тег р. Ниже приведено несколько примеров селекторов контента.

    Соответствующие JQuery селекторов примеры использования:

    Выбрать все теги р, которые содержат слово test:

    var p_with_test = $(‘p:contains("test")’);

    Выбрать все элементы div, которые содержат тег p:

    var div_has_p = $(‘div:has(p)’);

    Выбрать все пустые теги span:

    var empty_span = $(‘span:empty’);

    Выбрать элементы div, которые не являются пустыми:

    var not_empty_div = $(‘div:parent’);

    Селекторы иерархии

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

    Получить все элементы div одного уровня с конкретным элементом (JQuery селектор по id):

    var div_sibling(‘#test ~ div’);

    Этот код выбирает все элементы div одного уровня с элементом, имеющим id test.

    Вывести все элементы div одного уровня с абзацами:

    var div_sib_p = $(‘div + p’);

    Получить все элементы li конкретного элемента ul:

    var objli = $(‘ul.nav > li’);

    Перевод статьи «jQuery Selectors Tutorial» был подготовлен дружной командой проекта Сайтостроение от А до Я.

    О нас seoexpert

    продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

    Смотрите также

    Создание цветной рамки вокруг текста с помощью HTML и CSS

    Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...