Учебники

JQuery — Атрибуты

Ноябрь 20, 2018

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

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

  • имя класса
  • название тэга
  • Я бы
  • HREF
  • заглавие
  • отн
  • ЦСИ

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

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

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

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

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

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

пример

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

Live Demo 

<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 тега изображения в правильном месте.

Live Demo 

<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 (классы) можно использовать для применения определенных таблиц стилей ко всем соответствующим элементам. Вы можете указать несколько классов, разделенных пробелом.

пример

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

Live Demo 

<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 (ключ, фн)

Установите единственное свойство в вычисляемое значение для всех соответствующих элементов.

3 removeAttr (имя)

Удалить атрибут из каждого сопоставленного элемента.

4 hasClass (класс)

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

5 removeClass (класс)

Удаляет все или указанный класс (ы) из набора соответствующих элементов.

6 toggleClass (класс)

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

7 html ()

Получить HTML-содержимое (innerHTML) первого соответствующего элемента.

8 html (val)

Установите HTML-содержание каждого соответствующего элемента.

9 текст ()

Получить объединенное текстовое содержимое всех соответствующих элементов.

10 текст (val)

Установите текстовое содержимое всех соответствующих элементов.

11 val ()

Получить входное значение первого соответствующего элемента.

12 val (val)

Задайте атрибут значения каждого соответствующего элемента, если он вызывается для <input>, но если он вызывается для <select> со переданным значением <option>, тогда будет выбран переданный параметр, если он вызывается в переключателе или переключателе все соответствующие флажки и радиобоксы будут проверены.

Установите объект ключ / значение в качестве свойств для всех соответствующих элементов.

Установите единственное свойство в вычисляемое значение для всех соответствующих элементов.

Удалить атрибут из каждого сопоставленного элемента.

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

Удаляет все или указанный класс (ы) из набора соответствующих элементов.

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

Получить HTML-содержимое (innerHTML) первого соответствующего элемента.

Установите HTML-содержание каждого соответствующего элемента.

Получить объединенное текстовое содержимое всех соответствующих элементов.

Установите текстовое содержимое всех соответствующих элементов.

Получить входное значение первого соответствующего элемента.

Задайте атрибут значения каждого соответствующего элемента, если он вызывается для <input>, но если он вызывается для <select> со переданным значением <option>, тогда будет выбран переданный параметр, если он вызывается в переключателе или переключателе все соответствующие флажки и радиобоксы будут проверены.

Примеры

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

$ ( «# MyId»). атр ( «обычай»)

Это вернет значение атрибута custom для первого элемента, совпадающего с идентификатором myID.

$ («img»). attr («alt», «Образец изображения»)

Это устанавливает атрибут alt всех изображений в новое значение «Образец изображения».

$ («input»). attr ({value: «», title: «Пожалуйста, введите значение»});

Устанавливает значение всех элементов <input> в пустую строку, а также устанавливает в качестве примера jQuery строку. Введите значение .

$ ( «а [HREF = https: //]») .attr ( «мишень», «_blank»)

Выбирает все ссылки с атрибутом href, начиная с https: //, и устанавливает для его целевого атрибута значение _blank .

$ ( «а»). removeAttr ( «цель»)

Это удалит целевой атрибут всех ссылок.

$ («form»). submit (function () {$ («: submit», this) .attr («disabled», «disabled»);});

Это изменит отключенный атрибут на значение «отключено» при нажатии кнопки «Отправить».

$ ( «р: последний»). hasClass ( «выбрано»)

Возвращает true, если последний тег <p> имеет связанный выбранный класс.

$ ( «р»). Текст ()

Возвращает строку, содержащую объединенное текстовое содержимое всех соответствующих элементов <p>.

$ («p»). text («<i> Hello World </ i>»)

Это установит «<I> Hello World </ I>» как текстовое содержимое соответствующих элементов <p>.

$ ( «р»). HTML ()

Это возвращает HTML-содержимое всех соответствующих абзацев.

$ («div»). html («Hello World»)

Это установит HTML-содержимое всех соответствующих <div> в Hello World .

$ ( «вход: Флажок: проверено»). Вал ()

Получить первое значение из отмеченного флажка.

$ ( «вход: радио [имя = бар]: проверено»). Вал ()

Получить первое значение из набора переключателей.

$ ( «кнопка»). Вал ( «Hello»)

Устанавливает атрибут значения каждого соответствующего элемента <button>.

$ ( «вход»). Вал ( «на»)

Это будет проверять все радио или флажок кнопку, значение которой «вкл».

$ ( «выбрать»). Val ( «Orange»)

Это выберет опцию Orange в выпадающем списке с опциями Orange, Mango и Banana.

$ («выберите»). val («апельсин», «манго»)

Это выберет параметры Orange и Mango в выпадающем списке с параметрами Orange, Mango и Banana.

51
Share: