jQuery - Citire/Scriere conținut și atribute

 

Citirea conținutului elementelor - text(), html() și val()

jQuery conține o serie de metode pentru modificarea și manipularea elementelor și atributelor HTML.
Cele trei metode jQuery de manipulare a DOM(Document Object Model) sunt:

Exemple citire:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
  $("#btn3").click(function(){
    alert("Value: " + $("#test2").val());
  });
});
</script>
</head>
<body>
  <p id="test" value="Mickey Mouse">This is some <b>bold</b> text in a paragraph.</p>
  <p>Name: <input type="text" id="test2" value="Mickey Mouse"></p>
  <button id="btn1">Show Text</button>
  <button id="btn2">Show HTML</button>
  <button id="btn3">Show Value</button>
</body>
</html>


Scrierea conținutului elementelor - text(), html() și val()

Vom folosi ACELEAȘI trei metode de mai sus pentru a scrie în conținutul unui element:

$("#btn1").click(function(){
    $("#test1").text("Hello world1!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world2!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});

Citirea, modificarea, adăugarea și ștergerea de atribute HTML

Citirea unui atribut HTML se face folosind următoarea sintaxă:

$(selector).attr(atribut)

Modificarea unui atribut HTML se face folosind următoarea sintaxă:

$(selector).attr(atribut, valoare)

Notă în cazul în care atributul HTML nu există, el este adăugat.

Modificarea unui atribut HTML folosind o funcție se face cu ajutorul următoarei sintaxe:

$(selector).attr(attribute,function(index,valoare_curenta))

Unde:

Setarea mai multor atribute deodată se face astfel:

$(selector).attr({attribute:value, attribute:value,...})

Ștergerea de atribute HTML

Ștergerea unui atribut HTML se face folosind următoarea sintaxă:

$(selector).removeAttr(atribute)

Parametrul atribute este obligatoriu, si poate specifica unul sau mai multe atribute.

De exemplu ștergerea atributelor id și class pentru paragrafe se face astfel:

$("p").removeAttr("id class");

Să se modifice exemplul de mai sus prin adăugarea a trei noi butoane care să implementeze funcționalitate de scriere a celor 3 funcții: text(), html() și val() și să se testeze funcționalitate folosind butonele deja implementate în pagină.