Jquery добавить в начало элемент: Вставка дочерних, сестринских и родительских элементов

Leave a Comment / Разное / By /

Содержание

Быстрый старт / Методология / БЭМ

Введение

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

Содержание

  • Блок

  • Элемент

  • Когда создавать блок, когда — элемент?

  • Модификатор

  • Микс

  • Файловая структура

Блок

Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.

Особенности:

  • Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Пример

<!-- Верно.  Семантически осмысленный блок `error` -->
<div></div>
<!-- Неверно. Описывается внешний вид -->
<div></div>

  • Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.

  • В CSS по БЭМ также не рекомендуется использовать селекторы по тегам или id.

Таким образом обеспечивается независимость, при которой возможно повторное использование или перенос блоков с места на место.

Принцип работы с блоками

Вложенность

  • Блоки можно вкладывать друг в друга.

  • Допустима любая вложенность блоков.

Пример

<!-- Блок `header` -->
<header>
    <!-- Вложенный блок `logo` -->
    <div></div>
    <!-- Вложенный блок `search-form` -->
    <form></form>
</header>

Элемент

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

Особенности:

  • Название элемента характеризует смысл («что это?» — «пункт»: item, «текст»:

    text), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

  • Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

Пример

<!-- Блок `search-form` -->
<form>
    <!-- Элемент `input` блока `search-form` -->
    <input>
    <!-- Элемент `button` блока `search-form` -->
    <button>Найти</button>
</form>

Принципы работы с элементами

  • Вложенность

  • Принадлежность

  • Необязательность

Вложенность

  • Элементы можно вкладывать друг в друга.

  • Допустима любая вложенность элементов.

  • Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.

Пример

<!--
    Верно. Структура полного имени элементов соответствует схеме:
    `имя-блока__имя-элемента`
-->
<form>
    <div>
        <input>
        <button>Найти</button>
    </div>
</form>
<!--
    Неверно. Структура полного имени элементов не соответствует схеме:
    `имя-блока__имя-элемента`
-->
<form>
    <div>
        <!--
            Рекомендуется:
            `search-form__input` или `search-form__content-input`
        -->
        <input>
        <!--
            Рекомендуется:
            `search-form__button` или `search-form__content-button`
        -->
        <button>Найти</button>
    </div>
</form>

Имя блока задает пространство имен, которое гарантирует зависимость элементов от блока (block__elem).

Блок может иметь вложенную структуру элементов в DOM-дереве:

Пример

<div>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>

Однако эта же структура блока в методологии БЭМ всегда будет представлена плоским списком элементов:

Пример

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Это позволяет изменять DOM-структуру блока без внесения правок в коде каждого отдельного элемента:

Пример

<div>
    <div>
        <div></div>
    </div>
    <div></div>
</div>

Структура блока меняется, а правила для элементов и их названия остаются прежними.

Принадлежность

Элемент — всегда часть блока и не должен использоваться отдельно от него.

Пример

<!-- Верно. Элементы лежат внутри блока `search-form` -->
<!-- Блок `search-form` -->
<form>
    <!-- Элемент `input` блока `search-form` -->
    <input>
    <!-- Элемент `button` блока `search-form` -->
    <button>Найти</button>
</form>
<!-- Неверно.
 
  Элементы лежат вне контекста блока `search-form` -->
<!-- Блок `search-form` -->
<form>
</form>
<!-- Элемент `input` блока `search-form` -->
<input>
<!-- Элемент `button` блока `search-form` -->
<button>Найти</button>
Необязательность

Элемент — необязательный компонент блока. Не у всех блоков должны быть элементы.

Пример

<!-- Блок `search-form` -->
<div>
    <!-- Блок `input` -->
    <input>
    <!-- Блок `button` -->
    <button>Найти</button>
</div>

Когда создавать блок, когда — элемент?

Создавайте блок

Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.

Создавайте элемент

Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).

Исключение составляют элементы, реализация которых для упрощения разработки требует разделения на более мелкие части — подэлементы.  В БЭМ-методологии нельзя создавать элементы элементов. В подобном случае вместо элемента необходимо создавать служебный блок.

Модификатор

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Особенности:

  • Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).

  • Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

Типы модификаторов

Булевый

  • Используют, когда важно только наличие или отсутствие модификатора, а его значение несущественно. Например, «отключен»:

    disabled. Считается, что при наличии булевого модификатора у сущности его значение равно true.

  • Структура полного имени модификатора соответствует схеме:

    • имя-блока_имя-модификатора;

    • имя-блока__имя-элемента_имя-модификатора.

Пример

<!-- Блок `search-form` имеет булевый модификатор `focused` -->
<form>
    <input>
    <!-- Элемент `button` имеет булевый модификатор `disabled` -->
    <button>Найти</button>
</form>
Ключ-значение

  • Используют, когда важно значение модификатора. Например, «меню с темой оформления islands»: menu_theme_islands.

  • Структура полного имени модификатора соответствует схеме:

    • имя-блока_имя-модификатора_значение-модификатора;

    • имя-блока__имя-элемента_имя-модификатора_значение-модификатора.

Пример

<!-- Блок `search-form` имеет модификатор `theme` со значением `islands` -->
<form>
    <input>
    <!-- Элемент `button` имеет модификатор `size` со значением `m` -->
    <button>Найти</button>
</form>
<!--
    Невозможно одновременно использовать два одинаковых модификатора
    с разными значениями
-->
<form>
    <input>
    <button>
        Найти
    </button>
</form>

Принципы работы с модификаторами

Модификатор нельзя использовать самостоятельно

С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности, а не заменять ее.

Пример

<!-- Верно. Блок `search-form` имеет модификатор `theme` со значением `islands`-->
<form>
    <input>
    <button>Найти</button>
</form>
<!-- Неверно. Отсутствует модифицируемый класс `search-form` -->
<form>
    <input>
    <button>Найти</button>
</form>

Зачем в именах модификаторов и элементов указывать имя блока?

Микс

Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.

Миксы позволяют:

  • совмещать поведение и стили нескольких сущностей без дублирования кода;

  • создавать семантически новые компоненты интерфейса на основе имеющихся.

Пример

<!-- Блок `header` -->
<div>
    <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
    <div></div>
</div>

В данном примере мы совместили поведение и стили блока

search-form и элемента search-form блока header. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным. Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости.

Файловая структура

Принятый в методологии БЭМ компонентный подход применяется и к организации проектов в файловой структуре. Реализации блоков, элементов и модификаторов делятся на независимые файлы-технологии, что позволяет нам подключать их опционально.

Особенности:

  • Один блок — одна директория.

  • Имена блока и его директории совпадают. Например, блок header — директория header/, блок menu — директория

    menu/.

  • Реализация блока разделяется на отдельные файлы-технологии. Например, header.css, header.js.

  • Директория блока является корневой для поддиректорий соответствующих ему элементов и модификаторов.

  • Имена директорий элементов начинаются с двойного подчеркивания (__). Например, header/__logo/, menu/__item/.

  • Имена директорий модификаторов начинаются с одинарного подчеркивания (_). Например, header/_fixed/, menu/_theme_islands/.

  • Реализации элементов и модификаторов разделяются на отдельные файлы-технологии. Например, header__input.js, header_theme_islands.css.

Пример

search-form/                           # Директория блока search-form
    __input/                           # Поддиректория элемента search-form__input
        search-form__input.css         # Реализация элемента search-form__input
                                       # в технологии CSS
        search-form__input.js          # Реализация элемента search-form__input
                                       # в технологии JavaScript
    __button/                          # Поддиректория элемента search-form__button
        search-form__button.
 
 css
        search-form__button.js
    _theme/                            # Поддиректория модификатора
                                       # search-form_theme
        search-form_theme_islands.css  # Реализация блока search-form, имеющего
                                       # модификатор theme со значением islands
                                       # в технологии CSS
        search-form_theme_lite.css     # Реализация блока search-form, имеющего
                                       # модификатор theme со значением lite
                                       # в технологии CSS
    search-form.css                    # Реализация блока search-form
                                       # в технологии CSS
    search-form.js                     # Реализация блока search-form
                                       # в технологии JavaScript

Такая файловая структура позволяет легко поддерживать и повторно использовать код.

Разветвленная файловая структура предполагает, что в production код будет собираться в общие файлы проекта.

Придерживаться рекомендуемой файловой структуры не обязательно. Вы можете использовать любую альтернативную структуру проекта, соответствующую принципам организации файловой структуры БЭМ, например:

  • Flat

  • Flex

[атрибут] | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Существует множество способов выбора элементов в CSS. Самый простой выбор осуществляется по имени тега, например p { } . Почти все, что более специфично, чем селектор тегов, использует атрибуты — класс и ID выбирают эти атрибуты в элементах HTML. Но класс и ID — не единственные атрибуты, которые могут выбрать разработчики. Мы можем использовать любых атрибутов элемента в качестве селекторов.

Выбор атрибута имеет специальный синтаксис. Вот пример:

 a[href="https://css-tricks.com"] {
  цвет: #E18728;
}

Это селектор точного соответствия , который будет выбирать только ссылки с точным значением атрибута href «https://css-tricks.com».

Семь различных типов

Селекторы атрибутов по умолчанию чувствительны к регистру (см. ниже соответствие без учета регистра) и записываются в квадратных скобках [] .

Существует семь различных типов совпадений, которые можно найти с помощью селектора атрибутов, и синтаксис каждого из них отличается. Каждый из более сложных селекторов атрибутов построен на синтаксисе селектора точного соответствия — все они начинаются с имени атрибута и заканчиваются знаком равенства, за которым следует значение (я) атрибута, обычно в кавычках. То, что находится между именем атрибута и знаком равенства, определяет разницу между селекторами.

 [значение данных] {
  /* Атрибут существует */
}

[данные-значение = "foo"] {
  /* Атрибут имеет именно это значение */
}

[значение данных * = "foo"] {
  /* Значение атрибута содержит где-то это значение */
}

[значение данных~="foo"] {
  /* Атрибут имеет это значение где-то в списке, разделенном пробелами */
}

[значение данных^="foo"] {
  /* Значение атрибута начинается с этого */
}

[значение данных|="foo"] {
  /* Значение атрибута начинается с this в списке, разделенном тире */
}

[значение данных $ = "foo"] {
  /* Значение атрибута заканчивается этим */
}

Значение содержит: значение атрибута содержит термин как единственное значение, значение в списке значений или как часть другого значения. Чтобы использовать этот селектор, добавьте звездочку (*) перед знаком равенства. Например, img[alt*="art"] выберет изображения с альтернативным текстом «abstract art » и «спортсмен , начинающий новый вид спорта», потому что значение «art» находится в слове «starting». ».

Значение находится в списке, разделенном пробелами: значение является либо единственным значением атрибута, либо целым значением в наборе значений, разделенных пробелами. В отличие от селектора «содержит», этот селектор не будет искать значение как фрагмент слова. Чтобы использовать этот селектор, добавьте тильду (~) перед знаком равенства. Например, 9=»art»] выберет изображения с замещающим текстом «art show» и «artistic pattern», но не изображение с замещающим текстом «Arthur Miller», потому что «Arthur» начинается с заглавной буквы.

Значение находится первым в списке, разделенном тире: Этот селектор очень похож на селектор «начинается с». Здесь селектор соответствует значению, которое является либо единственным значением, либо первым в списке значений, разделенных тире. Чтобы использовать этот селектор, добавьте вертикальную черту (|) перед знаком равенства. Например, li[data-years|="1900"] выберет элементы списка со значением лет данных «1900-2000», но не элемент списка со значением лет данных «1800-1900». ».

Значение заканчивается на: значение атрибута заканчивается выбранным термином. Чтобы использовать этот селектор, добавьте знак доллара ($) перед знаком равенства. Например, a[href$="pdf"] выбирает все ссылки, оканчивающиеся на .pdf.

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

См. Селекторы атрибутов пера от CSS-Tricks (@css-tricks) на CodePen.

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

 [класс="(╯°□°）╯︵ ┻━┻"]{
  красный цвет;
  вес шрифта: полужирный;
}

Сопоставление без учета регистра

Селекторы атрибутов без учета регистра являются частью спецификации Selectors Level 4 Рабочей группы CSS. Как упоминалось выше, строки значений атрибутов по умолчанию чувствительны к регистру, но их можно изменить на нечувствительные к регистру, добавив i непосредственно перед закрывающей скобкой:

 [attribute="value" i] {
  /* Стили здесь будут применяться к элементам с:
    атрибут = "значение"
    атрибут = "значение"
    атрибут = "ЗНАЧЕНИЕ"
    . ..и т. д
  */
}

Сопоставление без учета регистра может быть очень удобно для нацеливания на атрибуты, содержащие непредсказуемый текст, написанный человеком. Например, предположим, что вы создавали речевой пузырь в приложении для чата и хотели добавить «машущую руку» к любым сообщениям с текстом «привет» в той или иной форме. Вы можете сделать это с помощью только CSS, используя нечувствительный к регистру поисковый механизм, чтобы поймать все возможные варианты:

См. сопоставление атрибутов CSS без учета регистра пера с помощью CSS-Tricks (@css-tricks) на CodePen.

Их комбинирование

Вы можете комбинировать селектор атрибута с другими селекторами, такими как тег, класс или идентификатор.

 дел[атрибут="значение"] {
  /* правила стиля здесь */
}

.модуль[атрибут="значение"] {
  /* правила стиля здесь */
}

#header[атрибут="значение"] {
  /* правила стиля здесь */
}

Или даже объединить несколько селекторов атрибутов. В этом примере выбираются изображения с замещающим текстом, включающим слово «человек» в качестве единственного значения или значение в списке, разделенном пробелами, и значение src , которое включает значение «lorem»:

 img[alt~="person"][src*="lorem"] {
  /* правила стиля здесь */
}

См. Комбинированные атрибуты пера и выбор только атрибутов с помощью CSS-Tricks (@css-tricks) на CodePen.

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

Селекторы атрибутов можно использовать в jQuery так же, как и любые другие селекторы CSS. В JavaScript вы можете использовать селекторы атрибутов с document.querySelector() и document.querySelectorAll() .

См. Селекторы атрибутов пера в JS и jQuery от CSS-Tricks (@css-tricks) на CodePen.

Родственные

  • класс
  • ID

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

  • The Skinny on Attribute Selectors
  • Селекторы атрибутов в MDN
  • Селекторы атрибутов в спецификации W3C CSS

Поддержка браузера

Chrome Сафари Фаерфокс Опера ИЭ Андроид iOS
Любой Любой Любой Любой 7+ Любой Любой

Добавление класса активной навигации к пункту меню на основе URL-адреса с помощью jQuery

  • add class jquery, addclass jquery, jquery add class, jquery addclass

В этом учебном пособии по jQuery вы узнаете, как добавить активный класс в пункт меню на основе URL-адреса страницы с помощью jQuery… чтобы вы могли выделить этот пункт меню. Вы узнаете:

  • как использовать метод jQuery addClass()
  • как получить URL-адрес текущей страницы в JavaScript
  • как разбить URL-адрес на массив частей
  • как использовать JavaScript pop() метод
  • как нацелить элемент на основе значения указанного атрибута с помощью jQuery

Посмотрите учебник ниже:

Ссылки, упомянутые в видео:

  • Ссылка на полный курс веб-разработчика со скидкой.
  • Моя страница ресурсов для веб-разработчиков с дополнительными фрагментами кода.

Вот код, который я использовал в видео:

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

Вам также может понравиться

6 способов создать отличный опыт внештатной работы, чтобы получить больше рекомендаций и постоянных клиентов в вашем внештатном бизнесе

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

Читать дальше »

7 способов значительно улучшить предоставление услуг в вашем внештатном бизнесе

Это забавно. На днях этот парень подошел ко мне в продуктовом магазине и сказал: «Эй, чувак, я могу сказать, что ты работаешь 9».0003

Читать дальше »

7 вещей, которые необходимо включить в процесс адаптации клиента, чтобы произвести хорошее первое впечатление

Мужчины доверяют своим ушам меньше, чем глазам Геродот Были ли сказаны более правдивые слова? Вот где вы находитесь сейчас. Вы рассказали хорошую игру.

Читать дальше »

Контракты с фрилансерами, условия оплаты, формы запросов и все детали получения оплаты (и не накрутки)

Есть замечательная история о Джоне Вудене, который выиграл 10 баскетбольных чемпионатов NCAA за 12 лет с Калифорнийским университетом в Лос-Анджелесе. Брюинз, а также был ответственным за

Читать дальше »

Как создать привлекательную услугу фрилансера — Часть 2

«Если сомневаетесь, обратитесь к источнику». «Звездные войны: Войны клонов» В нашем случае этот «источник» является нашим предложением. Всегда и навсегда, если вы

Читать дальше »

Как создать неотразимое предложение услуг фрилансера — Часть 1

Ценность субъективна. Это не случайный интернет-мудак, Джонни Фриланс, просто так сказал. Это наиболее общепринятая (безусловно) экономическая теория стоимости, называемая… сюрприз,

Подробнее »

Facebook

Twitter

Reddit

Pinterest

ДЖОН МОРРИС

Я ветеран веб-разработки с 15-летним стажем. Я работал с авторами бестселлеров и среднестатистическим соседом Джо. В настоящее время я сосредоточен на том, чтобы помогать другим фрилансерам строить свой внештатный бизнес и свой образ жизни.