jQuery селектор атрибутов [attribute!='value']

Определение и применение

jQuery селектор [attribute!='value'] выбирает элементы, которые либо не имеют указанный атрибут, или имеют указанный атрибут, но не с определенным значением.

$("selector:not([attribute='value'])")

jQuery синтаксис:

$("[attribute!='value']")

$("selector[attribute!='value']")

Добавлен в версии jQuery

Селектор в CSS

Пример использования

Селектор атрибутов [attribute!='value'] — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<a href="#">#</a><br />
<a href="basicweb.ru">basicweb.ru</a><br />
<a>No href attribute</a>

main.js

JavaScript

$(document).ready(function () {
    $("a[href!='#']").css('color', 'red') // выбираем все HTML элементы <a>, которые либо не имеют атрибут href, или имеют атрибут href, но не со значением #
    $("a:not([href='#'])").css('font-size', '2em') // выбираем все HTML элементы <a>, которые либо не имеют атрибут href, или имеют атрибут href, но не со значением #
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery селектора атрибутов [attribute!='value'] мы выбрали все элементы <a> (гиперссылки) в документе, которые, либо не имеют атрибут href, или имеют атрибут href, но не со значением # и стилизовали их с использованием CSS свойства color (цвет текста). Кроме того с использованием jQuery селектора отрицания мы выбрали те же элементы и установили для них размер шрифта 2em.