jQuery - Atributos

Alguns dos componentes mais básicos que podemos manipular quando se trata de elementos DOM são as propriedades e atributos atribuídos a esses elementos.

A maioria desses atributos está disponível por meio de JavaScript como propriedades do nó DOM. Algumas das propriedades mais comuns são -

className
tagName
id
href
title
rel
src

Considere a seguinte marcação HTML para um elemento de imagem -

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

Na marcação desse elemento, o nome da tag é img e a marcação para id, src, alt, class e title representa os atributos do elemento, cada um dos quais consiste em um nome e um valor.

jQuery nos dá os meios para manipular facilmente os atributos de um elemento e nos dá acesso ao elemento para que também possamos alterar suas propriedades.

Obter valor de atributo

o attr() O método pode ser usado para buscar o valor de um atributo do primeiro elemento no conjunto correspondido ou definir valores de atributo em todos os elementos correspondidos.

Exemplo

A seguir está um exemplo simples que busca o atributo title da tag <em> e define o valor <div id = "divid"> com o mesmo valor -

<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>

Isso produzirá o seguinte resultado -

Definir valor de atributo

o attr(name, value) método pode ser usado para definir o atributo nomeado em todos os elementos no conjunto agrupado usando o valor passado.

Exemplo

A seguir está um exemplo simples que define src atributo de uma tag de imagem para um local correto -

<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>

Isso produzirá o seguinte resultado -

Aplicando Estilos

o addClass( classes )O método pode ser usado para aplicar folhas de estilo definidas em todos os elementos correspondentes. Você pode especificar várias classes separadas por espaço.

Exemplo

A seguir está um exemplo simples que define class atributo de uma tag 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>

Isso produzirá o seguinte resultado -

Métodos de Atributo

A tabela a seguir lista alguns métodos úteis que você pode usar para manipular atributos e propriedades -

Sr. Não.	Métodos e Descrição
1	attr (propriedades) Defina um objeto de chave / valor como propriedades para todos os elementos correspondentes.
2	attr (chave, fn) Defina uma única propriedade com um valor calculado, em todos os elementos correspondentes.
3	removeAttr (nome) Remova um atributo de cada um dos elementos correspondentes.
4	hasClass (classe) Retorna verdadeiro se a classe especificada estiver presente em pelo menos um do conjunto de elementos correspondentes.
5	removeClass (classe) Remove todas ou a (s) classe (s) especificada (s) do conjunto de elementos correspondentes.
6	toggleClass (classe) Adiciona a classe especificada se não estiver presente, remove a classe especificada se estiver presente.
7	html () Obtenha o conteúdo html (innerHTML) do primeiro elemento correspondente.
8	html (val) Defina o conteúdo html de cada elemento correspondente.
9	texto () Obtenha o conteúdo de texto combinado de todos os elementos correspondentes.
10	texto (val) Defina o conteúdo do texto de todos os elementos correspondentes.
11	val () Obtenha o valor de entrada do primeiro elemento correspondente.
12	val (val) Defina o atributo de valor de cada elemento correspondido se for chamado em <input>, mas se for chamado em <select> com o valor <option> passado, a opção passada seria selecionada, se for chamado na caixa de seleção ou caixa de rádio, então todas as caixas de seleção e opções correspondentes seriam marcadas.

Exemplos

Semelhante à sintaxe e aos exemplos acima, os exemplos a seguir dariam a você uma compreensão sobre o uso de vários métodos de atributo em diferentes situações -

Aqui está uma lista completa de métodos de atributo em diferentes situações -

Sr. Não.	Seletor e descrição
1	$("#myID").attr("custom") Isso retornaria o valor do atributo customizado para o primeiro elemento correspondente ao ID myID.
2	$("img").attr("alt", "Sample Image") Isso define o alt atributo de todas as imagens para um novo valor "Imagem de amostra".
3	$("input").attr({ value: "", title: "Please enter a value" }); Define o valor de todos os elementos <input> para a string vazia, bem como define o exemplo de jQuery para a string Insira um valor .
4	$("a[href^=https://]").attr("target","_blank") Seleciona todos os links com um atributo href começando com https: // e define seu atributo target como _blank .
5	$("a").removeAttr("target") Isso removeria o atributo de destino de todos os links.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Isso modificaria o atributo disabled para o valor "disabled" ao clicar no botão Enviar.
7	$("p:last").hasClass("selected") Este retorno é verdadeiro se a última tag <p> tiver uma classe associada selecionada .
8	$("p").text() Retorna a string que contém o conteúdo de texto combinado de todos os elementos <p> correspondentes.
9	$("p").text("<i>Hello World</i>") Isso definiria "<I> Hello World </I>" como conteúdo de texto dos elementos <p> correspondentes.
10	$("p").html() Isso retorna o conteúdo HTML de todos os parágrafos correspondentes.
11	$("div").html("Hello World") Isso definiria o conteúdo HTML de todos os <div> correspondentes para Hello World .
12	$("input:checkbox:checked").val() Obtenha o primeiro valor de uma caixa de seleção marcada.
13	$("input:radio[name=bar]:checked").val() Obtenha o primeiro valor de um conjunto de botões de opção.
14	$("button").val("Hello") Define o atributo de valor de cada elemento <button> correspondente.
15	$("input").val("on") Isso marcaria todo o botão de rádio ou caixa de seleção cujo valor é "on".
16	$("select").val("Orange") Isso selecionaria a opção Laranja em uma caixa suspensa com as opções Laranja, Manga e Banana.
17	$("select").val("Orange", "Mango") Isso selecionaria as opções Laranja e Manga em uma caixa suspensa com opções Laranja, Manga e Banana.