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

jQuery добавить атрибут

Здравствуйте, уважаемые читатель блога LifeExample, хочу пополнить рубрику «jQuery & JavaScript примеры», новой статьей о том как в jQuery добавить атрибут для элемента верстки.

Например, тег по стандартам может содержать такие атрибуты как:

Но ничего не мешает нам использовать собственные атрибуты, например, так:

В этом примере пользовательский атрибут resolution будет содержать настоящее разрешение картинки.

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

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

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

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

Задача jQuery добавить атрибут

Дано:

Три див блока с заданными id

1
2
3
4
5
6
7
8
9
10
11

Требуется:

• При нажатии на каждый из блоков вывести код цвета в формате RGB

Решение:

На самом деле решений много, но в рамках данной темы нам надо с помощью jQuery добавить атрибуты для наших блоков. Поэтому решением будет являться вот этот JS код:

$ ( function ( ) {
$ ( ‘div[id=header]’ ) . attr ( ‘rgbcolor’ , ‘255,0,0’ ) ;
$ ( ‘div[id=content]’ ) . attr ( ‘rgbcolor’ , ‘0,255,0’ ) ;
$ ( ‘div[id=footer]’ ) . attr ( ‘rgbcolor’ , ‘0,0,255’ ) ;
$ ( ‘div’ ) . click ( function ( ) {
alert ( $ ( this ) . attr ( ‘rgbcolor’ ) ) ;
} ) ;
} ) ;

Данными строчками кода мы добавим к имеющимся блокам новые атрибуты rgbcolor, которые будут содержать информацию о цвете. Можно каждому блоку добавить атрибут прям в HTML вот так:

1
2
3
4
5
6
7
8
9
10
11

В любой момент мы можем С помощью jQuery удалить атрибут, также быстро как и создали его.

jQuery удалить атрибут

Удаление происходит также просто, как и добавление. Опираясь на предыдущее задание, удалить пользовательские атрибуты rgbcolor можно всего одной строкой

$ ( div ) . removeAttr ( ‘rgbcolor’ ) ;

Ну, или если нужно удалить атрибут только для одного блока content, то так:

$ ( ‘div[id=content]’ ) . removeAttr ( ‘rgbcolor’ ) ;

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

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

Чтобы поменять значение атрибута у элемента нам надо воспользоваться уже знакомой функцией attr .

Подобно тому, как мы задавали атрибут и его значение, также следует сделать если мы захотим его изменить

$(‘div[id=content]’).attr(‘rgbcolor’, ‘ Новое значение’ );

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

Теперь мы можем:

• С помощью jQuery добавить атрибут;
• С помощью jQuery удалить атрибут;
• С помощью jQuery изменить атрибут;

Читайте также похожие статьи:

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Урок №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. Метод attr(). Как получить или добавить атрибут к элементу

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

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

                .attr( attributeName )

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

                .attr( attributeName, value )

                Использование метода attr() имеет два основных преимущества:

                • 1. он может быть использован напрямую к выбранному jQuery-объекту, а также применим в цепочке вызовов для определенного селектора/объекта
                • 2. кроссбраузерная совместимость, что избавляет нас от излишней рутины в работе с разными атрибутами в различных браузерах

                Параметр value — это чаще всего строка, но для атрибутов типа value могут быть и числовые значения.

                Атрибуты и Properties (свойства)

                Существует разграничение между атрибутами и свойствами объектов, соответственно, для каждой из этих групп должен быть использован свой метод для получения/изменения данных. К примеру, к свойствам selectedIndex, nodeType, tagName, nodeName, ownerDocument, defaultChecked, и defaultSelected лучше всего получать доступ с помощью специального метода prop(). С атрибутами лучше всего работать, используя метод attr().

                Однако, не все так просто с булевыми атрибутами, например, «checked». Рассмотрим пример:

                Согласно спецификации W3C, свойство checked, когда оно присутствует, всегда возвращает true, даже если в его значении в кавычках будет пусто или содержится значение false. Метод attr() будет возвращать значение из кавычек, однако, при изменении чекбокса оно может не изменяться для некоторых браузеров. Соответственно, для булевых атрибутов лучше всего использовать метод prop(). Это замечание касается и «динамических» атрибутов — selected и value.

                1 2 3

                if ( elem.checked ) if ( $( elem ).prop( "checked" ) ) if ( $( elem ).is( ":checked" ) )

                Примеры использования attr()

                Допустим у нас есть элемент-картинка:

                Теперь мы хотим заменить данное изображение на другое, изменив атрибут src. Сделать это можно таким образом:

                $( "#test_photo" ).attr( "src", "other_img.jpg" );

                Одновременно меняем alt:

                $( "#test_photo" ).attr( "alt", "other_img" );

                Эти две операции можно сделать за одно действие, передав сразу массив атрибутов и их значений:

                1 2 3 4

                $( "#test_photo" ).attr(< alt: "other_img", src: "other_img.jpg" >);

                Если у нас несколько изображений и они имеют одно и то же содержимое атрибута alt с добавлением номера элемента, то мы можем пробежаться по ним в цикле и установить нужное содержимое:

                1 2 3

                $( "#test_photo" ).attr( "alt", function( i, val ) < return "other_img " + val; >);

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

                var altStr = $( "#test_photo" ).attr( "alt");

                Другие посты

                • Обработка изменения значения элементов input, checkbox, radio, textarea с помощью метода change() в jQuery
                • Работа с объектом Callbacks в jQuery: использование списка callback-функций
                • Ловим потерю фокуса. Метод blur() в jQuery
                • Вставка контента перед содержимым выбранного объекта. Метод before() в jQuery
                • Метод .appendTo() в jQuery. Добавление содержимого в конец элементов
                Похожие публикации:

                1. Как отследить нажатие на кнопку js
                2. Как разделить массив на символы
                3. Как составить резюме джуну фронтенду
                4. Почему включается блютуз сам по себе