Какова цель начального двоеточия в селекторе jQuery?

84

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

$(":input[type='radio']").wijradio();

Я бы написал вот так:

$('input[type=radio]').wijradio();

Они делают то же самое или мне чего-то не хватает?

Обратите внимание, что есть два отличия выше: первый селектор имеет префикс двоеточия и имеет кавычки для типа ввода.

jquery jquery-selectors Мортен Мертнер
источник
4
Один - это специализированный :inputселектор, а другой - универсальный Element.
мелламокб

Ответы:

85

:inputявляется расширением jQuery, а inputявляется селектором CSS.

textarea, button, И selectэлементы будут согласованы по первой, но не последней.

Последний быстрее, поэтому используйте его для своего конкретного radioпримера. Используйте, :inputесли вам нужны «все элементы формы», даже если они не являются строго <input>тегами. Даже в этом случае рекомендуется сначала использовать стандартный селектор CSS, а затем использовать его .filter(':input')для этого набора.

Поскольку: input является расширением jQuery, а не частью спецификации CSS, запросы, использующие: input, не могут воспользоваться преимуществом повышения производительности, обеспечиваемого собственным методом DOM querySelectorAll (). Чтобы добиться максимальной производительности при использовании: input для выбора элементов, сначала выберите элементы с помощью селектора на чистом CSS, а затем используйте .filter (": input").

В источнике 1.7.2 фильтр: input проверяет регулярное выражение на соответствие nodeName:

input: function( elem ) {
            return (/input|select|textarea|button/i).test( elem.nodeName );
},
Дэвид Руттка
источник
В этом есть смысл, спасибо! А тип-кавычки совершенно необязательны?
Мортен Мертнер
1
Честно говоря, я никогда не использовал [type=]с, :inputпотому что, если я ищу определенный тип, использование, :inputчтобы сначала получить их все, кажется долгим путем. Я понимаю, что для чистых селекторов CSS кавычки являются стандартными, но браузеры прощают. Вы можете быстро протестировать его здесь или без него. Reference.sitepoint.com/css/css3attributeselectors/demo
Дэвид Руттка,
Итак, $ (": checked") дает флажки ... это тоже расширение jquery?
Вишал Шарма
@David Ruttka: «браузеры снисходительны» применимо только к HTML и CSS в режиме причуд. Это утверждение не применяется к CSS в стандартном режиме. В некоторых случаях кавычки по закону могут быть опущены.
BoltClock
можно пример first select the elements using a pure CSS selector, then use .filter(":input").?
Poutrathor 01
17

то $("input")селектор будет выбирать только элементы ввода типа

в то время как $(":input") селектор перехватит все элементы input (такие как textarea, select, input и т. д.)

для получения дополнительной информации перейдите в официальную документацию jQuery о :inputселекторе по адресу:

http://api.jquery.com/input-selector/

Ярон У.
источник
6

:inputСелектор в основном выбирает все formэлементы управления (ввод, выберите текстовое поле, и кнопки элементов) , где , как inputвыбирает селекторных все элементы по имени тега input.

Поскольку радиокнопка является formэлементом, а также использует inputтег, они оба могут использоваться для выбора радиокнопки. Однако оба подхода различаются по способу нахождения элементов и, следовательно, имеют разные преимущества в производительности.

ШанкарСанголи
источник