Jquery узнать имя тега

Имена
Содержание

Статья, в которой рассмотрим, какие в jQuery есть методы для чтения и изменения содержимого HTML элементов.

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

Чтение HTML контента элемента

Например, получим HTML содержимое элемента с идентификатором ( id ) contact :

Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:

Для того чтобы получить HTML контент всех найденных элементов необходимо воспользоваться циклом (например, each ):

Изменение HTML контента элемента

Например, заменим содержимое элемента ul :

Использование функции для замены HTML контента элемента:

Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):

Получение текстового содержимого элемента

Например, получим текстовое содержимое элемента p и выведем его в контент другого элемента:

Метод text также как и html возвращает содержимое только первого элемента выборки (если в ней присутствуют несколько элементов).

Замена контента элемента указанным текстом

Метод text может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.

После выполнения, элемент div с классом info будет иметь следующий HTML код:

На экране данный элемент будет выглядеть так:

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

Использование в качестве параметра метода text функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):

Удаление контента элемента

Например, удалим содержимое всех элементов с классом vote :

Получение значения элемента формы

Например, получим значение элемента input :

Получим значение элемента select :

Если элемент select имеет множественный выбор (атрибут multiple ), то метод val возвратит в качестве результата массив, содержащий значение каждой выбранной опции ( option ). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение null ).

Читайте также:  Церковные имена мужские в апреле

Установка значения элементу формы

Например, при клике на кнопку установим элементу input её текст:

Данный метод устанавливает значение для всех элементов набора, к которому он применяется.

Например, преобразуем все буквы значения элемента input после потеря фокуса в прописные:

Например, поменяем значение элемента select :

Например, присвоим значения элементу select с множественным выбором ( multiple ):

Источник

Манипулирование атрибутами элементов в jQuery

Данный урок посвящён чтению и изменению атрибутов элементов в jQuery.

Атрибуты — это пара имя/значение, которая назначается элементам в теге. Примеры атрибутов (href, title, src, class):

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

Для работы с классами CSS существуют специальные методы jQuery, которые описаны в другом уроке. При работе над проектом в jQuery приходится очень часто манипулировать классами CSS, а атрибут class может содержать несколько имён классов, что значительно усложняет работу с ним, по сравнению с другими атрибутами.

Читаем значение атрибута

Чтение значения атрибута элемента осуществляется просто. Нужно только вызвать метод attr() для объекта jQuery, который содержит элемент, передав ему имя атрибута для чтения. Метод возвращает значение атрибута:

Если ваш объект jQuery содержит несколько элементов, метод attr() читает значения атрибута только для первого элемента из набора.

Устанавливаем значения атрибутов

Метод attr() можно использовать также для добавления или изменения значений атрибутов:

Существует три способа использовать метод attr() для добавления или изменения атрибутов:

Устанавливаем один атрибут

Чтобы установить или изменить атрибут элемента нужно вызвать метод attr() с указанием имени атрибута и значения. Например:

Также можно установить один и тот же атрибут для нескольких элементов:

Устанавливаем несколько атрибутов с использованием карты

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

В следующем примере устанавливаются два атрибута для элемента img одновременно:

Также вы можете устанавливать атрибуты для нескольких элементов:

Устанавливаем атрибуты с использованием возвратной функции

Возвратная функция должна принимать два аргумента:

Возвращаемое функцией значение используется для замещения значения атрибута.

В примере используется возвратная функция для добавления атрибута alt каждому изображению на странице на основании положения изображения и его атрибута src :

Читайте также:  Netbios имя домена как узнать

Удаление атрибута

Вы также можете вызвать метод removeAttr() для объекта jQuery, который содержит несколько элементов. Метод removeAttr() удалит заданный атрибут изо всех элементов:

Резюме

В данном уроке были рассмотрены вопросы работы с атрибутами элементов в jQuery:

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Селекторы

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

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

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

Источник

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

Adblock
detector