Как добавить атрибут jquery

Урок №11 — Работа с атрибутами

В видео мы научимся работать с различными атрибутами. Мы научимся добавлять атрибуты, проверять атрибуты и совершать действия в зависимости от значения атрибута.

Видеоурок

jQuery дает большие возможности при работе с различными атрибутами HTML тегов. За счёт jQuery вы можете добавить класс, id, подсказку и множество других атрибутов к любому тегу.

Чтобы добавить атрибут к тегу необходимо выбрать тег через jQuery и применить к нему метод attr () . Он принимает два параметра: название атрибута, а также его значение.

$("p:last-child").attr("title", "Это последний абзац в документе");

В коде выше мы добавляем всплывающую подсказку к последнему абзацу на HTML-странице.

Весь код будет доступен после подписки на проект!

.attr()

Получает/устанавливает значение атрибутов выбранных элементов.

version added: 1.0 .attr( attributeName )

version added: 1.0 .attr( attributeName, value )

attributeName
Тип: Строка
Имя атрибута, которому нужно задать значение.

version added: 1.0 .attr( attributes )

attributes
Тип: Объект
Объект типа ключ : значение

version added: 1.1 .attr( attributeName, function(index, attr) )

Метод.attr() достаёт значение атрибута первого элемента, который ему встретится. Для того чтобы получить значение каждого из элементов, нужно воспользоваться такими конструкциями как .each() или .map().

Начиная с jQuery 1.6, метод .attr() возвращает undefined для тех атрибутов, значение которых не было задано. Для получения и выставления таких опций как checked, selected, или disabled используйте метод .prop().

Примеры

Пример: отобразить состояние элемента формы.

    p < margin: 20px 0 0 >b    Check me    

Пример: достать атрибут title первого элемента

    em < color:blue; font-weight:bold; >div    
Once there was a large dinosaur.
 The title of the emphasis is:    

Предположим, у нас есть следующее изображение:

Задаём один атрибут

Для задачи значения атрибуту, в качестве первого аргумента передаём имя, в качестве второго, значение:

$('#greatphoto').attr('alt', 'Beijing Brush Seller');

$('#greatphoto') .attr('title', 'Photo by Kelly Clark');

Задаём сразу несколько атрибутов

Для смены и выставления значения сразу нескольких атрибутов, передадим простой JavaScript объект вида ключ:значение. Каждый ключ — это атрибут:

$('#greatphoto').attr(< alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark' >);

В этом случае имена атрибутов брать в кавычки не обязательно

Предупреждение: при работе с атрибутом ‘class’, его имя нужно взять в кавычки!

Заметка: jQuery не позволит изменить значение атрибута type элементов или , выкинет ошибку. Дело в том, что атрибут type не можут быть изменён в Internet Explorer.

Динамическое формирование значения атрибутов

С помощью функции, мы можем сформировать динамическое значение атрибута, используя уже существующие значения. К примеру, расширим существующее значение атрибута title:

$('#greatphoto').attr('title', function(i, val) < return val + ' - photo by Kelly Clark' >);

Это может быть полезно для изменения атрибутов сразу большого числа элементов.

Примеры

Пример: Задаём атрибуты всем элементам на странице.

    img < padding:10px; >div      
Attribute of Ajax
    

Пример: задаём id элементам div, в зависимости от их расположения на странице

    div < color:blue; >span < color:red; >b   
Zero-th
 
First
 
Second
    

Пример: Задаём значение атрибута src, в зависимости от значения атрибута title.

Связанные уроки:

• 

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

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

Шпаргалка jQuery:

• Ajax
  • Global Ajax Event Handlers
    • .ajaxComplete()
      • :button
      • :checkbox
      • :checked
      • :disabled
      • :enabled
      • :file
      • :focus
      • :image
      • .serializeArray()
      • .serialize()
      • jQuery.param()
      • jQuery.ajax()
      • jQuery.ajaxSetup()
      • jQuery.ajaxPrefilter()
      • jQuery.ajaxTransport()
      • jQuery.get()
      • jQuery.post()
      • .load()
      • jQuery.getJSON()
      • jQuery.getScript()
      • .serialize()
      • .serializeArray()
      • jQuery.param()
      • .val()
      • .blur()
      • .change()
      • .focus()
      • .addClass()
      • .hasClass()
      • .removeClass()
      • .toggleClass()
      • .html()
      • .removeAttr()
      • .prop()
      • .removeProp()
      • .attr()
      • .val()
      • Collection Manipulation
        • jQuery.param()
        • .data()
        • .removeData()
        • Class Attribute
          • .addClass()
          • .hasClass()
          • .removeClass()
          • .toggleClass()
          • .clone()
          • .wrap()
          • .wrapAll()
          • .wrapInner()
          • .unwrap()
          • .append()
          • .appendTo()
          • .html()
          • .text()
          • .prepend()
          • .prependTo()
          • .after()
          • .before()
          • .insertAfter()
          • .insertBefore()
          • .unwrap()
          • .remove()
          • .empty()
          • .detach()
          • .replaceAll()
          • .replaceWith()
          • .removeProp()
          • .removeAttr()
          • .prop()
          • .attr()
          • .val()
          • .css()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • .offset()
          • .position()
          • .scrollLeft()
          • .scrollTop()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • jQuery.holdReady()
          • jQuery()
          • jQuery.noConflict()
          • jQuery.when()
          • .addClass()
          • .hasClass()
          • .removeClass()
          • .toggleClass()
          • .css()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • .offset()
          • .position()
          • .scrollLeft()
          • .scrollTop()
          • .clearQueue()
          • .dequeue()
          • .data()
          • jQuery.hasData()
          • jQuery.removeData()
          • jQuery.dequeue()
          • .removeData()
          • jQuery.data()
          • .queue()
          • Custom
            • .clearQueue()
            • .dequeue()
            • .queue()
            • .clearQueue()
            • .dequeue()
            • jQuery.dequeue()
            • jQuery.data()
            • .queue()
            • jQuery.proxy()
            • callbacks.add()
            • callbacks.disable()
            • callbacks.disabled()
            • callbacks.empty()
            • callbacks.fire()
            • callbacks.fired()
            • callbacks.fireWith()
            • callbacks.has()
            • callbacks.lock()
            • callbacks.locked()
            • callbacks.remove()
            • jQuery.Callbacks()
            • deferred.always()
            • deferred.done()
            • deferred.fail()
            • deferred.notify()
            • deferred.notifyWith()
            • deferred.progress()
            • deferred.promise()
            • deferred.reject()
            • deferred.rejectWith()
            • deferred.resolve()
            • deferred.resolveWith()
            • deferred.state()
            • deferred.then()
            • Basics
              • Универсальный селектор (“*”)
              • jQuery( «.class» )
              • Селектор элементов (“element”)
              • Селектор ID (“#id”)
              • Множественный (“selector1, selector2, selectorN”)
              • Селектор по префиксу [name|=”value”]
              • Селектор содержащий значение [name*=»value»]
              • Селектор, содержащий слово [name~=»value»]
              • Селектор по атрибуту, на конце которого [name$=»value»]
              • Селектор по равенству [name=»value»]
              • Селектор по неравенству [name!=»value»]
              • Значение атрибута начинается с [name^=»value»]
              • Селектор по наличию атрибута [name]
              • Множественный селектор по атрибуту [name=»value»][name2=»value2″]
              • :animated Selector
              • :eq()
              • :even
              • :first
              • :focus
              • :gt()
              • :header
              • :lang()
              • :last
              • :lt()
              • :first-child
              • :first-of-type
              • :last-child
              • :last-of-type
              • :nth-child()
              • :nth-last-child()
              • :nth-last-of-type()
              • :nth-of-type()
              • :only-child
              • :only-of-type
              • :contains()
              • :empty
              • :has()
              • :parent
              • Browser Events
                • .resize()
                • .scroll()
                • .ready()
                • .bind()
                • .delegate()
                • jQuery.proxy()
                • .off()
                • .one()
                • .trigger()
                • .triggerHandler()
                • .unbind()
                • .undelegate()
                • event.currentTarget
                • event.data
                • event.delegateTarget
                • event.isDefaultPrevented()
                • event.isImmediatePropagationStopped()
                • event.isPropagationStopped()
                • event.metaKey
                • event.namespace
                • event.pageX
                • event.pageY
                • event.preventDefault()
                • event.relatedTarget
                • event.result
                • event.stopImmediatePropagation()
                • event.stopPropagation()
                • event.target
                • event.timeStamp
                • event.type
                • event.which
                • .blur()
                • .change()
                • .focus()
                • .focusin()

                Работа с атрибутами в jQuery

                HTML-атрибуты – это дополнительные значения для установления различных характеристик HTML-элементам в HTML-коде. С помощью них можно определённым образом настроить элемент и отрегулировать его поведение. Все атрибуты указываются внутри открытого тега и отделяются друг от друга посредством пробела.

                

                Кроме атрибутов у нас имеются ещё DOM-свойства , которые в большинстве случаев являются их отражением.

                Образуются DOM-свойства во время чтения браузером HTML-кода, т.е. при строительстве DOM. DOM – это объектная модель документа. При её создании теги становятся элементами (узлами), а HTML-атрибуты переводятся в соответствующие DOM-свойства этих элементов.

                Для сведений, атрибут, который мы устанавливаем в HTML-коде называется атрибутом содержимого . А DOM-свойство – IDL-атрибутом .

                Более подробно прочитать про атрибуты, DOM-свойства и их отличия можно в этой статье.

                В заключение можно отметить, что при написании кода на JavaScript зачастую лучше использовать именно DOM-свойства, а не соответствующие им атрибуты. Кстати, в jQuery для выполнения операций с DOM-свойствами имеется специальный метод prop() . Описывается он в этой статье.

                А сейчас познакомимся с методами jQuery для работы с атрибутами.

                Методы attr() и removeAttr()

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

                • attr() – используется, когда нужно, узнать значение требуемого атрибута, добавить к элементу новый атрибут или изменить текущее значение некоторого атрибута на новое;
                • removeAttr() – применяется для удаления определённого атрибута у элемента или набора элементов.

                Получение значения атрибута

                Узнать значение определённого атрибута в jQuery осуществляется через attr() :

                // attributeName – атрибут, значение которого нужно получить .attr('attributeName')

                Например, получим значение атрибута href элемента #search :

                Яндекс  

                При применении attr() к набору элементов, этот метод вернёт значение указанного атрибута только для первого элемента.

                .
                 
                .
                 
                .
                  

                Для того, чтобы вернуть значение указанного атрибута для каждого элемента набора, можно воспользоваться each() или map() .

                JavaScript

                $('.section').each(function() { console.log( $(this).attr('id') ); }); // Результат: // section-1 // section-2 // section-3

                Если атрибута, значение которого мы хотим получить у элемента нет, то attr() вернёт undefined :

                .
                  

                Этот сценарий можно использовать для проверки наличия определённого атрибута у элемента.

                Например, проверим имеется ли у элемента #logo» атрибут title :

                Изменение значения атрибута

                Изменение значения атрибута осуществляется также посредством attr() .

                Вариант синтаксиса attr() для установки значения одному атрибуту:

                JavaScript

                // attributeName – имя атрибута // value – новое значение (строка, число или null) .attr('attributeName', value)

                Кстати, если установить атрибуту null , то он будет удалён.

                Например, поменяем значение атрибута src элемента #logo :

                Установка сразу нескольких атрибутов элементу осуществляется в формате объекта:

                JavaScript

                // attributes – объект, содержащий набор пар «атрибут: значение» .attr(attributes)

                Пример установки элементу #logo несколько атрибутов:

                Кроме этого в jQuery имеется также вариант установки атрибута с помощью функции:

                JavaScript

                // attr - имя атрибута .attr('attr', function(index, value) { // . })

                В этом случае значение атрибута будет определяться результатом (строка или число), возвращаемой функцией. Если функция ничего не возвращает или undefined , то текущее значение не изменяется (оно остаётся прежним).

                Обратиться к текущему элементу в функции можно с помощью ключевого слова this .

                • index — индекс элемента в наборе;
                • valueAttr — текущее значение атрибута;
                • One
                • Two
                • Three
                • Four
                • Five

                Добавление нового атрибута

                В jQuery, установка нового атрибута или изменение существующего — это одна и также операция.

                Пример, в котором всем ссылкам на странице установим атрибут rel со значением nofollow :

                JavaScript

                $('a').attr('rel', 'nofollow');

                Как в jQuery удалить атрибут у элемента

                В jQuery удаление атрибута обычно осуществляется с помощью метода removeAttr() :

                JavaScript

                // attributeName - атрибут, который нужно удалить .removeAttr('attributeName')

                Например, удалим атрибут rel у всех ссылок на странице:

                JavaScript

                $('a[rel]').removeAttr('rel');

                В jQuery удалить атрибут можно также с помощью attr() . Для этого ему нужно в качестве значения установить null .

                $('a[rel]').attr('rel', null);

                Ещё темы этого раздела:

                • Добавление и удаление DOM-свойств (disabled, checked, selected и др.)
                • Добавление и удаление классов
                • Получение и установка CSS-свойств элементам
                • data-атрибуты и внутреннее хранилище jQuery

                Как установить атрибут required с jQuery?

                В этой записи я хочу поделиться простым способом установки required для поля с помощью jQuery.

                И так приступим. Ниже я представил код, с помощью которого реализовано все, что описано выше.

                Демо

                Как все работает?

                Чтобы установить required атрибут с помощью jQuery, вы можете воспользоваться .prop() функцией или .attr() .

                Первый вариант — .prop()

                Чтобы установить: $(‘input’).prop(‘required’, true)

                Чтобы убрать: заменить true на false .

                Прочитать про .prop() на официальном сайте jQuery можно тут.

                Второй вариант — .attr()

                Чтобы установить: $(‘input’).attr(‘required’, ‘required’)

                Чтобы убрать: $(‘input’).removeAttr(‘required’) .

                .removeAttr() убирает любые атрибуты элемента. Например, если вы хотите убрать width (ширину), то это можно сделать вот так — $(‘input’).removeAttr(‘width’) .

                Прочитать про .attr() на официальном сайта jQuery можно тут.