jquery-selectors get - Доступ к css ":после" селектор с jQuery




element by (4)

Вы можете добавить стиль для : после аналогичного html-кода.
Например:

var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');

У меня есть следующий css:

.pageMenu .active::after {
    content: '';
    margin-top: -6px;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 14px solid white;
    border-left: 14px solid transparent;
    border-bottom: 14px solid white;
    position: absolute;
    right: 0;
}

Я хотел бы изменить ширину границы верхней, левой и нижней границы с помощью jQuery. Какой селектор я использую для доступа к этому элементу? Я попробовал следующее, но, похоже, он не работает.

$('.pageMenu .active:after').css(
        {
            'border-top-width': '22px',
            'border-left-width': '22px',
            'border-right-width': '22px'
        }
    )

Если вы используете встроенный jQuery after() с пустым значением, он создаст динамический объект, который будет соответствовать вашему :after селектора CSS.

$('.active').after().click(function () {
    alert('clickable!');
});

См. Документацию по jQuery .


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

CSS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS:

$('.pageMenu .active').toggleClass('changed');

UPDATE: в то время как невозможно напрямую изменить :after содержимого, есть способы прочитать и / или переопределить его с помощью JavaScript. См. «Манипулирование псевдоэлементов CSS с помощью jQuery (например: before и: after)» для получения полного списка методов.


Императивный → декларативный

В jQuery селектора используются для поиска элементов DOM а затем привязывают / регистрируют обработчики событий. Когда событие запускается, этот (императивный) код выполняет обновление / изменение DOM.

В AngularJS вы хотите думать о представлениях, а не о элементах DOM. Представления (декларативные) HTML, содержащие директивы AngularJS. Директивы настраивают обработчики событий за кулисами для нас и дают нам динамическую привязку данных. Селекторы редко используются, поэтому потребность в идентификаторах (и некоторых типах классов) значительно уменьшается. Представления привязаны к моделям (через области). Представления - это проекция модели. Модели изменения событий (т. Е. Данные, свойства области) и представления, которые проектируют эти модели, обновляются автоматически.

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

Разделение проблем

jQuery использует ненавязчивый JavaScript - поведение (JavaScript) отделено от структуры (HTML).

AngularJS использует контроллеры и директивы (каждый из которых может иметь свой собственный контроллер и / или компилировать и связывать функции), чтобы удалить поведение из представления / структуры (HTML). Угловые также имеют службы и фильтры, которые помогают разделить / упорядочить ваше приложение.

См. Также https://.com/a/14346528/215945

Дизайн приложений

Один подход к разработке приложения AngularJS:

  1. Подумайте о своих моделях. Создавайте службы или свои собственные объекты JavaScript для этих моделей.
  2. Подумайте, как вы хотите представить свои модели - ваши взгляды. Создавайте HTML-шаблоны для каждого представления, используя необходимые директивы для получения динамической привязки данных.
  3. Прикрепите контроллер к каждому виду (используя ng-view и routing, или ng-controller). Попросите диспетчера найти / получить только любые данные модели, которые должны выполнять представления. Сделайте контроллеры как можно более тонкими.

Прототипное наследование

Вы можете многое сделать с jQuery, не зная о том, как работает прототипное наследование JavaScript. При разработке приложений AngularJS вы избежите некоторых распространенных ошибок, если у вас есть хорошее понимание наследования JavaScript. Рекомендуемое чтение: Каковы нюансы объема прототипа / прототипного наследования в AngularJS?





jquery css jquery-selectors