Jquery выбрать по имени input

Имена

Селекторы

Материал из 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

Читайте также:  В имени выбранного каталога содержится недопустимый символ origin

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

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

Источник

jQuery для начинающих. Часть 4. Селекторы

Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM’е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…

Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

Селекторы в jQuery базируются на CSS селекторах, а так же поддерживают XPath. Дабы не закапываться в документацию буду приводить примеры, много примеров. Но начнем с самых азов…

Для начала нам понадобиться макет HTML странички (вполне типичный макет):

div id = «header» >
h1 > a href = «/» title = «homepage» > Title / a > / h1 >
h2 > Sub-title span > small description / span > / h2 >
/ div >
div id = «wrapper» >
div id = «content» >
div class = «post» >
h3 > Post Title / h3 >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span > Image Title / span >
img src = «/image1.jpg» alt = «Image Alt Text» / >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span class = «inner-banner» > Banner Text / span >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
/ div >
span id = «banner» > img src = «/banner1.jpg» alt = «Big Banner» / > / span >
div class = «post» >
h3 > Post Title / h3 >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span > Image Title / span >
img src = «/image2.jpg» alt = «Image Alt Text» / >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
span class = «inner-banner» > Banner Text / span >
p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor. / p >
/ div >
/ div >
/ div >
div id = «sidebar» >
ul >
li > a href = «/item0.html» > Menu Item 0 / a > / li >
li > a href = «/item1.html» > Menu Item 1 / a > / li >
li > a href = «/item2.html» > Menu Item 2 / a > / li >
li > a href = «/item3.html» > Menu Item 3 / a > / li >
/ ul >
/ div >
div id = «footer» >
Copyright © 2008
/ div >

А теперь приступим к выборкам:

Выбор элементов по Id либо ClassName аналогично используемому в CSS

$ ( ‘#sidebar’ ) ; // выбор элемента с id = sidebar
$ ( ‘.post’ ) ; // выбор элементов с class = post
$ ( ‘div#sidebar’ ) ; // выбор элемента div с id = sidebar
$ ( ‘div.post’ ) ; // выбор элементов div с class = post

Примечание: используйте валидные имена классов и id

Бродим по иерархии объектов в DOM’е

Простой выбор потомков:

$ ( ‘div span’ ) ; // выбор всех span элементов в элементах div

Аналогичный результат так же можно получить используя следующую конструкцию:

Выбор только непосредственных потомков

$ ( ‘div > span’ ) ; // выбор всех span элементов в элементах div, где span является прямым потомком div’a

Как же лучше поступить, что работает быстрее? Надо бы протестировать…

Так же селекторы можно группировать:

$ ( ‘div, span’ ) ; // выбор всех div и span элементов

$ ( ‘span + img’ ) ; // выбор всех img элементов перед которыми идут span элементы
$ ( ‘span

Выбор всех элементов, всех предков, всех потомков

Фильтры

$ ( ‘div:first’ ) ; // выбираем первый div в доме
$ ( ‘div:last’ ) ; // выбираем последний div в доме
$ ( ‘div:not(.red)’ ) ; // выбираем div’ы у которых нету класса red
$ ( ‘div:even’ ) ; // выбираем четные div’ы
$ ( ‘div:odd’ ) ; // выбираем нечетные div’ы
$ ( ‘div:eq(N)’ ) ; // выбираем div идущим под номером N в DOMe
$ ( ‘div:gt(N)’ ) ; // выбираем div’ы, индекс которых больше чем N в DOMe
$ ( ‘div:lt(N)’ ) ; // выбираем div’ы, индекс которых меньше чем N в DOMe
$ ( ‘:header’ ) ; // выбо заголовоков h1, h2, h3 и т.д.
$ ( ‘div:animated’ ) ; // выбор элементов с активной анимацией

Фильтры по контенту и видимости:

Читайте также:  Шаблоны портфолио мое имя картинки

Так же есть фильтры по атрибутам:

$ ( «div[id]» ) ; // выбор всех div с атрибутом id
$ ( «div[title=’my’]» ) ; // выбор всех div с атрибутом title=my
$ ( «div[title!=’my’]» ) ; // выбор всех div с атрибутом title не равного my
$ ( «div[title^=’my’]» ) ; // выбор всех div с атрибутом title начинающихся с my
//

так же стоит отдельно отметить следующий фильтр:

=’external’]» ) ; // выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробелом

В результате его работы будут выбраны следующие теги:

a href = «» rel = «external» > link / a > — да
a href = «» rel = «nofollow external» > link / a > — да
a href = «» rel = «external nofollow» > link / a > — да
a href = «» rel = «friend external follow» > link / a > — да
a href = «» rel = «external-link» > link / a > — нет

Для работы с элементами форм есть ряд селекторов позволяющий выбирать по типу элемента и фильтров — enabled/disabled/selected/checked:

$ ( «:text» ) ; // выбор всех input элементов с типом =text
$ ( «:radio» ) ; // выбор всех input элементов с типом =radio
// и так далее
$ ( «input:enabled» ) ; // выбор всех включенных элементов input
$ ( «input:checked» ) ; // выбор всех отмеченных чекбоксов

Фильтры так же можно группировать:

$ ( «div[name=city]:visible:has(p)» ) ; // выбор видимого div’a с именем city, который содержит тег p

Приведу так же ряд полезных селекторов для работы с элементами форм:

Если Вам хочеться опробывать как это все работает — то для этого можете воспользоваться тестовой страничкой

Слайды

Как-то слишком много текста получилось, пожалуй пора показывать слайды 😉

Источник

Как использовать селекторы 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
Просмотров: 296772
Правила перепечатки

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

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

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

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

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

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

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

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

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

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

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

Источник

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