jQuery - Атрибуты

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

Большинство этих атрибутов доступны через JavaScript как свойства узла DOM. Некоторые из наиболее распространенных свойств:

className
tagName
id
href
title
rel
src

Рассмотрим следующую разметку HTML для элемента изображения -

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

В разметке этого элемента имя тега - img, а разметка для id, src, alt, class и title представляет атрибуты элемента, каждый из которых состоит из имени и значения.

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

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

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

пример

Ниже приведен простой пример, который извлекает атрибут title тега <em> и устанавливает значение <div id = "divid"> с тем же значением:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

Это даст следующий результат -

Установить значение атрибута

В attr(name, value) может использоваться для установки именованного атрибута для всех элементов в обернутом наборе с использованием переданного значения.

пример

Ниже приводится простой пример, который устанавливает src атрибут тега изображения в правильное место -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

Это даст следующий результат -

Применение стилей

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

пример

Ниже приводится простой пример, который устанавливает class атрибут тега para <p> -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

Это даст следующий результат -

Атрибутные методы

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

Sr. No.	Методы и описание
1	attr (свойства) Установите объект типа "ключ-значение" как свойства для всех совпадающих элементов.
2	attr (ключ, fn) Установите для одного свойства вычисленное значение для всех совпадающих элементов.
3	removeAttr (имя) Удалите атрибут из каждого совпадающего элемента.
4	hasClass (класс) Возвращает истину, если указанный класс присутствует хотя бы в одном из набора совпадающих элементов.
5	removeClass (класс) Удаляет все или указанные классы из набора совпадающих элементов.
6	toggleClass (класс) Добавляет указанный класс, если он отсутствует, удаляет указанный класс, если он присутствует.
7	html () Получите HTML-содержимое (innerHTML) первого совпадающего элемента.
8	html (val) Установите HTML-содержимое каждого совпадающего элемента.
9	текст () Получите объединенное текстовое содержимое всех совпадающих элементов.
10	текст (val) Установите текстовое содержимое всех совпадающих элементов.
11	val () Получите входное значение первого совпадающего элемента.
12	val (val) Установите атрибут значения каждого совпадающего элемента, если он вызывается в <input>, но если он вызывается в <select> с переданным значением <option>, тогда будет выбран переданный параметр, если он вызывается в поле флажка или переключателя, тогда будут отмечены все соответствующие флажки и радиобоксы.

Примеры

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

Вот полный список методов атрибута в разных ситуациях -

Sr. No.	Селектор и описание
1	$("#myID").attr("custom") Это вернет значение атрибута custom для первого элемента, соответствующего идентификатору myID.
2	$("img").attr("alt", "Sample Image") Это устанавливает alt атрибут всех изображений на новое значение «Образец изображения».
3	$("input").attr({ value: "", title: "Please enter a value" }); Устанавливает значение всех элементов <input> в пустую строку, а также устанавливает Пример jQuery в строку. Введите значение .
4	$("a[href^=https://]").attr("target","_blank") Выбирает все ссылки с атрибутом href, начинающимся с https: //, и устанавливает для его целевого атрибута значение _blank .
5	$("a").removeAttr("target") Это удалит целевой атрибут всех ссылок.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Это изменит атрибут disabled на значение «disabled» при нажатии кнопки «Отправить».
7	$("p:last").hasClass("selected") Это возвращает истину, если последний тег <p> ассоциировал выбранный класс .
8	$("p").text() Возвращает строку, содержащую объединенное текстовое содержимое всех совпавших элементов <p>.
9	$("p").text("<i>Hello World</i>") Это установит "<I> Hello World </I>" как текстовое содержимое соответствующих элементов <p>.
10	$("p").html() Это возвращает HTML-содержимое всех совпадающих абзацев.
11	$("div").html("Hello World") Это установит для HTML-содержимого всех подходящих <div> значение Hello World .
12	$("input:checkbox:checked").val() Получить первое значение из установленного флажка.
13	$("input:radio[name=bar]:checked").val() Получите первое значение из набора переключателей.
14	$("button").val("Hello") Устанавливает атрибут значения каждого совпадающего элемента <button>.
15	$("input").val("on") Это проверит все переключатели или кнопки флажка, значение которых «включено».
16	$("select").val("Orange") Это позволит выбрать опцию «Оранжевый» в раскрывающемся списке с опциями «Оранжевый», «Манго» и «Банан».
17	$("select").val("Orange", "Mango") Это позволит выбрать параметры «Апельсин» и «Манго» в раскрывающемся списке с параметрами «Апельсин», «Манго» и «Банан».