Jquery обратиться к элементу по имени

Имена

Селекторы

Материал из JQuery

Селекторами называют строчные выражения, с помощью которых задаются условия поиска элементов DOM на странице. Вы можете находить интересующие вас элементы, используя выражения в стиле CSS 1-3, в дополнении с некоторыми другими возможностями. Селекторы позволяют находить элементы по различным признакам: значению атрибутов, содержимому элементов, родительским элементам, дочерним элементам, порядковым номерам, ну и конечно по именам классов, идентификаторов и/или тегов.

Например выражение $('div') осуществит поиск всех div-элементов на странице, $('.className') найдет все элементы с классом className и т. д. В данном примере селекторами являются строки 'div' и '.className', а $( ) — это функция, которая осуществляет поиск элементов по заданному селектору (а так же имеет массу других возможностей). Ниже представлены все организованные в jQuery селекторы и правила их комбинирования.

Замечание: Если вы используете метасимволы (#;&,.+*

‘:»!^$[]()=>|/ ) как часть имени идентификатора, класса или названия атрибута, не забывайте экранировать эти символы в селекторах с помощью \\. Например, если вам нужен элемент формы input с атрибутом name='names[]', то используйте следующий код: $('input[name=names\\[\\]]').

Содержание

Список селекторов

Базовые

«*» все элементы
«.className» элементы с классом className
«#idName» элемент (один!) с идентификатором idName
«tagName» элементы с заданным именем тега

Комбинированные селекторы

Селекторы, находящиеся в одном выражении, взаимодействуют между собой практически так же, как в правилах CSS

next» элементы из next, которые следуют за элементами из prev

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

= value]» элементы, у которых значение атрибута name содержит слово value «[name |= value]» элементы, у которых значение атрибута name имеют префикс value (равен value или имеет вид: «value-*») «[first][second][. » элементы, соответствующие всем заданным условиям на атрибуты одновременно

Простые фильтры

Фильтры, с помощью которых можно уточнить результат других селекторов. По назначению и синтаксису они очень похожи на псевдоклассы в CSS

«:focus» элемент, находящийся в фокусе
«:first» первый найденный элемент
«:last» последний найденный элемент
«:eq( )» элемент идущий под заданным номером среди выбранных
«:not(selector)» все найденные элементы, кроме указанных в selector
«:even» элементы с четными номерами позиций, в наборе выбранных элементов
«:odd» элементы с нечетными номерами позиций, в наборе выбранных элементов
«:gt( )» элементы с индексом превышающим n
«:lt( )» элементы с индексом меньшим, чем n
«:header» элементы, являющиеся заголовками (с тегами h1, h2 и.т.д.)
«:animated» элементы, которые в данный момент задействованы в анимации
«:hidden» невидимые элементы страницы
«:visible» видимые элементы страницы
«:lang(language)» элементы, в которых указаны языки содержимого
«:root» элемент, который является корневым в документе.

Фильтры по содержимому

«:contains(text)» элементы, содержащие заданный текст
«:empty» элементы без содержимого (без текста и других элементов)
«:has(selector)» элементы, которые содержат хотя бы один элемент из selector
«:parent» непустые элементы
Читайте также:  Что означает имя сирша

Фильтры дочерних элементов

Данные селекторы отфильтровывают элементы по их расположению в родительских элементах

«:first-child» элементы, расположенные первыми в своих родительских элементах
«:last-child» элементы, расположенные последними в своих родительских элементах
«:nth-child( )»
«:nth-child-last( )»
элементы, расположенные определенным образом в родительских элементах (четные, нечетные, идущие под заданным номером)
«:only-child» элементы, являющиеся единственными потомками в своих родительских элементах
«:only-of-type» элементы, являющиеся единственными, удовлетворяющими селектору, потомками в своих родительских элементах
«:first-of-type» те из выбранных элементов, которые первыми встречаются в своих родительских элементах
«:last-of-type» те из выбранных элементов, которые последними встречаются в своих родительских элементах
«:nth-first-of-type( )»
«:nth-last-of-type( )»
те из выбранных элементов, которые в определенную очередь встречаются в своих родительских элементах

Фильтры элементов форм

От автора jquery.page2page.ru

Мини-игра про поход за продуктами во время карантина.

Твой уникальный шанс напинать короновирусу буквально.

Источник

How can I select an element by name with jQuery?

Have a table column I’m trying to expand and hide:

jQuery seems to hide the td elements when I select it by class but not by element’s name.

For example, why does:

Note the HTML below, the second column has the same name for all rows. How could I create this collection using the name attribute?

14 Answers 14

Any attribute can be selected using [attribute_name=value] way. See the sample here:

If you have something like:

You can read all like this:

You could get the array of elements by name the old fashioned way and pass that array to jQuery.

note: the only time you would have a reason to use the «name» attribute should be for checkbox or radio inputs.

Or you could just add another class to the elements for selection.(This is what I would do)

You can get the name value from an input field using name element in jQuery by:

Frameworks usually use bracket names in forms, like:

They can be accessed by:

I’ve done like this and it works:

You forgot the second set of quotes, which makes the accepted answer incorrect:

You can get the element in JQuery by using its ID attribute like this:

Personally, what I’ve done in the past is give them a common class id and used that to select them. It may not be ideal as they have a class specified that may not exist, but it makes the selection a hell of a lot easier. Just make sure you’re unique in your classnames.

In summary, if you can’t select by Name, either use a complicated jQuery selector and accept any related performance hit or use Class selectors.

That should restrict jQuery from searching the «world».

Its could still be classed as a complicated selector, but it quickly constrains any searching to within the table with the ID of ‘#tableID’, so keeps the processing to a minimum.

An alternative of this if you’re looking for more than 1 element within #table1 would be to look this up separately and then pass it to jQuery as this limits the scope, but saves a bit of processing to look it up each time.

Performance

Today (2020.06.16) I perform tests for chosen solutions on MacOs High Sierra on Chrome 83.0, Safari 13.1.1 and Firefox 77.0.

Conclusions

Get elements by name

Details

I perform two tests for read elements by name (A,B,C,D) and hide that elements (E,F,G,H,I)

Читайте также:  Имя французского ученого разгадавшего в начале 19 века тайну иероглифов

Источник

Как использовать селекторы jQuery для выделения элементов страницы

Обычно селекторы jQuery используются для выбора элементов на странице, чтобы затем вызвать методы jQuery для манипулирования ими.

Селекторы jQuery основаны на селекторах CSS, и если вы знаете CSS, то уже имеет базовое представление об идее выбора элементов на странице.

В данном уроке мы рассмотрим селекторы, которые поддерживаются jQuery. Многие из них такие же как и селекторы CSS, но есть и специфические для jQuery. Для каждого селектора приведен пример использования для выбора элемента страницы.

В урок включены следующие разделы:

Основные селекторы

Основные селекторы вам знакомы, если вы когда-нибудь создавали хотя бы один шаблон CSS. скорее всего, вы будете использовать данные селекторы на протяжении 90% всего времени работы с jQuery:

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

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

Основные селекторы отлично подходят в случаях, если нужно выбрать все параграфы на странице или элемент, который нужно выбрать имеет класс CSS или ID.

Однако, иногда нужно выбрать определенный элемент, у которого нет класса или ID, и нет возможности просто добавить класс или ID к данному элементу в разметке. Такая ситуация может сложиться при использовании CMS с фиксированным шаблоном HTML или при работе с контентом, созданным пользователем.

В данной ситуации возможно сузить область выбора с помощью атрибута HTML элемента, который надо выбрать. Например, можно выбрать:

jQuery имеет много селекторов, которые можно использовать для выбора элементов по атрибуту:

=’value’]») Атрибут содержит префикс Выбирает элемент(ы), который содержит атрибут, у которого значение либо равно заданной строке, либо начинается с заданной строки с последующим дефисом. $(«div[attributeName|=’value’]»)

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

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

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

Выбор элементов по иерархии

Селектор Описание Пример
Ребенок Выбирает элемент(ы), которые являются ребенком (прямым потомком) заданного предка(ов). // Выбираем все элементы списка с классом «highlight», которые являются ребёнком для списка с ID «nav»:
$(«ul#nav > li.highlight»)
Потомок Выбирает элемент(ы), которые являются потомками (детьми, внуками и так далее) заданного предка(ов). Это более общая форма селектора Ребенок. // Выбираем все ссылки внутри списка с ID «nav»:
$(«ul#nav a»)
Следующий соседний элемент Выбирает элемент(ы), который следует непосредственно за заданным элементом, где оба элемента имеют одного и того же родителя. // Выбираем все параграфы, которые следуют непосредственно за заголовком H1:
$(«h1 + p»)
Следующий сестринский элемент Выбирает элемент(ы), который следует за другим элементом, где оба элемента являются потомками одного родителя. Это более обобщенная версия селектора следующий соседний элемент. // Выбираем все ячейки таблицы после ячейки, которая содержит слово «Hello»:
$(«td:contains(‘hello’)

td»)

Первый ребенок Выбирает элемент(ы), который является первым ребенком его родителя. // Выбираем первые пункты во всех списках на странице:
$(«li:first-child»)
Последний ребенок Выбирает элемент(ы), который является последним ребенком его родителя. // Выбираем последние пункты во всех списках на странице:
$(«li:last-child»)
N-й ребенок Выбирает элемент(ы), который является n-м ребенком его родителя (смотри примечание ниже). // Выбираем третьи пункты во всех списках на странице:
$(«li:nth-child(3)»)
Только ребенок Выбирает элемент(ы), которые являются ребенком родителей, у которых есть только дети. // Выбираем только элементы в списках с одним пунктом:
$(«li:only-child»)

В следующем примере выбирается первая ячейка всех нечетных строк в таблице, которая имеет id «myTable» :

Выбор полей формы

Аналогично, идентификация выбранных элементов в списке select или отмеченных чекбоксов в форме может быть утомительным занятием./

К счастью, jQuery обеспечивает несколько специфических для форм селекторов, которые облегчают жизнь:

Выбор элементов по их положению

jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:

Селектор Описание Примеры
:first Выбирает первый элемент в наборе отобранных элементов. // Выбираем первый параграф, который имеет класс «myClass»:
$(«p.myClass:first»)
:last Выбирает последний элемент в наборе отобранных элементов. // Выбираем последний параграф, который имеет класс «myClass»:
$(«p.myClass:last»)
:eq() Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса ( 0 = первый элемент, 1 = второй и так далее). // Выбираем з-й параграф, который имеет класс «myClass»:
$(«p.myClass:eq(2)»)
:lt() Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1). // /Выбираем первые 2 параграфа, которые имеют класс «myClass»:
$(«p.myClass:lt(2)»)
:gt() Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего. // Выбираем все параграфы, которые имеют класс «myClass», за исключением первых трех:
$(«p.myClass:gt(2)»)
:even Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы. // Выбираем 1й, 3й, 5й, и так далее параграфы, которые имеют класс «myClass»:
$(«p.myClass:even»)
:odd Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы // Выбираем 2й, 4й, 6й, и так далее параграфы, которые имеют класс «myClass»:
$(«p.myClass:odd»)

В следующем примере выбираются все ячейки в первых двух строках таблицы, которая имеет ID «myTable» :

Другие полезные селекторы jQuery

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

В следующем примере выбираются все элементы на странице, кроме заголовков h1 :

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-selectors/
Перевел: Сергей Фастунов
Урок создан: 19 Августа 2010
Просмотров: 296773
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Источник

Оцените статью
Имя, Названия, Аббревиатуры, Сокращения
Adblock
detector